echarts 封装
<template>
<div :id='idName' :style="{width:'100%',height:'100%'}"></div>
</template>
<script>
import "echarts/lib/chart/line"
import "echarts/lib/chart/bar"
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import "echarts/lib/component/tooltip"
import macarons from "echarts/theme/macarons"
export default {
props: ['idName', 'valObj'],
data () {
return {
pie: this.idName,
charts: ''
}
},
mounted() {
this.initChart()
},
watch: {
valObj: {
handler (newVal, oldVal) {
if(newVal){
this.initChart();
}else{
this.initChart();
}
},
deep: true
}
},
methods: {
initChart() {
this.$nextTick(() => {
this.charts = this.$echarts.init(document.getElementById(this.pie),'macarons')
this.charts.setOption({
title: this.valObj.title,
tooltip: this.valObj.tooltip,
legend: this.valObj.legendData,
grid: this.valObj.grid,
xAxis: this.valObj.xAxis,
yAxis: this.valObj.yAxis,
series: this.valObj.seriesData
})
})
}
}
}
</script>