一、使用vuex进行echarts数据的渲染
如果使用vuex存储数据的话,echarts图表的渲染,会出现不了,控制台输出数据源发现是有数据,但是图表就是不出来,把echarts创建放到mounted中,他也不出来,就算加上了this.$nextTick(),他还是不出来。就是很气!!!后面摸索了,解决办法也有!!
在create周期中请求数据!!!
1.使用定时器进行延缓渲染
具体原因我也不清楚,但是这样子操作之后图表确实,他就出来,是不是很神奇!!!
setTimeout(() => {
//调用echarts的方法
});
}, 100);
2.使用watch监听数据变化,重新渲染
这样子就是通过对新数据重新渲染的方式进行显示的,效果也是ok的,亲测!
//数据自动刷新,必然需要一个监听机制告诉Echarts重新设置数据
watch: {
//观察option的变化
echarts1_option: {
handler(newVal, oldVal) {
if (this.myChart) {//判断对象在不在
if (newVal) {
this.myChart.setOption(newVal);//用新数据进行重新渲染
} else {
this.myChart.setOption(oldVal);//使用旧数据进行渲染
}
} else {
this.init();//创建对象
}
},
deep: true //对象内部属性的监听,关键。
}
},
init(){
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('echartss'))
// 绘制图表,this.echarts1_option是数据
myChart.setOption(this.echarts1_option,true)
},
二、echarts与echarts-GL的版本兼容问题
这个就超级恶心,版本不对根本不给你用疯狂给你报错!!!
对于初学者特别不友好!
而且使用npm 直接安装的话,他装得版本都会不兼容,就非常烦!!!
下面是我自己琢磨出能用的对应版本
echarts | echarts-GL |
---|---|
4.9.0 | 1.1.2 |
5.2.0 | 2.0.8 |
5.3.1 | 这个我是直接用本地js(晚点会上传上来) |
这些都是亲测能用的对应版本,如果有其他兼容的版本欢迎补充!!!
总结
总的来说还是很快很快,但也好用,没办法,没有其他好用的图标库了
附上一张自己做的网站图!!!hhhhh