【uniapp】中 微信小程序实现echarts图表组件的封装

 插件地址:echarts-for-uniapp - DCloud 插件市场

图例:

【uniapp】中 微信小程序实现echarts图表组件的封装_第1张图片 

一、uniapp 安装 

npm i uniapp-echarts --save

 二、文件夹操作

将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下

【uniapp】中 微信小程序实现echarts图表组件的封装_第2张图片

 当前不操作此步骤的话,运行 -> 运行到小程序模拟器 -> 微信开发者工具 时,echarts图表显示不出来

原因:运行到小程序打包过程中,此插件不在小程序文件包内

三、地址引入

根据当前插件放的地址进行引入

import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue"; 

四、组件封装 echartLine.vue




五、页面调用



     希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

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