在微信小程序中使用|在微信小程序中使用 echarts 图片-例折线图在微信小程序中使用echarts图片

首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/]。这边只需要在小程序中简单应用一下echarts折线图所以不需要把整体下载下来，这边只需要下载几个简单的东西下来即可！
1. 在小程序中新建一个组件，如下

文章图片

2. 建好文件之后还不着急写代码，看到我上面的图里面不是还有两个文件文件吗？咱先把资源文件给干下来再说
继续到echarts官网中往下翻找到应用篇看到下面的跨平台方案-微信小程序

文章图片

这边会告诉你需要去github上把对应的组件以及依赖复制过来，包括上面的第一张图里所有的文件我们直接复制过来，将它覆盖；

文章图片

然后再界面上引用就好了等到你把所有代码搞定之后你可以点击一下上传好家伙系统直接提示你
[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。
componet/LineChart/echarts.js

文章图片

这个问题好解决回到echarts官网咱们针对小程序端定制下载一个echarts.js文件即可

文章图片

等了几分钟之后呢你会发现下载下来的文件叫做echarts.min.js，把名字中的min去掉直接改成然后拖到文件夹中覆盖一下即可；
完成的代码呢就不放了大概的操作流程已经再上面了就不献丑了
实现效果

文章图片

后面还有几点注意一下
在界面中引用的我补充一下
1.确保你的需要引用的界面json文件里把你要引入的组件对象定义了一次

文章图片

2.然后界面上就是一行简单的使用

这里的ec 一定要跟js中的ec对应不然必报错
3.js文件中呢
浅引用一下组件资源文件
import * as echarts from '../../componet/LineChart/echarts'; -后面引用部分的echarts不能出错
我这里用到的地方呢是先通过异步请求加载数据(放在onload中),然后在折线图组件初始化时再把数据添加进去这边需求问题啦就不细细讨论了
不过初始化总是不能少的

var chart = null; // echart 图标初始化 function initChart(canvas, width, height, option) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = option; chart.setOption(option); return chart; }

在异步请求数据后把对应的列表值传入其中,像这样

文章图片

option中的参数以及其代表的含义请自行百度,比较重要的是 series xAxis yAxis
作用分别是渲染折线 | X轴 | Y轴数据用用就知道啦
当然这不是一步两步的问题阿只是中间个别细节是需要注意一下
然后总结一下在js中的应用流程
首先在onload中初始化折线图表