diff --git a/src/view/echarts/ylJHSY.vue b/src/view/echarts/ylJHSY.vue
index 4f1d1f1..0ba4ab3 100644
--- a/src/view/echarts/ylJHSY.vue
+++ b/src/view/echarts/ylJHSY.vue
@@ -9,33 +9,80 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
-let option = {
+const data = [120, 200, 150, 80, 70, 110, 130];
+const lineData = [150, 230, 224, 218, 135, 147, 260];
+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: "#ff0000", //提示文字标题颜色
+ backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
},
legend: {
data: ["计划生育人数", "计划生育补贴金额"],
+ top: "8%",
+ textStyle: {
+ fontSize: 12,
+ color: "#ccc",
+ },
},
grid: {
left: "3%",
- right: "4%",
- bottom: "3%",
+ right: "6%",
+ bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
- color: "rgba(0, 252, 255, 1)",
+ // color: "rgba(0, 252, 255, 1)",
+ color,
xAxis: [
{
- // type: "category",
- // scale: true,
+ type: "category",
// name: "计划生育补贴金额/元",
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
+
+ data: ["2019", "2020", "2021", "2022", "2023"],
+ },
+ {
+ type: "category",
+ show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
@@ -44,55 +91,86 @@ let option = {
type: "value",
scale: true,
name: "计划生育人数",
- color: "rgba(255, 252, 0, 1)",
+ max: max,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(226, 226, 226, 0.3)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
},
{
type: "value",
scale: true,
name: "计划生育补贴金额/元",
- position: "right",
- max: 1200,
min: 0,
- boundaryGap: [0.2, 0.2]
- // alignTicks: true,
- // offset: 80,
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: colors[1]
- // }
- // },
- // axisLabel: {
- // formatter: '{value} ml'
- // }
+ max: max,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(226, 226, 226, 0.3)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
+ // max: 300,
+ // position: "right",
+ // boundaryGap: [0.2, 0.2]
},
],
series: [
{
name: "计划生育人数",
+ data: data,
+ barWidth: 20,
type: "bar",
- data: [2.0, 4.9, 7.0, 23.2, 25.6],
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
- },
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#83bff6" },
- { offset: 0.5, color: "#188df0" },
- { offset: 1, color: "#188df0" },
- ]),
- }, //背景渐变
},
{
name: "计划生育补贴金额",
+ data: lineData,
type: "line", //线状图
- data: [2.6, 5.9, 9.0, 16.4, 28.7],
-
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
+ },
+ {
+ xAxisIndex: 1,
+ itemStyle: {
+ color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
+ data: data.map(() => max),
+ barWidth: 40, //外阴影背景宽
+ emphasis: {
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 0,
+ y: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(64, 247, 176, 0.25)",
+ },
+ {
+ offset: 1,
+ color: "rgba(17, 34, 64, 0.25)",
+ },
+ ],
+ },
+ },
+ },
+ type: "bar",
},
],
};
diff --git a/src/view/echarts/ylSMFW.vue b/src/view/echarts/ylSMFW.vue
index 0bdc62e..1a1bf8f 100644
--- a/src/view/echarts/ylSMFW.vue
+++ b/src/view/echarts/ylSMFW.vue
@@ -9,34 +9,81 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
-let option = {
+const data = [120, 200, 150, 80, 70, 110, 130];
+const lineData = [150, 230, 224, 218, 135, 147, 260];
+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: "#ff0000", //提示文字标题颜色
+ backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
},
legend: {
data: ["上门服务时长", "上门服务次数"],
+ top: "8%",
+ textStyle: {
+ fontSize: 12,
+ color: "#ccc",
+ },
},
grid: {
left: "3%",
- right: "4%",
- bottom: "3%",
+ right: "6%",
+ bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
- color: "rgba(0, 252, 255, 1)",
+ // color: "rgba(0, 252, 255, 1)",
+ color,
xAxis: [
{
- // type: "category",
- // scale: true,
- // name: "上门服务次数",
- data: ["4-07", "4-08", "4-09", "4-10", "4-11"],
+ type: "category",
+ // name: "上门服务次数/元",
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
+
+ data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
+ },
+ {
+ type: "category",
+ show: false,
+ data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
],
yAxis: [
@@ -44,55 +91,86 @@ let option = {
type: "value",
scale: true,
name: "上门服务时长",
- color: "rgba(255, 252, 0, 1)",
+ max: max,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(226, 226, 226, 0.3)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
},
{
type: "value",
scale: true,
name: "上门服务次数",
- position: "right",
- max: 1200,
min: 0,
- boundaryGap: [0.2, 0.2]
- // alignTicks: true,
- // offset: 80,
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: colors[1]
- // }
- // },
- // axisLabel: {
- // formatter: '{value} ml'
- // }
+ max: max,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(226, 226, 226, 0.3)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#ccc",
+ },
+ },
+ // max: 300,
+ // position: "right",
+ // boundaryGap: [0.2, 0.2]
},
],
series: [
{
name: "上门服务时长",
+ data: data,
+ barWidth: 20,
type: "bar",
- data: [2.0, 4.9, 7.0, 23.2, 25.6],
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
- },
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#83bff6" },
- { offset: 0.5, color: "#188df0" },
- { offset: 1, color: "#188df0" },
- ]),
- }, //背景渐变
},
{
name: "上门服务次数",
+ data: lineData,
type: "line", //线状图
- data: [2.6, 5.9, 9.0, 16.4, 28.7],
-
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
+ },
+ {
+ xAxisIndex: 1,
+ itemStyle: {
+ color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
+ data: data.map(() => max),
+ barWidth: 40, //外阴影背景宽
+ emphasis: {
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 0,
+ y: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(64, 247, 176, 0.25)",
+ },
+ {
+ offset: 1,
+ color: "rgba(17, 34, 64, 0.25)",
+ },
+ ],
+ },
+ },
+ },
+ type: "bar",
},
],
};
diff --git a/src/view/echarts/ylXZZC.vue b/src/view/echarts/ylXZZC.vue
index 65372e9..7fb55cc 100644
--- a/src/view/echarts/ylXZZC.vue
+++ b/src/view/echarts/ylXZZC.vue
@@ -1,5 +1,5 @@
-
+