关于echarts封装组件以及多次更新数据信息加载问题

组件以及多次更新数据信息加载问题"/>

关于echarts封装组件以及多次更新数据信息加载问题

项目中经常使用到echarts插件，使用时会遇到封装组件的问题，一个组件到底怎么封装才是完善的？仁者见仁智者见智思路不同封装的方式就是不同的。废话不多直接上封装的代码：

<template><div :id="id" :style="style"></div>
</template><script>import * as echarts from 'echarts'export default {name: 'MyEcharts',data () {return {chart: ''}},//父组件传值接受内容props: {id: {type: String},width: {type: String,default: '100%'},height: {type: String,default: '100%'},option: {type: Object,default() {return { //echarts中的基本内容都在这里。其实就是一个空壳内容，便于加载echarts内容angleAxis: {},title: {},tooltip: {},grid: {},xAxis: {},yAxis: {},toolbox: { },dataZoom: [],visualMap: {},series: {}}}}},computed: {style() {return {width: this.width,height: this.height}}},watch: {option: {handler(newVal, oldVal) {//该判断滚句自己需要进行改装，若是懒这样使用就行。if (this.chart) {this.init(); //监听事件，这才是关键点this.chart.setOption(newVal)} else {this.init();}},deep: true},},methods: {init() {this.chart = echarts.init(document.getElementById(this.id));this.chart.clear(); //清空数据使用，可能没用，写上总比没有要好一些。this.chart.setOption(this.option)window.addEventListener("resize", this.chart.resize);},},mounted() {this.init()},}
</script> 

该代码直接引用就能使用。

父组件内容：

<!--引用组件-->
<echarts id="demo" class="echarts_Top aaaaaa" height="30rem" :option='ChartTestData'></echarts>import echarts from 'xxx/xxx/echarts';//引入方式很多自己根据自己想法来export default {components: { //组件名称echarts},data(){return{ChartTestData:{},//echarts内容gridDate :{left: '3%',right: '4%',bottom: '3%',containLabel: true},tooltipDate:{trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},yAxisDate : [{type: 'value',name: '功率',min: 0,axisLabel: {formatter: '{value} KW'}},],titleDate:{},}},methods:{getLiat(){this.ChartTestData ={ title: this.titleDate, //在data中声明tooltip: this.tooltipDate, //在data中声明grid : this.gridDate, //在data中声明legend:{},xAxis: [{type: 'category',data: ['1','2'], //X轴内容  遍历或者后台直接返回单独数据v.datesaxisPointer: {type: 'shadow'}}],yAxis : this.yAxisDate,series : seriesDate, //展示内容数据（遍历或者后台直接返回单独数据v.dates）  } }}}

结果展示：

喜欢关注一下。一起学习探索未来。