关于echarts,百分之九十的答案都在官网文档中:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
echarts实例是异步更新数据,就是发送请求。
- 首先init
- 然后获取请求,请求数据
- 拿到数据之后,setOption,就把图表显示出来,更新填充数据。(显示标题,图例和空的坐标轴)
将echarts放到一个一个组件中。
- 准备一个具备宽高的画布DOM容器
- 在mounted中初始化数据。(在使用第三方UI插件的时候,某些插件需要根据dom元素,进行初始化,初始化的代码,一定要写到mounted中)
- 在vue组件中不要使用id操作dom,因为组件与组件结合到一起的时候,最后会整合到一个组件,会造成冲突。vue中操作的dom方式是要给节点声明ref,通过this.$refs.ref名字来访问。每个组件中的ref和其他组件中的ref是互不影响的。
- 同一个组件中不要有同名的ref
- 要拿到后台的数据,完成更新。就要把vue中的返回值写上数据。
最终效果:
不能用element loading,这个图表不是dom,是画出来的 。在发送请求之前的话,可以用showloading。发送请求结束后,再hideloading。
当更新后端数据,接口数据发生变化,页面数据也改变。常用轮询的方法,实时获取新的数据,不断发送请求,有新数据就更新。效率较低。还有一个方法是webscoket,双向通信的网络通信。我们现在的都是app请求,经典模型是:有请求,才有响应。要想根据后端数据实时更新,服务端主动向客户端推送数据。(有时间了解一下)
总结:
实现echarts异步更新数据分为三步(任何echarts都是):
- 准备容器
- init初始化
- setoption更新图表