uniapp 微信小程序使用图表

发呆小天才yy2025-05-10 3:05

使用的是秋云 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>