微信小程序：折线图，仿墨迹天气的气温折线图----echarts

效果图：

https://b23.tv/8CsXoS或者https://v.qq.com/x/page/b3214zhvz3b.html

首先需要去echarts官网，找到在微信小程序中使用echarts的文章

https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

点击图上红方框1：https://github.com/ecomfe/echarts-for-weixin

然后按照文档这里的要求：

上面是一些官方给的步骤，下面直接上代码

然后是js文件：因为数据肯定都是用借口获取到的嘛，所以需要用到canvas示例pages文件中的lazyLoad文件：

需要注意一点，下图中getWidth这个方法是需要在获取完数据之后，并且在seData  (  {  xdata:xdata },(  )  =>  {   this.getWidth()  }  )调用的，相当于vue的$nextTick因为获取完数据，才能渲染完页面然后才能获取到下图中的.forecastWidth这个dom节点

这样就可以 了

tips：滑动的效果，是基于echarts的宽度和scroll-view这个标签的使用，有时不能滑动要看下你项目中这两项的配置，还有就是echarts.js文件的版本，