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
 }

補充知識：Vue + Echarts 圖表展示 及 動態渲染

準備工作

安裝echarts依賴

npm install echarts --save-dev

引入

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

開始擼程式碼

<template>
 <div class="peopleWrap">
 <h3>
  <i class="el-icon-position"></i>
  出入人員總數{{peopleSumTotal}}
 </h3>
 <div id="peopleSum" style="width: 180px;height: 270px"></div>
 </div>
</template>
<script>
export default {
// 接受父元件傳來的引數【父傳子props】
 props: ["peopleSumTotal"],data() {
 return {
  peopleSumTotalArr: []
 };
 },watch: {
 // 監聽引數變化
 peopleSumTotal: {
  handler(newVal,oldVal) {
  if (newVal != 0) {
   console.log(newVal);
   this.peopleSum(newVal);
  }
  }
 }
 },methods: {
 peopleSum(newVal) {
 // 引入 echarts
  var echarts = require("echarts");
  let peopleSum = echarts.init(document.getElementById("peopleSum"));
  //echsrts點選事件
  peopleSum.on("click",function(param) {
  console.log(param);
  console.log(param.data.name);
  console.log(param.data.value);
  console.log(param.data.userDefined);
  //$emit的第一個為傳的參的名字，第二個為傳的值 【子傳父 this.$emit】
  _this.$emit("peopleSumtoparent",param.data); 
  });

//接受動態資料時需要在 this.$nextTick(()=>{})展示
  this.$nextTick(() => {
  let obj = {};
  obj.value = newVal;
  obj.name = newVal;
  this.peopleSumTotalArr.push(obj);

  let option = {
   legend: {
   orient: "vertical",left: 10,data: [""]
   },series: [
   {
    type: "pie",radius: ["50%","70%"],avoidLabelOverlap: false,itemStyle: {
    // 普通樣式。
    normal: {
     // 點的顏色。
     color: "#6998f7"
    },// 高亮樣式。
    emphasis: {
     // 高亮時點的顏色。
     color: "#6998f7"
    }
    },label: {
    normal: {
     show: true,position: "center",textStyle: {
     fontSize: "20"
     }
    }
    },labelLine: {
    normal: {
     show: false
    }
    },data: this.peopleSumTotalArr //動態圖表展示
   }
   ]
  };
  console.log("option",option);
  peopleSum.setOption(option);
  });
 }
 },mounted() {}
};
</script>
<style lang="scss" scoped>
</style>

以上這篇淺談vue單頁面中有多個echarts圖表時的公用程式碼寫法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。