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>