dezhou-screen/src/components/charts/LineChart.vue

<template>
	<!-- line chart  -->
	<div class="line-chart__wrapper" style="overflow: hidden;">
		<div class="line-chart__custom-legend flex" v-if="legend.length">
			<!-- <span>产线1 - 产线5</span> -->
			<ul style="" class="flex">
				<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
			</ul>
		</div>
		<div :id="id" style="width: 100%; height: 100%"></div>
		<div
			v-show="legend.length === 0"
			style="
				position: absolute;
				top: 0;
				left: 0;
				background: #eee0;
				width: 100%;
				height: 100%;
				display: grid;
				place-items: center;
				font-size: 24px;
				color: #eee8;
				user-select: none;
			"
		>
			无数据
		</div>
	</div>
</template>

<script>
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";

import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
} from "echarts/components";

import { LabelLayout, UniversalTransition } from "echarts/features";

import { CanvasRenderer } from "echarts/renderers";

echarts.use([
	TitleComponent,
	TooltipComponent,
	GridComponent,
	LineChart,
	LabelLayout,
	UniversalTransition,
	CanvasRenderer,
]);

function adjust(v) {
	return v * 2;
}

export default {
	name: "LineChart",
	props: {
		id: {
			type: String,
			default: "line-chart",
		},
		config: {
			type: Object,
			default: () => ({
				title: { text: "default chart" },
			}),
		},
		legend: {
			type: Array,
			default: () => [],
		},
		series: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			chart: null,
			colors: [
				"#18c7f3",
				"#FFD160",
				"#F31868",
				"#30E89A",
				"#2760FF",
				"#723fff",
				"#ee3fff",
				"#800f77",
				"#f77",
				"#19f",
				"#98f",
			],
			data: [],
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			if (!this.chart)
				this.chart = echarts.init(document.getElementById(this.id));
			this.chart.setOption({
				grid: {
					top: adjust(32),
					left: adjust(32),
					bottom: adjust(24),
					right: adjust(12),
				},
				xAxis: {
					data: Array(24)
						.fill(1)
						.map((_, index) => index + 1),
					axisLine: {
						lineStyle: {
							color: "#5982b2a0",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#ffffff",
						fontSize: adjust(6),
						lineHeight: adjust(1),
						margin: adjust(8),
					},
				},
				yAxis: {
					type: "value",
					name: "单位/m³",
					nameTextStyle: {
						color: "#fff9",
						fontSize: adjust(6),
						align: "right",
					},
					axisLine: {
						show: true,
						lineStyle: {
							// width: 1,
							color: "#5982b2a0",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff9",
						fontSize: adjust(6),
						lineHeight: adjust(1),
					},
					splitLine: {
						lineStyle: {
							color: "#5982b2a0",
						},
					},
					// data: [100, 200, 300, 400, 500],
				},
				color: this.colors,
				// series: Array(5)
				// 	.fill(1)
				// 	.map((_, index) => ({
				// 		name: Math.random(),
				// 		type: "line",
				// 		symbol: "circle",
				// 		symbolSize: adjust(3),
				// 		lineStyle: {
				// 			width: adjust(1),
				// 		},
				// 		areaStyle: {
				// 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				// 				{ offset: 0, color: this.colors[index] + "33" },
				// 				{ offset: 1, color: "transparent" },
				// 			]),
				// 		},
				// 		data: Array(31)
				// 			.fill(1)
				// 			.map(() => {
				// 				let v = Math.floor(Math.random() * 5000);
				// 				while (v < 3000) v = Math.floor(Math.random() * 5000);
				// 				return v;
				// 			}),
				// 	})),
				series: Array(this.legend)
					.fill(1)
					.map((lgd, index) => ({
						name: lgd,
						type: "line",
						symbol: "circle",
						symbolSize: adjust(3),
						lineStyle: {
							width: adjust(1),
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: this.colors[index] + "33" },
								{ offset: 1, color: "transparent" },
							]),
						},
						data: this.series[this.legend],
					})),
			});
		},
		initData() {},
	},
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

::-webkit-scrollbar {
	// display: none;
	height: adjust(2px);
}

::-webkit-scrollbar-thumb {
	height: adjust(2px);
	border-radius: adjust(2px);
	background: #ccc3;
}

// ::-webkit-scrollbar-track {
// height: adjust(1px);
// background: blue;
// }

ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: adjust(20px);
}

ul {
	margin-left: adjust(8px);
	padding-left: adjust(8px);
}

li {
	position: relative;
}

li::before {
	content: "";
	position: absolute;
	top: adjust(2px);
	left: adjust(-6px);
	width: adjust(4px);
	height: adjust(4px);
	border-radius: adjust(1px);
	background: #eee6;
}

li:nth-child(1)::before {
	background: #18c7f3;
}
li:nth-child(2)::before {
	background: #ffd160;
}
li:nth-child(3)::before {
	background: #f31868;
}
li:nth-child(4)::before {
	background: #30e89a;
}
li:nth-child(5)::before {
	background: #2760ff;
}
li:nth-child(6)::before {
	background: #723fff;
}
li:nth-child(7)::before {
	background: #ee3fff;
}
li:nth-child(8)::before {
	background: #800f77;
}
li:nth-child(9)::before {
	background: #f77;
}
li:nth-child(10)::before {
	background: #19f;
}
li:nth-child(11)::before {
	background: #98f;
}

ul {
	flex: 1;
	width: adjust(154px);
	display: flex;
	overflow-x: auto;
	padding-bottom: adjust(2px);
}

li:not(:last-child) {
	margin-right: adjust(8px);
}

.line-chart__wrapper {
	position: relative;
	background: #7771;
	border-radius: adjust(3px);
	backdrop-filter: blur(adjust(2px));
	box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
	height: 100%;
	width: adjust(1px);
}

.line-chart__custom-legend {
	position: absolute;
	top: adjust(-13px);
	right: 0;
	font-size: adjust(7px);
	font-family: Ubuntu, sans-serif;
	// background: #fff2;
	padding: 0;
	max-width: 100%;
	align-items: flex-start;
	justify-content: flex-end;
}
</style>