html中：

<div /> <div /> <div /> <div /> <div /> <div /> <div />

數據處理就不用提了。嗯，直接畫圖：

// 畫 折線圖 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 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圖表時的公用代碼寫法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。