在vue项目中,使用echarts图表。npm安装,引入和常规使用echarts无差别。在vue中,可以把echarts放在独立组件中,然后在页面中引用。通过组件的props传入需要图表展示的数据。在methods中定义初始化echarts实例的方法,比如drawline(),然后在组件生命周期mounted时,调用this.drawline(),进行echarts组件实例化渲染。
但是这么操作会带来一个问题,echarts只在初始化实例的时候,读取并渲染图表数据,在使用此组件的页面里,改变想要展示的图表数据时,这个echarts组件就无法复用了。解决方法如下:父组件或页面改变传入的props时,echarts中的props是会响应到相应改变的,我们只需要让echarts重新实例化一次,就可以重新渲染了。即在vue的watch方法中监听这个属性的变化,如果props发生了变化,重新调用之前定义的drawline()即可。
export default {
name: 'Echarts',
data () {
return {
}
},
props:{
testdata: Array
},
mounted(){
this.drawLine();
},
watch:{
testdata(oldv,newv){
this.drawLine();
}
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
.....省略
}
}