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图表时的公用代码写法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。