关于Echarts如何使用的项目开发经验

关于Echarts如何使用的项目开发经验

如何处理动态数据与Echarts结合在页面渲染的问题

在使用Echarts可视化图表库+Vue.js相结合过程中，我们遇到了动态数据渲染和Echarts注册挂载存在“时差”的问题。使用伊始认为是数据格式不符合渲染条件，在对数据处理后页面仍未显示预期效果。结合整个Vue框架的生命周期中created()和mounted()扮演的角色和产生的效果，我们理解了为什么数据为什么不能动态的渲染上去，就是两个钩子函数挂载执行的顺序有问题。

关于 created() 和 mounted()

created():
          在整个静态的html文件加载完成之前，执行created()函数
          在有父组件和子组件的Vue文件中，执行顺序为父组件->子组件
          created()钩子函数的主要作用是用于初始化数据
          一般在开发中将需要向后端提交请求的函数(方法)放置在created()中。
mounted():
          在整个静态的html文件加载完成之后，执行mounted()函数
          在有父组件和子组件的Vue文件中，执行顺序为子组件->父组件。
          mounted()钩子函数的主要作用是执行DOM操作
          ，因此一般将DOM操作的函数(方法)放置在mounted()

解决办法

通过watch()函数监听x,y轴中数据的变化，每次变化都执行Echarts的DOM操作，从而实现基于Vue.js框架下Echarts可视化图像中数据的动态渲染。