浅谈vue单页面中有多个echarts图表时的公用代码写法

2023-07-20 14:14:14 73

//画折线图 drawLine(){ //数据处理的方法 this.dealEchartsData() varmyChartsArr=[] for(vari=1;i<=7;i++){ this.myCharts=this.$echarts.init(document.getElementsByClassName('charts'+i)[0]) myChartsArr.push(this.myCharts) varoption=this.commonOption(this.myCharts,this.adnormalTypeSummery[i-1],this.destArrAll[i-1]) //为echarts对象加载数据true防止echarts数据叠加！！！ this.myCharts.setOption(option,true) } window.onresize=function(){//自适应 for(varj=0;j

公用部分：

//option主体
commonOption(myCharts,titleText,destData){
varoption={
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
}
returnoption
}

离开该页面时候摧毁：

destroyed(){
if(this.myCharts){
this.myCharts.clear()
this.myCharts.dispose()
window.onresize=null
}

补充知识：Vue+Echarts图表展示及动态渲染

准备工作

安装echarts依赖

npminstallecharts--save-dev

引入

(main.js)
importechartsfrom'echarts'
Vue.prototype.$echarts=echarts;

开始撸代码

以上这篇浅谈vue单页面中有多个echarts图表时的公用代码写法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

浅谈vue单页面中有多个echarts图表时的公用代码写法

出入人员总数{{peopleSumTotal}}

随机推荐

浅谈vue单页面中有多个echarts图表时的公用代码写法

出入人员总数{{peopleSumTotal}}

热门推荐

随机推荐