[Feat 0000] 可配置首页添加datazoom选项

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

@@ -190,6 +190,11 @@ export interface ModuleDataChart extends ReadFrom {
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
   order?: 'desc' | 'asc';
+  /** 数据缩放组件的配置，每一项对应一项 xAxis 配置 */
+  dataZoom?: {
+    /** 数据轴允许展示的最大数据量，超长后出现数据缩放组件，配置后大部分图表会抬高以适配一个数据缩放组件 */
+    maxAxisLength: number;
+  }[];
   /** 图表x轴配置（若有），支持多个，注意至少一个 */
   xAxis: {
     show: boolean;

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

@@ -31,7 +31,7 @@
     const inst = getInstance();
     const domWidth = inst ? inst.getWidth() : 500;
     // 依据每一个图表配置生成图表选项
-    const { yAxis = [], xAxis = [], legend, order, type, sortBy, series } = props.chartConfig;
+    const { yAxis = [], xAxis = [], legend, order, type, sortBy, series, dataZoom = [] } = props.chartConfig;
     const textStyle = {
       color: '#fff',
     };
@@ -68,6 +68,15 @@
       return res;
     }, []);
 
+    const baseDataZoom = dataZoom.map((e, i) => {
+      return {
+        type: 'slider',
+        show: get(baseSeries, '[0].data.length', 1) > e.maxAxisLength,
+        xAxisIndex: i,
+        end: e.maxAxisLength,
+      };
+    });
+
     if (type === 'pie') {
       return {
         textStyle,
@@ -105,7 +114,7 @@
         textStyle,
         grid: {
           top: 50,
-          bottom: 50,
+          bottom: dataZoom.length ? 70 : 50,
         },
         legend: {
           textStyle,
@@ -114,6 +123,7 @@
         tooltip: {
           trigger: 'item',
         },
+        dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
           return {
             ...e,
@@ -188,8 +198,9 @@
           left: 60,
           top: 40,
           right: 60,
-          bottom: 30,
+          bottom: dataZoom.length ? 70 : 30,
         },
+        dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
           return {
             ...e,
@@ -231,8 +242,9 @@
         grid: {
           left: 60,
           right: 60,
-          bottom: 30,
+          bottom: dataZoom.length ? 70 : 30,
         },
+        dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
           return {
             ...e,
@@ -274,8 +286,9 @@
           left: 50,
           top: 50,
           right: 50,
-          bottom: 50,
+          bottom: dataZoom.length ? 70 : 50,
         },
+        dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
           return {
             ...e,
@@ -329,9 +342,10 @@
           left: 40,
           top: 50,
           right: 40,
-          bottom: 10,
+          bottom: dataZoom.length ? 70 : 10,
           show: false,
         },
+        dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
           return {
             ...e,