微信小程序中使用echarts图

​ 嗨喽大家好，我是老黑。最近这段时间完成了一个功能，那就是在微信小程序中引入了echarts图，也算是对这段时间的工作的一个总结吧。这个功能自己花费了很长的时间才整出来。后来自己反省了以下，总结了以下几点：
（1）、拿到功能后没有进行细致分工，总是做一步算一步，这就导致了一个功能反复做，反复改，耽误了大量的时间。
（2）、阅读文档的习惯还是太差，总是上网搜各个网友的实现，导致无法拿到最确定的实现方案，导致一个功能通过好几种方式来实现，最后还是回到最初的实现方案，这又耽误了大量的时间。
改进：以后拿到一个功能后不要急着去做，而是大体看看什么地方需要怎么做，如何去做，一定要规划好再去做，不要做一步算一步。
​ 下面总结一下，我在微信小程序中引入echarts图这个功能。
​ 首先这是网址：https://github.com/ecomfe/echarts-for-weixin
​ 这是echarts网址：https://echarts.apache.org/zh/index.html

1、如下图所示，第一步先通过官网下载ec-canvas文件，因为这个时候文件太大，而微信小程序中允许最大是2m，所以在官网中自己要搭建js,需要注意一点的是可能版本或者其他的问题导致***get function not defined等错误，可以选择不同的版本试试。

2、下面是需要在父组件中使用，首先在父组件中的json文件中引入echarts这个组件

3、在父组件的js文件中通过import来引入就可以使用了。

4、然后再在wxml文件中引入echarts这个子组件

5、然后在js文件中初始化echarts图和options对象就可以看到echarts图的效果

6、初始化options对象，options就是来控制echarts图中数据的显示以及对echarts图的样式的修改

在这一步中需要注意的是折现图中我想点击某个点的时候，这个点能够显示数据。这在折线图中应用很多。刚开始的时候我是把这个axisPointer这个属性写在外面，导致效果没有出来，后来才知道，要是想x轴显示数据的话，那就在x轴中设置，如果想在y周显示，那就在y轴中设置。

如上图所示，同时要注意seriers中data数据是从后台拿到的动态数据，这个地方自己踩的坑是，刚开始我是按照官网把初始化echarts图和options写在了component外面，这样的一个弊端就是，当我想获取后台的数据的时候，只能再调接口，不仅性能差，而且动态渲染数据极其的不方便，把这个方法拿到里面后再渲染数据就简单方便多了。

7、这个时候准备工作做完了，但是，如果打开页面后，一篇空白，图并没有出来，这是两个原因，一个是，没有设置echarts的大小等一些样式。

如上图所示，在wxss中设置上面的样式后就能出来，如果还不能出来就检查一下是不是没有实现异步，当我获取后台数据后并没有给echarts图，如下图所示。

绿色框中是接口来获取后台的数据，这个地方有个特别重要的地方，刚刚忘了说，就是在调用初始化方法的时候，一定要通过selectComponent来获取到元素后才能渲染上。

8、通过上面的步骤，就可以出来效果了，效果如下图所示。

如果觉得对您有用的话帮忙给公众号点点关注：老黑的编程之路