[Style 0000] 柱状图样式调整

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -58,7 +58,7 @@
     }
 
     // 该项作为下面所有图表依赖的基准系列数据
-    const baseSeries: { name: string; data: [string, string] }[] = sorttedData.reduce((res: any[], baseData) => {
+    const baseSeries: { name: string; data: [string, string][] }[] = sorttedData.reduce((res: any[], baseData) => {
       series.forEach((serie) => {
         res.push({
           name: getFormattedText(baseData, serie.label),
@@ -105,7 +105,6 @@
 
     // 柱状图
     if (type === 'bar') {
-      const barGapMap = { 1: '-100%', 2: '-85%' };
       return {
         textStyle,
         grid: {
@@ -125,7 +124,7 @@
             type: 'category',
             axisLabel: {
               interval: 0,
-              width: 150,
+              width: 800 / get(baseSeries, '[0].data.length', 1),
               overflow: 'break',
             },
           };
@@ -142,25 +141,27 @@
         }),
         series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
           const colors = ['#66ffff', '#ffff66'];
-          curr.push({
-            ...serie,
-            type: 'pictorialBar',
-            symbol: 'circle',
-            symbolPosition: 'end',
-            symbolSize: [16, 16],
-            symbolOffset: [0, -8],
-            barGap: barGapMap[baseSeries.length],
-            yAxisIndex: index,
-            itemStyle: {
-              color: colors[index % colors.length],
-            },
-          });
+          if (baseSeries.length === 1) {
+            curr.push({
+              ...serie,
+              type: 'pictorialBar',
+              symbol: 'circle',
+              symbolPosition: 'end',
+              symbolSize: [20, 20],
+              symbolOffset: [0, -10],
+              barGap: '-100%',
+              yAxisIndex: index,
+              itemStyle: {
+                color: colors[index % colors.length],
+              },
+            });
+          }
           curr.push({
             ...serie,
             type: 'bar',
             silent: true,
             yAxisIndex: index,
-            barWidth: 8,
+            barWidth: 10,
             barGap: '100%',
             itemStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
@@ -168,6 +169,7 @@
                 { offset: 0.2, color: colors[index % colors.length] },
                 { offset: 1, color: `${colors[index % colors.length]}22` },
               ]),
+              borderRadius: [5, 5, 0, 0],
             },
           });