vue3中，echarts在柱形图上加基准线，自定义tooltip

vue3中，echarts在柱形图上加基准线，自定义tooltip

效果图

代码

index.vue

<template>
	<div class="content">
        <!-- 
		<titleHeader :src="img" :title="title" @is-dialog="handleEvery" class="header-style" />
		<div ref="echartsRef" class="attendance-data"></div>
		<!-- 二级页面 -->
		<everyday-material :is-show="showEveryday" @is-close="handleCloseEveryday"></everyday-material>
	</div>
</template>
<script setup lang="ts" name="absenteeism">
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import img from "@/assets/svg/more.svg";
import titleHeader from "@/components//header/titleHeader.vue";
import everydayMaterial from "./modules/everydayMaterial.vue";
import { ref, onMounted, nextTick } from "vue";
const title = ref("模块题目名称");
const echartsRef = ref<HTMLElement>();

// 二级页面
const showEveryday = ref(false);
const handleCloseEveryday = () => {
	showEveryday.value = false;
};
const handleEvery = () => {
	showEveryday.value = true;
};

const chartsView = () => {
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let option: echarts.EChartsCoreOption = {
		title: {
			text: "达成率",
			left: 20,
			top: 10,
			textStyle: {
				color: "#ccc",
				fontSize: 16
			}
		},
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 1)",
			borderColor: "rgba(0, 0, 0, 1)",
			padding: [16, 24],
			textStyle: {
				color: "#fff"
			},
            // 改造弹框
			formatter: (params: any) => {
				// console.log(params); // 打印数据
				let ele: string = ``;
				ele += `<div style="font-size:16px;margin-bottom:5px;">达成率</div>`;
				for (let i = 0; i < params.length; i++) {
					ele += `<div style="display:flex;align-items: center;height:30px;font-size:12px;"><div style="width: 8px;height: 8px;background: ${params[i].color};border-radius: 50%;margin-right: 10px;"></div>${params[i].name}<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${params[i].data}</div> %</div>`;
				}
				return ele;
			}
		},
		xAxis: {
			type: "category",
			data: ["大型材料", "支护用品", "五小电器", "坑木类", "其他"]
		},
		yAxis: {
			size: "16px",
			type: "value",
			axisLabel: {
				formatter(value: string | number | any) {
					if (value > 0) {
						return value + "%";
					}
					return Math.abs(value) + "%";
				}
			}
		},
		series: [
			{
				type: "bar",
				data: [80, 65, 80, 90, 110],
				// data: [80, 65, 80, 90, 110].map(item => {
				// 	if (item > 80) {
				// 		return {
				// 			value: item,
				// 			itemStyle: {
				// 				color: "#F33"
				// 			}
				// 		};
				// 	}
				// 	return item;
				// }),
				itemStyle: {
					normal: {
						color: "#0075FF",
						barBorderRadius: [10, 10, 0, 0]
					}
				},
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)"
				},
				markLine: {
					symbol: ["none", "none"], //去掉箭头
					lineStyle: {
						normal: {
							type: "dashed",
							color: "#00FFBB" //基准线颜色
						}
					},
					data: [
						{
							name: "基准线名称",
							yAxis: 45 // 基准线数据
						}
					],
					label: {
						show: true,
						// position: "insideStartBottom",
						color: "#00FFBB" // 基准线文字颜色
					}
				}
			}
		]
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	nextTick(() => {
		chartsView();
	});
});
</script>
<style scoped lang="scss">
.content {
	margin-bottom: 8px;
	background: rgb(0 0 0 / 30%);
	border-radius: 10px;
	span {
		font-size: 16px;
		color: #ffffff;
	}

	// .header-style {
	// 	padding-top: 16px;
	// 	padding-bottom: 16px;
	// }
}
.attendance-data {
	height: calc(100% - 54px);
	overflow-y: auto;
}
</style>

src/components//header/titleHeader.vue

<template>
	<div class="header-container">
		<div class="title-img">
			<!-- title文字 -->
			<span>{{ props.title }}</span>
			<!-- title单选 -->
			<slot name="right"></slot>
			<!-- title图片 -->
			<img @click="isDialog" class="header" :src="props.src" v-show="props.src != ''" />
		</div>
		<div class="mark">
			<slot name="mark" />
		</div>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	src: {
		type: String,
		required: false,
		default: ""
	},
	title: {
		type: String,
		required: true,
		default: ""
	}
});

// 展示弹框
const emit = defineEmits(["is-dialog"]);
const isDialog = () => {
	emit("is-dialog", "");
};
</script>

<style lang="scss" scoped>
.header-container {
	padding: 24px 24px 6px;
	.title-img {
		display: flex;
		font-family: "PingFang SC";
		font-size: 22px;
		color: rgb(255 255 255 / 100%);
		align-items: center;
		> span {
			margin-right: auto;
		}
		> img {
			cursor: pointer;
			margin-left: 24px;
			height: 20px;
		}
	}
}
</style>