vue+echarts实现图表（含踩过的坑，包括获取动态数据图表不显示数据，echarts不同类型图表组件封装以柱状图为例）

Echarts在Vue中的安装命令，参考Echarts官网：在webpack中使用Echarts（链接：https://www.echartsjs.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts）。

使用npm安装命令是：npm install echarts --save

安装成功之后可以按需引入。

首先，我进行了组件封装，以柱状图为例，组件代码如下：

父组件代码如下：

上述代码是经过修改之后的，可运行代码，在这之前，遇到了问题。

问题一：该代码实现的是将订单相关信息数据制作成柱状图。在父组件中请求后台数据，传给子组件，在运行过程中，子组件成功接收到父组件传递过来的数据，但是图表没有绘制，数据不展示。如下图，this.item1Data接收父组件传递的数据，可以拿到，values1用于展示横坐标信息，打印为空。而在热更新之后是可以将数据展示出来的。

因此，使用了watch进行数据监听。watch数据监听：http://www.cnblogs.com/yesu/p/9546458.html

最初，我以为是生命周期的缘故，因此查了vue声明周期created与mounted区别：https://blog.csdn.net/xdnloveme/article/details/78035065

问题二，柱状图横纵坐标一定要找好，并且横纵坐标所渲染的data的数据结构是不一样的。

问题三，在父组件传递数据的时候，如fetchData中所展示的，是使用了中间变量，在未使用中间变量之前，用watch监听没有成功，原因是我给原数组进行了循环遍历，然后直接push到要传递的数组，再直接将该数组传递给子组件，因为数组push的时候没有触发render函数。这时候可以使用中间数组的形式进行赋值，因此，无法直接监听到，用到了中间变量。