UniApp微信小程序使用echarts图标教程(附源码)

在项目中直接使用echarts时,H5端是OK的,但微信小程序会报错,所以来看一下如何在微信小程序中使用echarts

1.打开链接,下载第一个

下载链接

UniApp微信小程序使用echarts图标教程(附源码)_第1张图片

注意看 此时这个版本是5.3.3

UniApp微信小程序使用echarts图标教程(附源码)_第2张图片

2.官网在线定制,下载下来

注意与版本

UniApp微信小程序使用echarts图标教程(附源码)_第3张图片

等待下载

UniApp微信小程序使用echarts图标教程(附源码)_第4张图片

下载完成

UniApp微信小程序使用echarts图标教程(附源码)_第5张图片

这是下载好的文件

UniApp微信小程序使用echarts图标教程(附源码)_第6张图片

3.将echarts.min.js文件放到这个目录下面

UniApp微信小程序使用echarts图标教程(附源码)_第7张图片

4.下载这个插件导入在HBuilderX中的项目

echarts - DCloud 插件市场

UniApp微信小程序使用echarts图标教程(附源码)_第8张图片

5.引入

UniApp微信小程序使用echarts图标教程(附源码)_第9张图片

6.运行效果

主要是看微信小程序的运行结果

UniApp微信小程序使用echarts图标教程(附源码)_第10张图片

7.完整代码


8.柱状图

UniApp微信小程序使用echarts图标教程(附源码)_第11张图片



9.饼图

UniApp微信小程序使用echarts图标教程(附源码)_第12张图片



其他的使用方法可以参考插件市场

10.插件更新

鼠标右键,选择从插件市场更新即可

UniApp微信小程序使用echarts图标教程(附源码)_第13张图片

你可能感兴趣的:(uni-app/小程序,uni-app,小程序,前端,微信小程序)