如何用mpvue在小程序中用echarts绘制长尾词趋势折线图？

本文共计1041个文字，预计阅读时间需要5分钟。

首次尝试使用mpvue框架编写小程序，项目直接采用mpvue-shop（一个仿电商精选的小程序开发项目）。项目结构清晰，实现了大部分功能，对于初次使用mpvue的小伙伴来说，是一个不错的选择。

第一次使用mpvue框架来写小程序，项目开发直接搬用mpvue-shop（一个仿网易严选的小程序开发项目）,项目结构清楚,实现了大部分功能，对于初次使用mpvue的小伙伴们来说，是一个很好的选择。

关于组件的选择：

1.echarts-for-weixin,官方echarts的小程序版本。使用参考：echarts-for-weixin介绍，如果你是原生开发小程序版本，这个组件非常适合你，开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。

2、wx-charts,一个个人开发的微信小程序图表插件，体积只有30K,可用于mpvue项目和原生小程序项目,支持大部分图表绘制，缺点是可配置化不强，对于UI没有太大要求的可使用此组件，比较适合于个人项目开发。

3、mpvue-echarts与echarts结合。特别适合mpvue项目,mpvue-echarts是一个基于mpvue开发的echarts组件，echarts的加入可完全使用官方所有的图表绘制功能，让echarts在小程序当中得到全部应用。

mpvue-echarts配合echarts的使用

下载相关包

npm install mpvue-echarts --save

echarts的下载可到官网上下载，由于小程序中对文件大小有限制，建议通过勾选所需要的功能按需下载。