1

src/views/BusDynamics/OPCMonitoring/index.vue

@@ -29,43 +29,49 @@ const fetchData = async () => {
         const valuesLastArray = response.map(obj => obj.industrialOutputValueLastYear);
 
         const options = {
-                title: {
-                    text: 'World Population'
+            title: {
+                text: '产值产能检测'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            },
+            yAxis: {
+                type: 'category',
+                data: namesArray
+            },
+            series: [
+                {
+                    name: '2011',
+                    type: 'bar',
+                    data: valuesArray
                 },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                legend: {},
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01]
-                },
-                yAxis: {
-                    type: 'category',
-                    data: namesArray
-                },
-                series: [
-                    {
-                        name: '2011',
-                        type: 'bar',
-                        data: valuesArray
-                    },
-                    {
-                        name: '2012',
-                        type: 'bar',
-                        data: valuesLastArray
-                    }
-                ]
-            };
+                {
+                    name: '2012',
+                    type: 'bar',
+                    data: valuesLastArray
+                }
+            ],
+            dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
+                type: 'slider', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
+                yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
+                start: 10, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
+                end: 30 // 数据窗口范围的结束百分比, 表示到60%的位置结束
+            }]
+        };
 
         chartInstance.value.setOption(options);
     } catch (error) {