diff --git a/src/view/echarts_work/eP2.vue b/src/view/echarts_work/eP2.vue
index bca41f3..2eec701 100644
--- a/src/view/echarts_work/eP2.vue
+++ b/src/view/echarts_work/eP2.vue
@@ -44,7 +44,6 @@ const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
-
},
legend: {
data: ["救助金额", "救助人数"],
@@ -89,7 +88,7 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
- max: maxRs+50,
+
splitLine: {
//分割线配置
show: false,
@@ -118,7 +117,7 @@ const option = {
type: "value",
scale: true,
min: 0,
- max: maxJe+50,
+
name: "救助金额/万",
splitLine: {
show: false,
@@ -143,6 +142,31 @@ 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: [
{
@@ -160,6 +184,7 @@ const option = {
},
},
{
+ yAxisIndex: 0,
name: "救助人数",
data: data,
barWidth: 20,
@@ -178,12 +203,9 @@ const option = {
},
},
{
+ type: "bar",
xAxisIndex: 1,
- itemStyle: {
- color: "rgba(180, 180, 180, 0.2)", //外阴影背景
- },
- data: data.map(() => max+50),
- barWidth: 40, //外阴影背景宽
+ yAxisIndex: 2,
emphasis: {
itemStyle: {
color: {
@@ -205,7 +227,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/eP3.vue b/src/view/echarts_work/eP3.vue
index 9eb1967..b76fd4f 100644
--- a/src/view/echarts_work/eP3.vue
+++ b/src/view/echarts_work/eP3.vue
@@ -94,7 +94,7 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
- max: maxRs+50,
+
splitLine: {
//分割线配置
show: false,
@@ -123,7 +123,7 @@ const option = {
type: "value",
scale: true,
min: 0,
- max: maxJe+50,
+
name: "救助金额/万",
splitLine: {
show: false,
@@ -148,7 +148,31 @@ 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: [
{
@@ -174,6 +198,7 @@ const option = {
},
},
{
+ yAxisIndex: 0,
name: "特困救助人次",
data: data,
barWidth: 10,
@@ -192,6 +217,7 @@ const option = {
},
},
{
+ yAxisIndex: 0,
name: "低保救助人次",
data: data2,
barWidth: 10,
@@ -210,6 +236,7 @@ const option = {
},
},
{
+ yAxisIndex: 0,
name: "低边救助人次",
data: data3,
barWidth: 10,
@@ -228,11 +255,12 @@ const option = {
},
},
{
+ yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
- data: data.map(() => max),
+ data: data.map(() => 100),
barWidth: 60, //外阴影背景宽
emphasis: {
itemStyle: {
diff --git a/src/view/echarts_work/eP4.vue b/src/view/echarts_work/eP4.vue
index 0fba32e..b024e08 100644
--- a/src/view/echarts_work/eP4.vue
+++ b/src/view/echarts_work/eP4.vue
@@ -29,8 +29,7 @@ const color = [
const option = {
tooltip: {
trigger: "axis",
- formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
-
+ formatter: "{b0}
{a0}:{c0}
{a1}:{c1}
{a2}:{c2}
{a3}:{c3}",
},
legend: {
@@ -83,7 +82,7 @@ const option = {
type: "value",
scale: true,
name: "补贴人数",
- max: max,
+
splitLine: {
//分割线配置
show: false,
@@ -112,7 +111,7 @@ const option = {
type: "value",
scale: true,
min: 0,
- max: max,
+
name: "救助金额/元",
splitLine: {
show: false,
@@ -137,29 +136,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: [
{
- name: "困难残疾人生活补贴金额",
- data: lineData,
- type: "line", //线状图
- itemStyle: {
- borderColor: "#00FCFF",
- borderWidth: 1,
- color: "#00FCFF",
- },
- },
- {
- name: "护理补贴金额",
- data: lineData2,
- type: "line", //线状图
- itemStyle: {
- borderColor: "#00FCFF",
- borderWidth: 1,
- color: "#2468FF",
- },
- },
- {
+ yAxisIndex: 0,
name: "困难残疾人生活补贴人数",
data: data,
barWidth: 10,
@@ -177,8 +182,9 @@ const option = {
]),
},
},
-
+
{
+ yAxisIndex: 0,
name: "护理补贴人数",
data: data2,
barWidth: 10,
@@ -197,11 +203,34 @@ const option = {
},
},
{
+ yAxisIndex: 1,
+ name: "困难残疾人生活补贴金额",
+ data: lineData,
+ type: "line", //线状图
+ itemStyle: {
+ borderColor: "#00FCFF",
+ borderWidth: 1,
+ color: "#00FCFF",
+ },
+ },
+ {
+ yAxisIndex: 1,
+ name: "护理补贴金额",
+ data: lineData2,
+ type: "line", //线状图
+ itemStyle: {
+ borderColor: "#00FCFF",
+ borderWidth: 1,
+ color: "#2468FF",
+ },
+ },
+ {
+ yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
- data: data.map(() => max),
+ data: data.map(() => 100),
barWidth: 60, //外阴影背景宽
emphasis: {
itemStyle: {
diff --git a/src/view/echarts_work/ePjz.vue b/src/view/echarts_work/ePjz.vue
index cd729e5..171e7b3 100644
--- a/src/view/echarts_work/ePjz.vue
+++ b/src/view/echarts_work/ePjz.vue
@@ -8,7 +8,7 @@ import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
-const data = [120, 200, 50, 80, 70];
+const data = [120, 150, 250, 255, 170];
const lineData = [150, 230, 24, 218, 135];
const max = data
.concat(lineData)
@@ -51,13 +51,13 @@ const option = {
},
tooltip: {
trigger: "axis",
- formatter: "{b0}
{a1}:{c0}
{a2}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
+ formatter: "{b0}
{a1}:{c1}
{a2}:{c2}",
+ // axisPointer: {
+ // type: "cross",
+ // label: {
+ // backgroundColor: "#3F82F7", //提示文字标题颜色
+ // },
+ // },
},
grid: {
left: "6%",
@@ -92,7 +92,6 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
- max: max,
splitLine: {
//分割线配置
show: false,
@@ -121,7 +120,7 @@ const option = {
type: "value",
scale: true,
min: 0,
- max: max,
+
name: "救助金额/万",
splitLine: {
show: false,
@@ -146,24 +145,51 @@ 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: 0,
name: "",
type: "pictorialBar",
- symbolSize: [20, 5], // 宽,高
- symbolOffset: [0, 2], // 左 上
+ symbolSize: [30, 5], // 宽,高
+ symbolOffset: [0, 1], // 左 上
z: 12,
- symbol: 'circle', // 图形形状为圆
+ symbol: "circle", // 图形形状为圆
itemStyle: {
color: "rgba(38, 191, 254, 1)",
// color: "red",
},
- data: data,
+ data: data.map(()=>0),
},
// 数据的条形图
{
+ yAxisIndex: 1,
name: "总救助金额",
data: lineData,
type: "line", //线状图
@@ -178,9 +204,10 @@ const option = {
},
// 数据的柱状图
{
+ yAxisIndex: 0,
name: "总救助人数",
data: data,
- barWidth: 20,
+ barWidth: 30,
type: "bar",
itemStyle: {
// borderColor: "#00FCFF",
@@ -201,11 +228,18 @@ const option = {
//外阴影背景
{
xAxisIndex: 1,
+ yAxisIndex: 2,
itemStyle: {
- color: "rgba(180, 180, 180, 0.2)", //背景颜色
+ normal: {
+ // borderColor: "rgba(0, 183, 255, 1)",
+ borderRadius: [10, 10, 0, 0], //圆角边框
+ // color: "rgba(94, 178, 188, 0.3)", //外阴影背景
+
+ color: "rgba(180, 180, 180, 0.2)", //背景颜色
+ },
},
- data: data.map(() => max),
- barWidth: 40, //外阴影背景宽
+ data: data.map(() => 100),
+ barWidth: 30, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
@@ -231,10 +265,11 @@ const option = {
},
// 数据顶部的样式
{
+ yAxisIndex: 0,
name: "",
type: "pictorialBar",
symbol: "circle",
- symbolSize: [20, 8],
+ symbolSize: [30, 8],
symbolOffset: [0, -4],
z: 3,
itemStyle: {
@@ -312,8 +347,6 @@ const option = {
// ]
};
-
-
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);