vue3中，echarts使用（一）——柱状图和折线图的结合使用

官网：https://echarts.apache.org/zh/index.html

官网示例：https://echarts.apache.org/examples/zh/index.html

官网配置项API：https://echarts.apache.org/zh/option.html#title

效果-柱状图和折线图的结合

代码

index.vue

<template>
	<div class="container" v-if="true">
		<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 { ref, onMounted, nextTick } from "vue";

const echartsRef = ref<HTMLElement>();

const chartsView = () => {
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let option: echarts.EChartsCoreOption = {
		// 标题组件，包含主标题和副标题
		title: {
			text: "月度材料费统计",
			padding: 5,
			textStyle: {
				color: "#fff"
			},
			left: 20,
			top: 0
		},
		// 提示框组件  鼠标经过 tip提示
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 1)",
			borderColor: "rgba(0, 0, 0, 1)",
			padding: [16, 24],
			textStyle: {
				color: "#fff"
			},
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			}
		},
		// 图例组件
		legend: {
			show: true, // 是否显示图例
			// 边框宽度和内边距属性值为数值，不加单位。
			orient: "horizontal", // 图例的朝向    vertical-垂直显示  horizontal-水平显示
			data: ["实际材料花费", "计划材料花费", "达成率"],
			left: 140, // x轴方向取值 left/center/right  具体像素值或百分比
			top: 24, // y轴方向取值 top/center/bottom
			// backgroundColor: "#fac858", // 背景颜色
			// borderColor: "#5470c6", // 边框颜色
			// borderWidth: "200", // 边框宽度
			// padding: "12", // 内边距
			// itemGap: 40, // 控制每一项的间距，也就是图例之间的距离  属性值为数值，不带单位
			// itemHeight: 5 , // 控制图例图形的高度  属性值为数字，不加单位
			textStyle: {
				// 设置图例文字样式
				color: "#ccc",
				fontSize: 13
			}
		},
		// 上下左右及大小-设置图表占总面积的地方
		grid: {
			left: "12%", //左侧 y轴内容距离边框的距离（类似padding-left）
			top: "27%", // 与容器顶部的距离
			right: "12%",
			bottom: "10%" // 与容器底部的距离
		},
		// grid坐标系的x轴
		xAxis: [
			{
				type: "category",
				data: ["安全措施", "大型生产", "国补资金", "其他生产", "一般生产"],
				axisPointer: {
					type: "shadow"
				},
				axisTick: {
					show: false // 不显示坐标轴刻度线
				}
				// show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
				// axisTick: {
				// 	show: false // 不显示坐标轴刻度线
				// },
				// axisLine: {
				// 	show: false // 不显示坐标轴线
				// },
				// axisLabel: {
				// 	show: false // 不显示坐标轴上的文字
				// },
				// splitLine: {
				// 	show: false // 不显示网格线
				// }
			}
		],
		// grid坐标系的y轴
		yAxis: [
			{
				type: "value",
				name: "材料费（万元）",
				min: 0,
				max: 100,
				interval: 20,
				splitLine: {
					//分割线配置
					show: true,
					lineStyle: {
						color: "rgb(64, 94, 134)",
						width: 1
					}
				},
				axisLabel: {
					formatter: "{value}"
				}
			},
			{
				type: "value",
				name: "达成率",
				min: 0,
				max: 100,
				interval: 40,
				splitLine: {
					//分割线配置
					show: true,
					lineStyle: {
						color: "rgb(64, 94, 134)",
						width: 1
					}
				},
				axisLabel: {
					formatter: "{value} %"
				}
			}
		],
		// 系列列表。每个系列通过 type 决定自己的图表类型
		series: [
			{
				name: "实际材料花费",
				type: "bar",
				// barWidth: 8, // 柱状图粗细
				// barGap: 8, // 柱图之间的间距
				itemStyle: {
					normal: {
						color: "#0075FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value: any) {
						return value;
					}
				},
				data: [48, 65, 24, 39, 67]
			},
			{
				name: "计划材料花费",
				type: "bar",
				// barWidth: 8, // 柱状图粗细
				// barGap: 8, // 柱图之间的间距
				itemStyle: {
					normal: {
						color: "#00F0FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value: any) {
						return value;
					}
				},
				data: [32, 19, 72, 63, 51]
			},
			{
				name: "达成率",
				type: "line",
				yAxisIndex: 1,
				smooth: true,
				itemStyle: {
					normal: {
						color: "#FF7D7D",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value: string) {
						return value + " %";
					}
				},
				data: [60, 75, 32, 53, 26]
			}
		]
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	nextTick(() => {
		chartsView();
	});
});
</script>
<style scoped lang="scss">
.container {
	position: relative;
	flex: 3;
	margin-bottom: 30px;
	background: rgb(0 0 0 / 30%);
	border-radius: 10px;
	span {
		font-size: 16px;
		color: #ffffff;
	}
}

.attendance-data {
	// height: 100%;
	height: calc(94% - 30px);
	margin-top: 20px;
	// overflow-y: auto;
}
</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);
	});
};