zhgdyun/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue

<template>
	<Card title="学习强国">
		<div class="box">
			<div id="learnStrongCountry" ref="learnStrongCountry" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
import firstIcon from "@/assets/images/loadometerManage/first.png";
import secondIcon from "@/assets/images/loadometerManage/second.png";
import thirdIcon from "@/assets/images/loadometerManage/third.png";
import fourthIcon from "@/assets/images/loadometerManage/fourth.png";

const store = GlobalStore();
const airType = ref(1);
// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
const airTypeEchart = ref(["李涵", "陈光铭", "李强", "马小星"]);
const airTypeData = ref([18249, 17688, 16119, 13161]);
const option = reactive({
	grid: {
		left: "0%",
		right: "0%",
		bottom: "0%",
		top: "5%",
		containLabel: true
	},
	// backgroundColor: '#101129',
	xAxis: {
		show: false,
		type: "value",
		max: 20000
	},
	yAxis: [
		{
			type: "category",
			inverse: true,
			axisLabel: {
				show: true,
				inside: true,
				verticalAlign: "bottom",
				padding: [0, 0, 8, 30],
				lineHeight: "20",
				textStyle: {
					color: "#FFFFFF",
					fontSize: "14"
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: airTypeEchart.value
		},
		{
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			axisLabel: {
				inside: true,
				padding: [0, 0, 26, 40],
				lineHeight: "20",
				textStyle: {
					color: "#FFFFFF",
					fontSize: "12"
				},
				formatter: function (val: any, index: any) {
					if (index < 3) {
						return `{color1|${val}}`;
					} else {
						return `{color2|${val}}`;
					}
				},
				rich: {
					color1: {
						color: "#EEA959"
					},
					color2: {
						color: "#A0B8E5"
					}
				}
			},
			data: airTypeData.value
		},
		{
			type: "category",
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			show: true,
			data: airTypeData.value
		}
	],
	series: [
		{
			type: "bar",
			showBackground: true,
			backgroundStyle: {
				color: "#14346c",
				borderRadius: 30
			},
			barGap: "-100%",
			label: {
				normal: {
					color: "#FFFFFF",
					show: true,
					position: [0, "-24px"],
					textStyle: {
						fontSize: 16
					},
					formatter: function (a) {
						let num = "";
						let str = "";
						if (a.dataIndex + 1 < 10) {
							// num = "No." + (a.dataIndex + 1);
						} else {
							// num = a.dataIndex + 1;
						}
						if (a.dataIndex === 0) {
							str = `{color1|${num}}`;
						} else if (a.dataIndex === 1) {
							str = `{color2|${num}}`;
						} else if (a.dataIndex === 2) {
							str = `{color3|${num}}`;
						} else {
							str = `{color4|${a.dataIndex + 1}}`;
						}
						return str;
					},
					rich: {
						color1: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: firstIcon
							}
						},
						color2: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: secondIcon
							}
						},
						color3: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: thirdIcon
							}
						},
						color4: {
							align: "center",
							color: "#FFFFFF",
							backgroundColor: {
								image: fourthIcon
							}
						}
					}
				}
			},
			itemStyle: {
				normal: {
					barBorderRadius: 10,
					color: (val: any) => {
						if (val.dataIndex < 3) {
							let topColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "rgba(238, 169, 89, 0)"
								},
								{
									offset: 1,
									color: "rgba(238, 169, 89, 1)"
								}
							]);
							return topColor;
						} else {
							let nowColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "#194077"
								},
								{
									offset: 1,
									color: "#4CC4F8"
								}
							]);
							return nowColor;
						}
					}
				}
			},
			barWidth: 2,
			data: airTypeData.value
		},
		{
			name: "内圆",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: airTypeData.value, //小白点，数据静态
			label: false,
			symbolSize: 2,
			itemStyle: {
				normal: {
					borderColor: "#fff",
					borderWidth: 3,
					color: "#fff",
					opacity: 1
				}
			},
			z: 3
		},
		{
			name: "内圆框",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
			label: false,
			symbolSize: 12,
			itemStyle: {
				normal: {
					borderColor: "#FFFFFF",
					borderWidth: 1,
					color: "#14346c"
				}
			},
			z: 2
		}
	]
});
function drawChart() {
	let chartDom = document.getElementById("learnStrongCountry");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let learnStrongCountry = echarts.init(document.getElementById("learnStrongCountry"));
	learnStrongCountry.setOption(option);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}
onMounted(async () => {
	drawChart();
});
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	padding-top: 2%;
	padding-left: 3%;
	position: relative;
}
</style>