uniapp 微信小程序使用图表_uniapp 微信小程序 图表

使用的是秋云 ucharts 直接在hbuilder插件市场进行下载导入项目中，多端支持

下载地址秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

导入成功后这里就能看到导入的插件啦

导入项目后就可以直接在页面中通过组件使用了 不需要其余配置 使用简单

参考案例

{{title}}export default {data() {return {title: \'秋云图表示例\',chartData: {},opts: {color: [\"#1890FF\",\"#91CB74\",\"#FAC858\",\"#EE6666\",\"#73C0DE\"],padding: [15, 15, 0, 5],legend: {show: true,position: \"top\",float: \"center\"},xAxis: {disableGrid: true},yAxis: {data: [{min: 0}]},extra: {column: {type: \"group\",width: 30,activeBgColor: \"#000000\",activeBgOpacity: 0.08}}}}},onLoad() {this.getServerData();},methods: {getServerData() {// 模拟数据let res = {categories: [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\", \"周日\"],series: [{name: \"销量\",data: [35, 8, 25, 37, 4, 20, 30]},{name: \"访问量\",data: [70, 40, 65, 100, 44, 68, 90]}]};this.chartData = {categories: res.categories,series: res.series};}}}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.chart-box {width: 100%;height: 500rpx;margin-top: 50rpx;}.text-area {display: flex;justify-content: center;margin-top: 30rpx;}.title {font-size: 36rpx;color: #8f8f94;}