From c62cb6c9daf890695fa5fc182ae314bc7976622f Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Wed, 30 Mar 2022 15:25:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E6=B7=BB=E5=8A=A0ec?= =?UTF-8?q?hart=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/screen/list/index.vue | 108 ++++++++++++++++++++++++++++---- 1 file changed, 96 insertions(+), 12 deletions(-) diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue index 55b924b..7856dc3 100644 --- a/src/pages/screen/list/index.vue +++ b/src/pages/screen/list/index.vue @@ -391,6 +391,19 @@ export default { }, // 获取图标数据并渲染 renderChart() { + const animateChart = (chart, option, data, num = 6) => { + // 每次向后滚动一个，最后一个从头开始。 + if (option.dataZoom[0].endValue == data.length ) { + option.dataZoom[0].endValue = num + option.dataZoom[0].startValue = 0 + } + else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + chart.setOption(option) + } + // 中国宏观杠杆率 this.$get(`${this.api.visualPreview}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => { const { comment, data } = res @@ -403,7 +416,7 @@ export default { data: data.map(n => n[e.field]) }) }) - echarts.init(document.querySelector(`#chart1`)).setOption({ + const option = { title: { text: '' }, @@ -424,6 +437,15 @@ export default { bottom: '3%', containLabel: true }, + dataZoom: [//滑动条 + { + xAxisIndex: 0,//这里是从X轴的0刻度开始 + show: false,//是否显示滑动条，不影响使用 + type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 6 // 一次性展示6个。 + } + ], color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], xAxis: { type: 'category', @@ -451,13 +473,19 @@ export default { } }, series - }) + } + const myChart = echarts.init(document.querySelector(`#chart1`)) + myChart.setOption(option) + + setInterval(function () { + animateChart(myChart, option, series) + }, 1500) }).catch(res => {}) // 全国税收收入 this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => { const { comment, data } = res - echarts.init(document.querySelector(`#chart3`)).setOption({ + const option = { title: { text: '' }, @@ -473,6 +501,15 @@ export default { }, data: data.map(e => e.quarter) }, + dataZoom: [//滑动条 + { + xAxisIndex: 0,//这里是从X轴的0刻度开始 + show: false,//是否显示滑动条，不影响使用 + type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 6 // 一次性展示6个。 + } + ], yAxis: { type: 'value', axisLine: { @@ -520,7 +557,12 @@ export default { } } ] - }) + } + const myChart = echarts.init(document.querySelector(`#chart3`)) + myChart.setOption(option) + setInterval(function () { + animateChart(myChart, option, data) + }, 1500) }).catch(res => {}) // 国际旅游外汇收入构成 @@ -597,7 +639,7 @@ export default { // 央行货币当局资产负债 this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => { const { comment, data } = res - echarts.init(document.querySelector(`#chart4`)).setOption({ + const option = { tooltip: { trigger: 'axis', axisPointer: { @@ -617,10 +659,19 @@ export default { grid: { left: '10', top: '30', - right: '10', + right: '30', bottom: '10', containLabel: true }, + dataZoom: [//滑动条 + { + xAxisIndex: 0,//这里是从X轴的0刻度开始 + show: false,//是否显示滑动条，不影响使用 + type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 3 // 一次性展示6个。 + } + ], xAxis: [{ type: 'category', boundaryGap: false, @@ -737,7 +788,12 @@ export default { data: data.map(e => e.reserve_money) } ] - }) + } + const myChart = echarts.init(document.querySelector(`#chart4`)) + myChart.setOption(option) + setInterval(function () { + animateChart(myChart, option, data, 3) + }, 1500) }).catch(res => {}) // 商品零售价格指数 @@ -757,7 +813,7 @@ export default { // 新增信贷数据 this.$get(`${this.api.previewData}?tableName=hg_zg_jr_xinzengxindaishuju&tableId=34`).then(res => { const { comment, data } = res - echarts.init(document.querySelector(`#chart5`)).setOption({ + const option = { title: { text: '', subtext: '', @@ -772,6 +828,15 @@ export default { right: '8%', bottom: '12%' }, + dataZoom: [//滑动条 + { + xAxisIndex: 0,//这里是从X轴的0刻度开始 + show: false,//是否显示滑动条，不影响使用 + type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 3 // 一次性展示6个。 + } + ], xAxis: { type: 'category', axisLine: { @@ -883,13 +948,18 @@ export default { data: data.map(e => e.mmomi.replace('%', '')) } ] - }) + } + const myChart = echarts.init(document.querySelector(`#chart5`)) + myChart.setOption(option) + setInterval(function () { + animateChart(myChart, option, data, 3) + }, 1500) }).catch(res => {}) // 以美元计算进口年率 this.$get(`${this.api.visualPreview}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => { const { comment, data } = res - echarts.init(document.querySelector(`#chart6`)).setOption({ + const option = { tooltip: { trigger: 'axis', }, @@ -911,6 +981,15 @@ export default { color: '#fff' } }, + dataZoom: [//滑动条 + { + xAxisIndex: 0,//这里是从X轴的0刻度开始 + show: false,//是否显示滑动条，不影响使用 + type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 6 // 一次性展示6个。 + } + ], xAxis: [{ type: 'category', axisLine: { @@ -976,7 +1055,12 @@ export default { data: data.map(e => e.value) } ] - }) + } + const myChart = echarts.init(document.querySelector(`#chart6`)) + myChart.setOption(option) + setInterval(function () { + animateChart(myChart, option, data) + }, 1500) }).catch(res => {}) @@ -1100,7 +1184,7 @@ export default { }] }) }).catch(res => {}) - + this.scrollTable() }, // 表格滚动效果