uniapp引入echarts图表(兼容H5、APP、微信小程序)

640 阅读1分钟

1.首先应用市场下载所需插件,地址:ext.dcloud.net.cn/plugin?id=4…

微信截图_20240919141122.png
将插件导入项目之后找到uni_modules文件夹

微信截图_20240919141545.png
2.把上图圈中的文件分别复制到自己项目中对应的components和static文件夹中,如果觉得echarts.min.js文件过大,自行前往官网自定义包进行替换,地址:echarts.apache.org/zh/builder.…
3.自定义进行组件封装
注:H5、APP和小程序引入echarts方式不同,小程序只支持require方式引入,H5使用npm安装

npm install echarts@^5.3.3


H5运行结果:

微信截图_20240919103218.png
APP运行结果:

微信图片_20240919143415.jpg
小程序运行结果:

微信截图_20240919103245.png