update line chart

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "echarts": "^5.4.2",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/components/charts/LineChart.vue

@@ -3,7 +3,7 @@
 	<div class="line-chart__wrapper">
 		<div class="line-chart__custom-legend flex">
 			<span>产线1 - 产线5</span>
-			<ul style="margin-left: 8px; padding-left: 8px;" class="flex">
+			<ul style="margin-left: 8px; padding-left: 8px" class="flex">
 				<li>产线1</li>
 				<li>产线2</li>
 				<li>产线3</li>
@@ -11,11 +11,34 @@
 				<li>产线5</li>
 			</ul>
 		</div>
-		<div id="line-chart"></div>
+		<div id="line-chart" style="width: 100%; height: 100%"></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,
+]);
+
 export default {
 	name: "LineChart",
 	props: {
@@ -28,6 +51,7 @@ export default {
 	},
 	data() {
 		return {
+			chart: null,
 			colors: [
 				"#18c7f3",
 				"#FFD160",
@@ -41,11 +65,132 @@ export default {
 				"#19f",
 				"#98f",
 			],
+			data: [],
 		};
 	},
-	created() {},
-	mounted() {},
-	methods: {},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			if (!this.chart)
+				this.chart = echarts.init(document.getElementById("line-chart"));
+			this.chart.setOption({
+				// title: {
+				// 	text: "ECharts 入门示例",
+				// },
+				grid: {
+					top: 32,
+					left: 32,
+					bottom: 24,
+					right: 12,
+				},
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						lineStyle: {
+							color: "#eee3",
+						},
+					},
+				},
+				xAxis: {
+					data: Array(31)
+						.fill(1)
+						.map((_, index) => index + 1),
+					axisLine: {
+						lineStyle: {
+							// width: 1,
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: "#ffffff",
+						fontSize: 6,
+						lineHeight: 1,
+					},
+				},
+				yAxis: {
+					type: "value",
+					name: "单位/m³",
+					nameTextStyle: {
+						color: "#fff9",
+						fontSize: 6,
+						// lineHeight: 6,
+						// height: 6,
+						// padding: 0,
+						align: "right",
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							// width: 1,
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: "#fff9",
+						fontSize: 6,
+						lineHeight: 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: 3,
+						lineStyle: {
+							width: "1",
+						},
+						areaStyle: {
+							// color: {
+							// 	type: "linear",
+							// 	x: 0,
+							// 	y: 0,
+							// 	x2: 0,
+							// 	y2: 1,
+							// 	colorStops: [
+							// 		{
+							// 			offset: 0,
+							// 			color: this.colors[index]+'66',
+							// 		},
+							// 		// { offset: 0.3, color: this.colors[index]+'aa' },
+							// 		// { offset: 0.35, color: this.colors[index]+'77' },
+							// 		// { offset: 1, color: this.colors[index]+'00' },
+							// 		{ offset: .5, color: 'transparent' },
+							// 	],
+							// },
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: this.colors[index] + "44" },
+								{ 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;
+							}),
+					})),
+			});
+		},
+		initData() {},
+	},
 };
 </script>
 
@@ -81,16 +226,47 @@ li {
 }
 
 li::before {
-	content: '';
+	content: "";
 	position: absolute;
-	top: 1px;
-	left: -7px;
-	width: 6px;
-	height: 6px;
+	top: 2px;
+	left: -6px;
+	width: 4px;
+	height: 4px;
 	border-radius: 1px;
 	background: #eee6;
 }
 
+li:nth-child(1)::before {
+	background: #18c7f3;
+}
+li:nth-child(2)::before {
+	background: #f31868;
+}
+li:nth-child(3)::before {
+	background: #30e89a;
+}
+li:nth-child(4)::before {
+	background: #2760ff;
+}
+li:nth-child(5)::before {
+	background: #ee3fff;
+}
+li:nth-child(6)::before {
+	background: #2f0fff;
+}
+li:nth-child(7)::before {
+	background: #800f77;
+}
+li:nth-child(8)::before {
+	background: #f77;
+}
+li:nth-child(9)::before {
+	background: #19f;
+}
+li:nth-child(10)::before {
+	background: #98f;
+}
+
 ul {
 	flex: 1;
 	width: 144px;