使用堆叠柱形图,上方显示具体数值,最终效果如下
<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>