微信小程序绘制图表

在微信小程序上写一个折线图还是很麻烦的，而小程序官方也没有给出相应的组件，这就不得不借助第三方的插件了，网上查了一下，还是有可以在小程序上直接用的插件的。
这里我就简单说一下用法，以及配置过程中的坑。

ECharts插件，首先我们进入他的官网下载它的小程序演示样例。

https://www.echartsjs.com/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

样例的目录结构

其中ec-canvas文件夹是主要代码，pages文件夹是它的演示样例页面。

使用方法

1、 我们可以在这个样例的基础上建立我们的小程序
2、 我们可以将ec-canvas文件夹引入我们的小程序中然后按照ECharts给的配置方法进行小程序的配置，当然简单一些我们把它pages里的一个文件夹直接复制到我们的小程序的pages文件下就可以了。

这里有一个坑就是它需要额外引入一段wxss内容（该内容写在样例的app.wxss中）
其中最主要的是上半部分

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

图表美化

这里是它的一些配置项

https://www.echartsjs.com/zh/option.html#grid.left