ercharts一个页面能放几个_浅谈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;

开始撸代码

出入人员总数{{peopleSumTotal}}

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() {}

};

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