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