Vue在一个页面中使用多个Echarts表格
1.首先echarts使用之前必须有完整的DOM结构,所以可以放在mounted中使用使用步骤:1)mounted() {this.echarts1()this.echarts2(this.imageData)},2)在methods中配置这两个表格echarts1(){var myChart = echarts.init(document.getElementById('main'));var
·
1.首先echarts使用之前必须有完整的DOM结构,所以可以放在mounted中使用
使用步骤:
1)
mounted() {
this.echarts1()
this.echarts2(this.imageData)
},
2)在methods中配置这两个表格
echarts1(){
var myChart = echarts.init(document.getElementById('main'));
var option = {}//样式可参照echarts官网
myChart.setOption(option,true);//true是设置是否可动态更新数据
}
3)如果想要动态更新表格,可以先初始化一个数据,然后利用watch监听,当数据发生改变,就重新加载表格
比如我这里初始化
data(){
return{
imageData:{'1':'2','2':'12'.....}//初始的数据
}
}
那这个imageData可以传给echarts进行初始化的展示
4)当数据发生变化的时候,先清除掉旧的echarts图表,然后重新调用
watch:{
imageData:{
deep:true,
handler:function(){
document.getElementById('aside').removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance_
this.echarts2(this.imageData)
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)