huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

可视化添加echart自动滚动

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent c9dd5a4701
commit c62cb6c9da
1 changed files with 96 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/pages/screen/list/index.vue

108
src/pages/screen/list/index.vue
Unescape View File

@ -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()
},
// 表格滚动效果

Write Preview
Loading…
Cancel
Save