uniapp小程序使用echarts

1、引入插件

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

2、页面使用简单示例:

javascript 复制代码
<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>
  1. 完整教程可以直接看lime-echart: 百度图表 echarts,uniapp、taro 使用 echarts 图表,全面兼容各平台小程序、H5、APP、Nvue
相关推荐
liangshanbo1215几秒前
Speculation Rules API
前端·javascript·html
石国旺1 分钟前
前端javascript在线生成excel,word模板-通用场景(免费)
前端·javascript·excel
Jenna的海糖22 分钟前
Vue 项目首屏加载速度优化
前端·javascript·vue.js
前端梭哈攻城狮27 分钟前
js计算精度溢出,自定义加减乘除类
前端·javascript·算法
北辰alk30 分钟前
React JSX 内联条件渲染完全指南:四招让你的UI动态又灵活
前端
前端小巷子33 分钟前
最长递增子序列:从经典算法到 Vue3 运行时核心优化
前端·vue.js·面试
zayyo33 分钟前
深入解读 SourceMap:如何实现代码反解与调试
前端
龙在天35 分钟前
以为 Hooks 是银弹,结果是新坑
前端
wayhome在哪1 小时前
前端高频考题(css)
前端·css·面试
wayhome在哪1 小时前
前端高频考题(html)
前端·面试·html