vue单页面中有多个echarts图表时公用代码写法
html中:<div class="charts1"/><div class="charts2"/><div class="charts3"/><div class="charts4"/><di
·
- html中:
<div class="charts1"/>
<div class="charts2"/>
<div class="charts3"/>
<div class="charts4"/>
<div class="charts5"/>
<div class="charts6"/>
<div class="charts7"/>
- 数据处理就不用提了。嗯,直接画图:
// 画 折线图
drawLine() {
// 数据处理的方法
this.dealEchartsData()
var myChartsArr = []
for (var i = 1; i <= 7; i++) {
this.myCharts = this.$echarts.init(document.getElementsByClassName('charts' + i)[0])
myChartsArr.push(this.myCharts)
var option = this.commonOption(this.myCharts, this.adnormalTypeSummery[i - 1], this.destArrAll[i - 1])
// 为echarts对象加载数据 true 防止echarts数据叠加!!!
this.myCharts.setOption(option, true)
}
window.onresize = function() { // 自适应
for (var j = 0; j < myChartsArr.length; j++) {
if (myChartsArr[j].resize()) {
myChartsArr[j].resize()
}
}
}
},
- 公用部分:
// option 主体
commonOption(myCharts, titleText, destData) {
var option = {
title: {
text: titleText
},
tooltip: {
trigger: 'axis',
confine: true
},
legend: {
type: 'scroll',
width: '90%',
top: '13%'
},
grid: {
left: '3%',
right: '4%',
bottom: '2%',
containLabel: true
},
toolbox: {
right: '20',
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.monthName
},
yAxis: {
type: 'value'
},
series: destData
}
return option
}
- 离开该页面时候摧毁:
destroyed() {
if (this.myCharts) {
this.myCharts.clear()
this.myCharts.dispose()
window.onresize = null
}
更多推荐
已为社区贡献8条内容
所有评论(0)