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
相关推荐
Mintopia31 分钟前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九1 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia2 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1892 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴2 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee2 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin3 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw54 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler4 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !4 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具