zhgdlarge/src/views/sevenLargeScreen/qualityControl/qualityManagement/leftTop.vue

<template>
	<Card title="责任单位分析">
		<div class="leftBox">
			<div id="echartsLeftBottom" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted } from "vue";
import * as echarts from "echarts";
function draw() {
	let chartDom = document.getElementById("echartsLeftBottom");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("echartsLeftBottom"));
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
			},
			borderRadius: 5,
			borderWidth: 5,
			formatter: function (params) {
				let dot =
					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
				return params[0].name + "<br>" + params[0].value;
			}
		},
		grid: {
			left: "4%",
			right: "4%",
			bottom: "5%",
			top: "15%",
			containLabel: true
		},
		xAxis: {
			show: true,
	data: ['责任单位','责任单位','责任单位','责任单位','责任单位','责任单位','责任单位'],
  			triggerEvent: true,
			axisTick: {
				show: false,
				lineStyle: {
					color: "red"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				rotate: 0,
				interval: 0,
				textStyle: {
					padding: [0, 0, 0, 0],
					fontSize: 12,
					color: "#fff"
				}
			}
		},
		yAxis: {
			name: "隐患数",
			triggerEvent: true,
			nameTextStyle: {
				color: "#fff",
				fontSize: 10,
				padding: [0, 0, 10, 0]
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			}
		},
		// color: ["#e54035"],
		series: [
			{
				name: "数量",
				// barMinHeight: 10,
				barWidth: 80,
				type: "pictorialBar",
				barCategoryGap: "5%",
				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						//barBorderRadius: 5,
						//渐变色
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 1,
								color: "rgba(130, 251, 234, 0)"
							},
							{
								offset: 0,
								color: "rgba(130, 251, 234, 1)"
							}
						])
					}
				},
				label: {
					normal: {
						show: true,
						position: "top",
						textStyle: {
							color: "#fff",
							fontSize: 12
						}
					}
				},
				data: [100,200,300,100,20,60,120],
				z: 10
			},
			{
				name: "hill",
				type: "bar",
				barWidth: "60%",
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						color: "rgba(11,47,68,.8)"
					}
				},
				// data: 200,
				z: 9
			}
		]
	};
	echartsTest.setOption(option);
}
onMounted(() => {
	draw();
});
</script>

<style scoped lang="scss">
.leftBox {
	width: 100%;
	height: 100%;
}
</style>