vue3中，echarts使用（二）——柱状图之滚动条设置dataZoom、基准线-平均值markLine & calc() 函数-用于动态计算长度值

效果-柱状图-基准值-滚动条

代码

index.vue

<template>
	<div class="content">
		<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 dataNum = ref([930, 820, 780, 590, 410, 130, 220, 380, 510, 210, 430, 620, 180, 390, 210]);
const echartsRef = ref<HTMLElement>();
// 数组的平均值
const avr = (arr: any) => {
	let sum = 0,
		avrVal = 0;
	for (let i = 0; i < arr.length; i++) {
		sum += arr[i];
	}
	avrVal = sum / arr.length;
	return avrVal;
};
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: 10
		},
		// 提示框组件  鼠标经过 tip提示
		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;">${params[0].name}</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>耗电量<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${params[i].data}</div></div>`;
				}
				return ele;
			}
		},
		// 上下左右及大小-设置图表占总面积的地方
		grid: {
			x: 70, // 距离左侧
			y: 60, // 距离上方
			x2: 60, // 距离右侧
			y2: 40 // 距离下方
		},
		// grid坐标系的x轴
		xAxis: {
			type: "category",
			data: [
				"1号风机",
				"2号风机",
				"3号风机",
				"4号风机",
				"5号风机",
				"12号风机",
				"21号风机",
				"32号风机",
				"45号风机",
				"52号风机",
				"121号风机",
				"212号风机",
				"322号风机",
				"415号风机",
				"152号风机"
			],
			axisLine: {
				lineStyle: {
					type: "solid",
					color: "rgb(64, 94, 134)",
					width: "1"
				}
			},
			axisTick: {
				show: false // 不显示坐标轴刻度线
			}
		},
		// grid坐标系的y轴
		yAxis: {
			size: "16px",
			type: "value",
			axisLabel: {
				formatter(value: string | number | any) {
					if (value > 0) {
						return value;
					}
					return Math.abs(value);
				}
			},
			splitLine: {
				//分割线配置
				show: true,
				lineStyle: {
					color: "rgb(64, 94, 134)",
					width: 1
				}
			}
		},
		// 区域缩放
		dataZoom: [
			{
				// orient: "vertical", //水平显示
				show: true, //显示滚动条
				height: 1,
				bottom: 5,
				startValue: 0, //起始值
				endValue: 5, //结束值
				showDetail: false
			}
		],
		// 系列列表。每个系列通过 type 决定自己的图表类型
		series: [
			{
				type: "bar",
				// data: [930, 820, 780, 590, 410],
				data: dataNum.value,
				//显示数值
				itemStyle: {
					normal: {
						color: "#0075FF",
						barBorderRadius: [6, 6, 0, 0], // 圆角（左上、右上、右下、左下）
						label: {
							show: true, //开启显示数值
							position: "top", //在上方显示
							textStyle: {
								//数值样式
								color: "#fff", //字体颜色
								fontSize: 12, //字体大小
								distance: 8 // 距离
								// formatter: "{c} 平方米" // 这里是数据展示的时候显示的数据
							}
						}
					}
				},
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)"
				},
				//图表标线
				markLine: {
					symbol: ["none", "none"], //去掉箭头
					lineStyle: {
						normal: {
							type: "dashed",
							color: "#00FFBB" //基准线颜色
						}
					},
					data: [
						{
							yAxis: avr(dataNum.value)
						}
					],
					label: {
						show: true,
						position: "end", // 表现内容展示的位置
						// position: "insideStartBottom",
						color: "#00FFBB", // 基准线文字颜色
						normal: {
							formatter: "平均值" // 这儿设置安全基线
						}
					}
				}
			}
		]
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	nextTick(() => {
		chartsView();
	});
});
</script>
<style scoped lang="scss">
.content {
	margin-bottom: 8px;
	background: rgb(0 0 0 / 30%);
	border-radius: 10px;
	padding-bottom: 10px;
	span {
		font-size: 16px;
		color: #ffffff;
	}
}
.attendance-data {
	height: calc(100% - 26px);
}
</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);
	});
};

calc() 函数用于动态计算长度值

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；