uniapp 微信小程序使用图表

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

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

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

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

参考案例

<template><view class="content"><view class="chart-box"><qiun-data-charts type="column":opts="opts":chartData="chartData"/></view><view class="text-area"><text class="title">{{title}}</text></view></view>
</template><script>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};}}}
</script><style>.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;}
</style>