diff --git a/src/view/echarts_work/eP1.vue b/src/view/echarts_work/eP1.vue
index a0f0fee..c5b78fe 100644
--- a/src/view/echarts_work/eP1.vue
+++ b/src/view/echarts_work/eP1.vue
@@ -10,44 +10,15 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [120, 200, 50, 80, 70];
-const lineData = [150, 230, 24, 218, 135];
+const lineData = [1500, 2300, 204, 2018, 1305];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-// 背景颜色
-const color = [
- {
- type: "linear",
- x: 0,
- x2: 0,
- y: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "rgba(142, 187, 255, 1)",
- },
- {
- offset: 0.5,
- color: "rgba(142, 187, 255, 0.5)",
- },
- {
- offset: 1,
- color: "rgba(142, 187, 255, 0.20)",
- },
- ],
- },
-];
+
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
},
legend: {
data: ["救助金额", "救助人数"],
@@ -65,7 +36,7 @@ const option = {
color: "#ffffff",
},
calculable: true,
- color,
+
xAxis: [
{
type: "category",
@@ -92,7 +63,7 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
- max: max,
+
splitLine: {
//分割线配置
show: false,
@@ -121,7 +92,7 @@ const option = {
type: "value",
scale: true,
min: 0,
- max: max,
+
name: "救助金额/万",
splitLine: {
show: false,
@@ -146,9 +117,35 @@ const option = {
},
},
},
+ {
+ type: "value",
+ min: 0,
+ max: 100,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: "solid",
+ color: "rgb(221, 242, 255,0.1)",
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ type: "dotted",
+ },
+ },
+ axisLabel: {
+ show: false,
+ fontSize: 14,
+ fontFamily: "MicrosoftYaHei",
+ color: "#DEF1FF",
+ lineHeight: 19,
+ },
+ },
],
series: [
{
+ yAxisIndex: 1,
name: "救助金额",
data: lineData,
type: "line", //线状图
@@ -162,6 +159,7 @@ const option = {
},
},
{
+ yAxisIndex: 0,
name: "救助人数",
data: data,
barWidth: 20,
@@ -179,14 +177,11 @@ const option = {
]),
},
},
- {
+ {
+ type: "bar",
xAxisIndex: 1,
- itemStyle: {
- color: "rgba(180, 180, 180, 0.2)", //外阴影背景
- },
- data: data.map(() => max),
- barWidth: 40, //外阴影背景宽
- emphasis: {
+ yAxisIndex: 2,
+ emphasis: {
itemStyle: {
color: {
type: "linear",
@@ -207,7 +202,11 @@ const option = {
},
},
},
- type: "bar",
+ itemStyle: {
+ color: "rgba(221, 242, 255, 0.1)",
+ },
+ data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+ barWidth: 50,
},
],
};
diff --git a/src/view/echarts_work/eP2.vue b/src/view/echarts_work/eP2.vue
index 15e7311..bca41f3 100644
--- a/src/view/echarts_work/eP2.vue
+++ b/src/view/echarts_work/eP2.vue
@@ -44,12 +44,7 @@ const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
+
},
legend: {
data: ["救助金额", "救助人数"],
diff --git a/src/view/echarts_work/eP3.vue b/src/view/echarts_work/eP3.vue
index 2dac191..9eb1967 100644
--- a/src/view/echarts_work/eP3.vue
+++ b/src/view/echarts_work/eP3.vue
@@ -36,13 +36,8 @@ const color = [
const option = {
tooltip: {
trigger: "axis",
- formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
+ formatter: "{b0}
{a0}:{c0}
{a1}:{c1}
{a2}:{c2}
{a3}:{c3}
{a4}:{c4}",
+
},
legend: [
{
@@ -153,6 +148,7 @@ const option = {
},
},
},
+
],
series: [
{
diff --git a/src/view/echarts_work/eP4.vue b/src/view/echarts_work/eP4.vue
index b875642..0fba32e 100644
--- a/src/view/echarts_work/eP4.vue
+++ b/src/view/echarts_work/eP4.vue
@@ -30,12 +30,7 @@ const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
+
},
legend: {
diff --git a/src/view/education.vue b/src/view/education.vue
index 1b73e0b..357826d 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -6,10 +6,12 @@