vue3+echarts饼图记录

最新推荐文章于 2023-11-10 10:14:45 发布

miludeer_23

最新推荐文章于 2023-11-10 10:14:45 发布

阅读量137

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_47483275/article/details/133174327

版权

<script setup>
	import reportApi from '@/api/operationReport/index'
	import * as echarts from 'echarts'
	import { onMounted } from 'vue'

	var Echarts
	onMounted(() => {
		Echarts = echarts.init(document.getElementById('CustomizedPie'))
		Customer.Get()
	})

	onMounted(() => {})
	let props = defineProps({
		orgId: {
			type: String,
			default: () => ''
		},
		bizDate: {
			type: String,
			default: () => ''
		}
	})

	// 顾客分析
	const Customer = reactive({
		list: [],
		tips: '',
		Get: () => {
			reportApi
				.getGuestAnalysisInfo({
					orgId: props.orgId,
					bizDate: props.bizDate
				})
				.then((res) => {
					Customer.tips = res.analysisTips
					Customer.list = res.guestAnalyses || []
					let dataEcharts = []
					if (Customer.list.length) {
						// 绘制图表

						dataEcharts = Customer.list.map((e) => {
							return {
								name: e.guestLevelDesc,
								value: e.employeeNum
							}
						})
					}

					const option = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							top: '5%',
							left: 'center'
						},
						series: [
							{
								name: '顾客分析',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 2
								},
								label: {
									show: false,
									position: 'center'
								},
								emphasis: {
									label: {
										show: true,
										fontSize: 40,
										fontWeight: 'bold'
									}
								},
								labelLine: {
									show: false
								},
								data: dataEcharts || []
							}
						]
					}

					Echarts.setOption(option, true)
				})
		}
	})

	// 自适应大小
	window.onresize = () => {
		Echarts.resize()
	}
</script>
<template>
<div id="CustomizedPie"></div>
</template>
<style scoped lang="less">
	#CustomizedPie {
		width: 250px;
		height: 420px;
	}
</style>