vue3中，echarts使用（三）——柱状图之legend图例组件配置 & formatter自定义显示内容 & 封装title组件

效果-柱状图-legend

代码

index.vue

<template>
	<div class="content">
		<titleHeader :title="title" class="header-style" />
		<div class="change">
			<el-select v-model="value2" multiple collapse-tags placeholder="请添加对比月份" style="width: 172px">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>
		<div ref="echartsRef" class="attendance-data"></div>
	</div>
</template>
<script setup lang="ts" name="absenteeism">
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import titleHeader from "@/components/header/titleHeader.vue";
import { ref, onMounted, nextTick } from "vue";

const title = ref("月度物资累计消耗分析");
const value2 = ref([]);
const options = [
	{
		value: "1",
		label: "2022-09"
	},
	{
		value: "2",
		label: "2022-08"
	},
	{
		value: "3",
		label: "2022-07"
	},
	{
		value: "4",
		label: "2022-06"
	},
	{
		value: "5",
		label: "2022-05"
	}
];
const echartsRef = ref<HTMLElement>();

const chartsView = () => {
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let option: echarts.EChartsCoreOption = {
		// 提示框组件
		tooltip: {
			valueFormatter: (value: string) => {
				return `${value}%`;
			},
			// 当trigger为'item'时只会显示该点的数据，为'axis'时显示该列下所有坐标轴所对应的数据。 默认为 'item'
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 1)",
			borderColor: "rgba(0, 0, 0, 1)",
			padding: [16, 24],
			textStyle: {
				color: "#fff"
			},
			// tip显示的具体内容
			formatter: (params: any) => {
				// console.log(params); // 打印数据
				let ele: string = ``;
				ele += `<div style="font-size:16px;margin-bottom:5px;">${params[0].axisValue}</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].seriesName
					}<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${
						params[i].data[i + 1]
					}</div>%</div>`;
				}
				return ele;
			}
		},
		// 图例组件
		legend: {
			data: ["2022-10", "2022-09", "2022-08", "2022-07"],
			left: 30,
			top: 5,
			textStyle: {
				color: "#ccc",
				fontSize: 13
			},
			itemGap: 26,
			formatter: (params: any) => {
				console.log("legend", params);
				let ele: string = params;
				// let ele: string = ``;
				// let ele: string = `${params}`;
				return ele;
			}
		},
		// // 条形颜色   调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
		color: ["#0075FF", "#ffbb00", "#ff5d5d", "#00f0ff"],
		// 绑定数据源
		dataset: {
			// 用 dimensions 指定了维度的顺序。直角坐标系中，
			// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
			// 如果不指定 dimensions，也可以通过指定 series.encode
			// 完成映射，参见后文。
			source: [
				["product", "2022-10", "2022-09", "2022-08", "2022-07"],
				["大型材料", 43.3, 85.8, 93.7, 57.2],
				["支护用品", 83.1, 73.4, 55.1, 53.7],
				["五小电器", 86.4, 65.2, 82.5, 48.6],
				["坑木类", 86.4, 65.2, 82.5, 43.9],
				["其他", 72.4, 53.9, 39.1, 45.2]
			]
		},
		// grid坐标系的x轴
		xAxis: {
			type: "category",
			axisTick: {
				show: false
			}
		},
		// grid坐标系的y轴
		yAxis: {
			size: "16px",
			type: "value",
			splitLine: {
				//分割线配置
				show: true,
				lineStyle: {
					color: "rgb(64, 94, 134)",
					width: 1
				}
			},
			axisLabel: {
				formatter(value: string | number | any) {
					if (value > 0) {
						return value + "%";
					}
					return Math.abs(value) + "%";
				}
			}
		},
		series: [
			{
				type: "bar",
				itemStyle: {
					normal: {
						barBorderRadius: [10, 10, 0, 0]
					}
				}
			},
			{
				type: "bar",
				itemStyle: {
					normal: {
						barBorderRadius: [10, 10, 0, 0]
					}
				}
			},
			{
				type: "bar",
				itemStyle: {
					normal: {
						barBorderRadius: [10, 10, 0, 0]
					}
				}
			},
			{
				type: "bar",
				itemStyle: {
					normal: {
						barBorderRadius: [10, 10, 0, 0]
					}
				}
			}
		]
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	nextTick(() => {
		chartsView();
	});
});
</script>
<style scoped lang="scss">
.content {
	position: relative;
	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% - 8px);
	overflow-y: auto;
}
.change {
	position: absolute;
	top: 24px;
	right: 26px;
}
:deep(.el-select .el-select__tags .el-tag--info) {
	background: rgb(0 0 0 / 30%);
}
</style>

src\hooks\useEcharts.ts

import { onUnmounted } from "vue";
import * as echarts from "echarts";

/**
 * @description 使用Echarts(只是为了添加图表响应式)
 * @param {Element} myChart Echarts实例(必传)
 * @param {Object} options 绘制Echarts的参数(必传)
 * @return void
 * */
export const useEcharts = (myChart: echarts.ECharts, options: echarts.EChartsCoreOption) => {
	if (options && typeof options === "object") {
		myChart.setOption(options);
	}
	const echartsResize = () => {
		myChart && myChart.resize();
	};

	window.addEventListener("resize", echartsResize, false);

	onUnmounted(() => {
		window.removeEventListener("resize", echartsResize);
	});
};

title组件

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>