vue3 使用echarts（堆叠柱形图）

 使用堆叠柱形图，上方显示具体数值，最终效果如下

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
//  按需引入 echarts
import * as echarts from 'echarts'

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {
	init()
})

function init() {
	var dataBeast = [10, 20, 30, 20]
	var dataBeauty = [0, 50, 26, 30]
	var xAxisData = ['第一季度', '第二季度', '第三季度', '第四季度']

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(main.value)
	// 指定图表的配置项和数据
	var option = {
		color: ['#7785FF', '#FAC032', '#11565d'],
		tooltip: {
			show: true,
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#ddd',
				},
			},
		},
		grid: {
			left: 5,
			right: 1,
			top: 42,
			bottom: 0,
			containLabel: true,
		},
		xAxis: {
			show: true,
			axisLabel: {
				margin: 12,
				textStyle: {
					color: '#606266',
					align: 'center',
					fontSize: 14,
					fontFamily: ' Microsoft YaHei UI-Regular, Microsoft YaHei UI',
					fontWeight: 400,
				},
			},
			axisLine: {
				//y轴线的颜色以及宽度
				show: true,
				lineStyle: {
					color: '#C0C4CC',
				},
			},
			// x轴突出的
			axisTick: {
				show: false,
			},
			data: xAxisData,
		},
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					textStyle: {
						fontSize: 12,
						color: '#909399',
						fontFamily: 'MiSans-Regular, MiSans',
						fontWeight: 400,
					},
				},
				axisLine: {
					//y轴线的颜色以及宽度
					show: true,
					lineStyle: {
						color: '#C0C4CC',
					},
				},
			},
		],

		series: [
			{
				type: 'bar',
				name: '有隐患',
				stack: '人数',
				data: dataBeast,
				barWidth: '32%',
				margin: 32,
				label: {
					emphasis: {
						textStyle: {
							color: '#fff',
						},
					},
				},
				itemStyle: {
					normal: {
						borderColor: '#fff',
						borderWidth: 1,
					},
				},
			},
			{
				type: 'bar',
				name: '无隐患',
				stack: '人数',
				data: dataBeauty,
				itemStyle: {
					normal: {
						borderColor: '#fff',
						borderWidth: 1,
					},
				},
				label: {
					show: true,
					position: 'top',
					offset: [0, -4],
					textStyle: {
						fontSize: 16,
						fontFamily: 'DM Sans-Bold, DM Sans',
						fontWeight: 'bold',
						color: '#131414',
					},
					formatter: function (val) {
						let data = dataBeast[val.dataIndex]
						return val.data + '/' + data
					},
				},
			},
		],
	}
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option)
	window.addEventListener('resize', () => {
		myChart.resize()
	})
}
</script>

<template>
	<div ref="main" class="main" style=""></div>
</template>

<style scoped>
.main {
	width: 100%;
	height: 100%;
}
</style>