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

html中：

数据处理就不用提了。嗯，直接画图：

// 画 折线图
 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
 }

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

准备工作

安装echarts依赖

npm install echarts --save-dev

引入

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

开始撸代码

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