From db73f3132de1b09e5cb3cd5c9625a875ef81bb5f Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 15 Apr 2024 10:03:35 +0800 Subject: [PATCH 1/6] 1 --- src/view/yl.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/view/yl.vue b/src/view/yl.vue index 0bed06b..dfa7771 100644 --- a/src/view/yl.vue +++ b/src/view/yl.vue @@ -17,16 +17,16 @@
-
+
- +
- +
@@ -105,6 +105,12 @@ import ePie2 from "./echarts/pie2.vue"; import eGraph from "./echarts/graph.vue"; import ePie3d from "./echarts/pie3d.vue"; import waterBall from "./echarts/waterBall.vue"; +import { ref, onMounted, onBeforeMount } from "vue"; +const leftchoose =ref({ + first:'1', + second:'2', + third:'3' +}) \ No newline at end of file diff --git a/src/view/echarts/pie.vue b/src/view/echarts/pie.vue index b9fc198..261364c 100644 --- a/src/view/echarts/pie.vue +++ b/src/view/echarts/pie.vue @@ -14,34 +14,68 @@ let option = { trigger: "axis", }, legend: { - data: ["职工养老保险发放人次", "城乡养老保险发放人次"], + top: "8%", + right: "5%", + textStyle: { + fontSize: 12, + color: "#ccc", + }, }, grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + left: "1%", + right: "4%", + bottom: "3%", + containLabel: true, }, calculable: true, xAxis: [ { type: "category", + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#ccc", + }, + }, data: ["2019", "2020", "2021", "2022", "2023"], }, ], yAxis: [ { type: "value", + splitLine: { + show: true, + lineStyle: { + color: "rgba(226, 226, 226, 0.3)", + width: 1, + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#ccc", + }, + }, }, ], series: [ { name: "职工养老保险发放人次", type: "bar", - data: [ - 2.0, 4.9, 7.0, 23.2, 25.6 - ], + data: [2.0, 4.9, 7.0, 23.2, 25.6], showBackground: true, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(142, 187, 255, 1)", + }, + { + offset: 1, + color: "rgba(142, 187, 255, 0.20)", + }, + ]), + }, backgroundStyle: { color: "rgba(180, 180, 180, 0.2)", }, @@ -49,10 +83,20 @@ let option = { { name: "城乡养老保险发放人次", type: "bar", - data: [ - 2.6, 5.9, 9.0, 26.4, 28.7 - ], + data: [2.6, 5.9, 9.0, 26.4, 28.7], showBackground: true, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(23, 237, 255, 1)", + }, + { + offset: 1, + color: "rgba(23, 237, 255, 0.20)", + }, + ]), + }, backgroundStyle: { color: "rgba(180, 180, 180, 0.2)", }, diff --git a/src/view/echarts/pie2.vue b/src/view/echarts/pie2.vue index 3e190e7..061332d 100644 --- a/src/view/echarts/pie2.vue +++ b/src/view/echarts/pie2.vue @@ -1,160 +1,126 @@ - + + \ No newline at end of file diff --git a/src/view/echarts/eP3.vue b/src/view/echarts/eP3.vue index 061332d..190fe2a 100644 --- a/src/view/echarts/eP3.vue +++ b/src/view/echarts/eP3.vue @@ -1,5 +1,5 @@