小程序mpvue-echarts的使用

项目需求，要在小程序中加入一个折线图来展示两个数据的变化。因为我之前一直是写pc端的，而且用的highcharts，所以现在记录一下用echars的问题。 我觉得hightcharts相对于echarts来说，他有每个部分代表什么的一张图，如下：

对于刚写图表的新手来说还是很方便的，echarts我没找到在哪儿（有找到的话可以告诉我一下，谢谢） 1、问题1：双Y轴问题 要在series中第二个轴写一个yAxisIndex: 1，因为yAxisIndex默认为0，也就是第一个轴，你定义它为1的话数据就会根据第二个轴来画线。

2、问题2：y轴分割线

如果你不想要中间那些灰色的分割线，要在yAxis中定义 splitLine: {show: false },就会变成下面这样，根据自己的需要来取舍

3、问题3：x轴左右有边距 如图：

如果你的ui图没有这个红笔画的空白，要在xAxis中写boundaryGap: false。 如果你的ui图没有蓝笔画的坐标竖线，还需要在xAxis中写axisTick: {show: false}, 最后变为

4、问题4：legend样式变化

5、其他数据不显示，只显示最后一个数据 在series中分别设置类似这样的，可以参考官方文档

6、还需解决的问题小程序打包过大（19.6.26）(19.7.2) 还可以压缩你的js,css文件还有图片，不过要注意小程序暂不支持svg，canvas也有个坑是requestAnimationFrame没法用，动画效果不太好。 解决了一大步，还有一小步关于分包，因为目前还没涉及到，等用到再来分享吧 文章链接中解决打包的部分方法 juejin.cn/post/684490…

7、echarts中tooltip的问题，之前我一直以为是它的问题，结果！！！！找了一下午是我自己单词拼错的原因，实属扎心了，现在贴上代码记录一下别让正在做的人踩坑，如果他git上下载的内容太大，你可以自己定制，只要你需要的功能就行，要相信你永远不知道ui和产品会让你做什么样的小程序 canvas动画，所以能节省一点就节省一点，代码如下

效果：

跟官网的列子一样，有一个竖线