Echarts 的使用和实现

关于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更新图表