From 1e5dc53615446a620d4d0fc0068c09989686e015 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 04 十二月 2023 18:52:11 +0800 Subject: [PATCH] 设置柱状图自动滚动 --- src/views/cockpitPage/components/PerSonnelProductivity.vue | 52 ++++++++++++++++++++++++++++++++-------------------- 1 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue index 84ce27a..5814dcf 100644 --- a/src/views/cockpitPage/components/PerSonnelProductivity.vue +++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue @@ -24,8 +24,18 @@ data() { return { chartData: { - datax: ["浜哄憳1", "浜哄憳2", "浜哄憳3", "浜哄憳4", "浜哄憳5", "浜哄憳6"], - datay: [120, 200, 150, 380, 470, 150, 230], + datax: [ + "浜哄憳1", + "浜哄憳2", + "浜哄憳3", + "浜哄憳4", + "浜哄憳5", + "浜哄憳6", + "浜哄憳7", + "浜哄憳8", + "浜哄憳9", + ], + datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440], }, }; }, @@ -43,6 +53,7 @@ methods: { //鍦ㄨ亴 pieChart(chartName, data) { + let that = this; let chartDom = this.$refs[chartName]; let myChart = echarts.init(chartDom); let option; @@ -65,24 +76,10 @@ dataZoom: [ { type: "inside", - // show: true, //鏄剧ず婊氬姩鏉� - start: 0, - end: 100, yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - // handleSize: 8 - }, - { - // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°�� - type: "inside", - // show: true, - // realtime : true, - yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - start: 0, - end: 100, + show: false, + startValue: 0, // 浠庡ご寮�濮� + endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� }, ], legend: { @@ -124,7 +121,7 @@ ], xAxis: [ { - type: "", + type: "value", name: "鍗曚綅锛氫欢", // min: data.yAxis[0].min?data.yAxis.min:0, minInterval: 1, //鍧愭爣杞存槸鏁存暟 @@ -188,7 +185,22 @@ ], }; + setInterval(function () { + // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� + if (option.dataZoom[0].endValue == that.chartData.datay.length) { + option.dataZoom[0].startValue = 0; + option.dataZoom[0].endValue = 5; + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; + } + myChart.setOption(option); + }, 4000); + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); } else { option = {}; myChart.setOption(option, true); -- Gitblit v1.8.0