From b8b895ebe6998a2edd06414b10863793fe20a2de Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 13 May 2024 16:08:48 +0800 Subject: [PATCH] 1 --- src/view/echarts_work/eP2.vue | 44 ++++++++++++++---- src/view/echarts_work/eP3.vue | 36 +++++++++++++-- src/view/echarts_work/eP4.vue | 81 +++++++++++++++++++++++----------- src/view/echarts_work/ePjz.vue | 75 ++++++++++++++++++++++--------- 4 files changed, 176 insertions(+), 60 deletions(-) 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);