[Feat 0000] 可配置首页添加宽型柱状图

src/views/vent/deviceManager/configurationTable/types.ts

@@ -185,7 +185,17 @@ export interface ModuleDataGalleryList extends ReadFrom {
 
 export interface ModuleDataChart extends ReadFrom {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack' | 'bar_cylinder';
+  type:
+    | 'pie'
+    | 'bar'
+    | 'line'
+    | 'line_area'
+    | 'line_bar'
+    | 'line_smooth'
+    | 'line_smooth_complex'
+    | 'bar_stack'
+    | 'bar_cylinder'
+    | 'bar_cylinder_wide';
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */

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

@@ -235,12 +235,12 @@
             },
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map((e, i) => {
           return {
             ...e,
             splitLine: {
               lineStyle: {
-                opacity: 0.1,
+                opacity: i === 0 ? 0.1 : 0,
               },
             },
           };
@@ -311,12 +311,12 @@
             },
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map((e, i) => {
           return {
             ...e,
             splitLine: {
               lineStyle: {
-                opacity: 0.1,
+                opacity: i === 0 ? 0.1 : 0,
               },
             },
           };
@@ -351,12 +351,12 @@
             type: 'category',
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map((e, i) => {
           return {
             ...e,
             splitLine: {
               lineStyle: {
-                opacity: 0.1,
+                opacity: i === 0 ? 0.1 : 0,
               },
             },
           };
@@ -396,13 +396,13 @@
             boundaryGap: false,
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map((e, i) => {
           return {
             ...e,
             splitLine: {
               lineStyle: {
                 color: '#fff',
-                opacity: 0.1,
+                opacity: i === 0 ? 0.1 : 0,
               },
             },
           };
@@ -558,12 +558,12 @@
             },
           };
         }),
-        yAxis: yAxis.map((e) => {
+        yAxis: yAxis.map((e, i) => {
           return {
             ...e,
             splitLine: {
               lineStyle: {
-                opacity: 0.1,
+                opacity: i === 0 ? 0.1 : 0,
               },
             },
           };
@@ -634,6 +634,108 @@
       };
     }
 
+    // 柱状图，圆柱形样式
+    if (type === 'bar_cylinder_wide') {
+      return {
+        textStyle,
+        grid: {
+          top: 40,
+          bottom: 50,
+        },
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            ...e,
+            type: 'category',
+            axisLabel: {
+              interval: 0,
+              width: (domWidth - 100) / get(baseSeries, '[0].data.length', 1),
+              overflow: 'break',
+            },
+          };
+        }),
+        yAxis: yAxis.map((e, i) => {
+          return {
+            ...e,
+            splitLine: {
+              lineStyle: {
+                opacity: i === 0 ? 0.1 : 0,
+              },
+            },
+          };
+        }),
+        series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
+          // const colors = ['#66ffff', '#00ff66', '#ffff66'];
+          const colors = ['#73C0DE', '#ED6666', '#5470C6', '#91CC75', '#FAC858', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
+          if (baseSeries.length === 1) {
+            curr.push({
+              ...serie,
+              type: 'pictorialBar',
+              symbol: 'circle',
+              symbolPosition: 'end',
+              symbolSize: [50, 10],
+              symbolOffset: [0, -5],
+              barGap: '-100%',
+              yAxisIndex: index,
+              itemStyle: {
+                color: ({ dataIndex }) => colors[dataIndex % colors.length],
+              },
+            });
+            curr.push({
+              ...serie,
+              type: 'pictorialBar',
+              symbol: 'circle',
+              symbolPosition: 'start',
+              symbolSize: [50, 10],
+              symbolOffset: [0, 5],
+              barGap: '-100%',
+              yAxisIndex: index,
+              itemStyle: {
+                color: ({ dataIndex }) => colors[dataIndex % colors.length],
+              },
+            });
+          }
+          curr.push({
+            ...serie,
+            type: 'bar',
+            // silent: true,
+            yAxisIndex: index,
+            barWidth: 50,
+            barGap: '100%',
+            itemStyle: {
+              color: ({ dataIndex }) =>
+                new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: `${colors[dataIndex % colors.length]}44` },
+                  { offset: 0.5, color: colors[dataIndex % colors.length] },
+                  { offset: 1, color: colors[dataIndex % colors.length] },
+                ]),
+              borderRadius: [5, 5, 0, 0],
+            },
+            label: {
+              show: true, //开启显示
+              position: 'top', //在上方显示
+              textStyle: {
+                //数值样式
+                color: '#ffffffbb',
+                fontSize: 13,
+              },
+              formatter: function (obj) {
+                return obj['data'][1];
+              },
+            },
+          });
+
+          return curr;
+        }, []),
+      };
+    }
+
     return {};
   };