uniapp小程序使用echarts

王哈哈的学习笔记

于 2025-04-23 17:31:43 发布

阅读量266

点赞数 1

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/weixin_58031521/article/details/147459248

版权

1、引入插件

在Dcloud插件市场下载echarts插件：插件地址

2、页面使用简单示例：

<template>
	<view class="pie-view flex-center">
		<view style="width: 100%; height: 600rpx">
			<l-echart ref="chartRef" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
export default {
	components: {
	},
	data() {
		return {
			option: {
				color: ['#93beff', '#507afc', '#fac858'],
				tooltip: {
					trigger: 'item',
					formatter: '{a} {b}: {c} ({d}%)'
				},
				legend: {
					left: 'center',
					top: '0%',
				},
				series: [
					{
						type: 'pie',
						radius: '40%',
						avoidLabelOverlap: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									formatter: function (params) {
										const { name, value, percent } = params;
										return `${name}：\n\n${value} (${percent}%)`;
									}
								},
							}
						},
						labelLine: {
							show: true,
							length: 10,
							length2: 10
						},
						data: [
							{ value: 1, name: '已验收' },
							{ value: 2, name: '已整改' },
							{ value: 3, name: '未整改' },
							{ value: 4, name: '延期' },
							{ value: 5, name: '超期' }
						]
					}
				]
			},
		}
	},
	onLoad() {
		this.init();
	},
	mounted() {
	},
	methods: {
		async init() {
			// chart 图表实例不能存在data里
			const chart = await this.$refs.chartRef.init(echarts);
			chart.setOption(this.option);
		},
	}
}
</script>

<style scoped lang="scss">
.flex-center {
	display: flex;
	align-items: center;
}
.pie-view {
	padding-top: 30rpx;
	width: 100%;
	height: 640rpx;
	border-radius: 16rpx;
	background: #FFFFFF;
	box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.3);
	justify-content: center;
}
</style>

3. 完整教程可以直接看lime-echart: 百度图表 echarts，uniapp、taro 使用 echarts 图表，全面兼容各平台小程序、H5、APP、Nvue