Article directory
1. Use vuex to render echarts data
If vuex is used to store data, the rendering of the echarts chart will not appear. The console outputs the data source and finds that there is data, but the chart does not come out. If the echarts creation is placed in mounted, it will not come out, even if this is added. .$nextTick(), he still doesn’t come out. Just very angry! ! ! After some searching, I found a solution! !
Request data during the create cycle! ! !
1. Use timers to delay rendering
I don’t know the specific reason, but after this operation, the chart is correct and it comes out. Isn’t it amazing? ! !
setTimeout(() => {
//调用echarts的方法
});
}, 100);
2. Use watch to monitor data changes and re-render
In this way, the new data is displayed by re-rendering, and the effect is ok. Personal test!
//数据自动刷新，必然需要一个监听机制告诉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)
},
2. Version compatibility issues between echarts and echarts-GL
This is super disgusting. If the version is wrong, I will not give you an error message like crazy! ! !
Especially not friendly for beginners!
Moreover, if you use npm to install it directly, the installed version will be incompatible, which is very annoying! ! !
The following is the corresponding version that I figured out myself.
| echarts | echarts-GL |
|---|---|
| 4.9.0 | 1.1.2 |
| 5.2.0 | 2.0.8 |
| 5.3.1 | I directly use local js for this (will upload it later) |
These are the corresponding versions that can be used for personal testing. If there are other compatible versions, please add them! ! !
Summarize
Generally speaking, it is very fast, but it is also easy to use. There is no other easy-to-use icon library.
Attached is a website image I made!!!hhhhh
