From 4b0c60c97c442338857d7650a640dca6b2c392e7 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 24 May 2024 10:18:54 +0800 Subject: [PATCH 1/2] gx --- src/view/echarts_hygiene/eP5.vue | 105 +++++---- src/view/echarts_sy/pie.vue | 39 ++-- src/view/echarts_yl/eP3_2.vue | 357 +++++++++++++++++++++++-------- src/view/echarts_yl/ylJHSY.vue | 2 +- src/view/echarts_yl/ylSMFW.vue | 15 ++ src/view/echarts_yl/ylXZZC.vue | 8 + 6 files changed, 378 insertions(+), 148 deletions(-) diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue index 0591fd8..6676019 100644 --- a/src/view/echarts_hygiene/eP5.vue +++ b/src/view/echarts_hygiene/eP5.vue @@ -84,8 +84,9 @@ const getOption = () => { { name: "在册数", type: "value", - nameTextStyle: { // 设置Y轴名称的样式 - fontSize: 14 // 这里设置字体大小为20 + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 }, splitLine: { show: true, @@ -119,47 +120,73 @@ const getOption = () => { type: "bar", data: data.rs, barWidth: 20, + label: { + show: true, + color: "#ffffff", + position: "top", + formatter: function (data) { + return data.value; + }, + }, itemStyle: { normal: { color: function (params) { - var colorList = [ - 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)", - }, - ], - false), - new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(255, 243, 119, 1)", - }, - { - offset: 1, - color: "rgba(255, 242, 142, 0.20)", - }, - ], - false), - 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)", - }, - ], - false), - ]; + var colorList = [ + 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)", + }, + ], + false + ), + new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(255, 243, 119, 1)", + }, + { + offset: 1, + color: "rgba(255, 242, 142, 0.20)", + }, + ], + false + ), + 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)", + }, + ], + false + ), + ]; - return colorList[params.dataIndex % colorList.length]; - }, + return colorList[params.dataIndex % colorList.length]; + }, }, }, }, diff --git a/src/view/echarts_sy/pie.vue b/src/view/echarts_sy/pie.vue index f1776eb..3805a03 100644 --- a/src/view/echarts_sy/pie.vue +++ b/src/view/echarts_sy/pie.vue @@ -175,16 +175,16 @@ const getOption = () => { legend: [ { orient: "vertical", - right: "6%", - top: "10%", - itemWidth: 25, // 可以设置图例标记的宽度 + right: "1%", + top: "16%", + itemWidth: 20, // 可以设置图例标记的宽度 itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴 - itemGap: 19, - itemStyle: { - borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色 - borderWidth: 10, // 图例边框宽度 - borderRadius: 20, - }, + itemGap: 20, + // itemStyle: { + // borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色 + // borderWidth: 10, // 图例边框宽度 + // borderRadius: 20, + // }, textStyle: { color: "#ffffff", fontSize: 14, @@ -197,11 +197,16 @@ const getOption = () => { }, }, data: data.list, - formatter: (name) => { - if (data.list.length) { - const item = data.list.filter((item) => item.name === name)[0]; - return `{name|${name}}`; + + //格式化图例文本 + formatter: function (name) { + var target; + for (var i = 0, l = data.list.length; i < l; i++) { + if (data.list[i].name == name) { + target = data.list[i].value; + } } + return `${name}:${target} 人`; }, }, ], @@ -221,8 +226,8 @@ const getOption = () => { { type: "pie", roseType: "radius", - radius: ["20%", "85%"], - center: ["25%", "50%"], + radius: ["15%", "80%"], + center: ["20%", "50%"], label: { position: "inside", formatter(item) { @@ -263,8 +268,8 @@ const getOption = () => { { type: "pie", roseType: "radius", - radius: ["20%", "87%"], - center: ["25%", "50%"], + radius: ["15%", "82%"], + center: ["20%", "50%"], label: { show: false, }, diff --git a/src/view/echarts_yl/eP3_2.vue b/src/view/echarts_yl/eP3_2.vue index c58dd80..b3da1a6 100644 --- a/src/view/echarts_yl/eP3_2.vue +++ b/src/view/echarts_yl/eP3_2.vue @@ -35,17 +35,176 @@ const data = reactive({ list2: [], year: [], option: {}, + bg:[] }); +// const getOption = () => { +// data.option = { +// tooltip: { +// trigger: "axis", +// formatter: "{b0}
{a0}:{c0}
{a1}:{c1} ", +// }, +// legend: { +// top: "5%", +// right: "11%", +// textStyle: { +// fontSize: 16, +// color: "#ffffff", +// }, +// }, +// grid: { +// top: "25%", +// left: "1%", +// right: "10%", +// bottom: "5%", +// containLabel: true, +// }, +// calculable: true, +// xAxis: [ +// { +// type: "category", +// axisLabel: { +// //坐标轴刻度标签的相关设置 +// textStyle: { +// color: "#ffffff", +// fontSize: 16, +// }, +// }, +// data: data.year, +// }, +// { +// axisTick: false, +// type: "category", +// data: data.year, +// axisLabel: { +// show: false, +// color: "#ffffff", +// fontSize: 16, +// }, +// }, +// ], + +// yAxis: [ +// { +// type: "value", +// splitLine: { +// show: true, +// lineStyle: { +// color: "rgba(226, 226, 226, 0.3)", +// width: 1, +// }, +// }, +// axisLabel: { +// //坐标轴刻度标签的相关设置 +// textStyle: { +// color: "#ffffff", +// fontSize: 16, +// }, +// }, +// }, +// { +// type: "value", +// min: 0, +// max: 100, +// splitLine: { +// show: false, +// lineStyle: { +// type: "solid", +// color: "rgb(221, 242, 255,0.3)", +// }, +// }, +// axisLine: { +// show: false, +// lineStyle: { +// type: "dotted", +// }, +// }, +// axisLabel: { +// show: false, +// fontSize: 16, +// color: "#DEF1FF", +// fontFamily: "MicrosoftYaHei", +// lineHeight: 19, +// }, +// }, +// ], +// series: [ +// { +// name: "特困补助金额", +// type: "bar", +// data: data.list1, +// barWidth: "18%", +// itemStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { +// offset: 0, +// color: "rgba(162, 187, 255, 1)", +// }, +// { +// offset: 1, +// color: "rgba(162, 187, 255, 0.20)", +// }, +// ]), +// }, +// label: { +// show: true, +// color: "#ffffff", +// position: "top", +// formatter: function (data) { +// return data.value; +// }, +// }, +// }, +// { +// name: "低保补助金额", +// type: "bar", +// data: data.list2, +// barWidth: "18%", +// 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)", +// }, +// ]), +// }, +// label: { +// show: true, +// color: "#ffffff", +// position: "top", +// formatter: function (data) { +// return data.value; +// }, +// }, +// }, +// { +// type: "bar", +// xAxisIndex: 1, +// yAxisIndex: 1, +// itemStyle: { +// color: "rgba(221, 242, 255, 0.1)", +// }, +// data: data.year.map(() => 100), +// barWidth: 50, +// }, +// ], +// }; +// }; const getOption = () => { data.option = { tooltip: { trigger: "axis", - formatter: "{b0}
{a0}:{c0}
{a1}:{c1} ", + padding: [20, 10, 20, 10], + formatter: "{b0}
{a1}:{c1}
{a2}:{c2} ", }, legend: { + data: ["特困补助金额", "低保补助金额"], top: "5%", - right: "11%", + right: "28%", textStyle: { fontSize: 16, color: "#ffffff", @@ -55,41 +214,40 @@ const getOption = () => { top: "25%", left: "1%", right: "10%", - bottom: "5%", + bottom: "3%", containLabel: true, }, - calculable: true, - xAxis: [ - { - type: "category", - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#ffffff", - fontSize: 16, - }, - }, - data: data.year, - }, - { - axisTick: false, - type: "category", - data: data.year, - axisLabel: { - show: false, + + xAxis: { + type: "category", + // boundaryGap: false, + data: data.year, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { color: "#ffffff", fontSize: 16, }, }, - ], - + }, yAxis: [ { + name: "特困补助金额", type: "value", + min: 0, // 设置Y轴最小值 + max: function (value) { + // 自定义Y轴最大值，确保数据点显示在顶部 + return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50; + }, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, splitLine: { show: true, lineStyle: { - color: "rgba(226, 226, 226, 0.3)", + color: "rgba(255, 255, 255, 0.2)", + fontSize: 16, width: 1, }, }, @@ -100,95 +258,108 @@ const getOption = () => { fontSize: 16, }, }, - }, - { - type: "value", - min: 0, - max: 100, - splitLine: { - show: false, - lineStyle: { - type: "solid", - color: "rgb(221, 242, 255,0.3)", - }, - }, axisLine: { + //y轴线的颜色以及宽度 show: false, lineStyle: { - type: "dotted", - }, - }, - axisLabel: { - show: false, - fontSize: 16, - color: "#DEF1FF", - fontFamily: "MicrosoftYaHei", - lineHeight: 19, - }, - }, - ], - series: [ - { - name: "特困补助金额", - type: "bar", - data: data.list1, - barWidth: "18%", - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(162, 187, 255, 1)", - }, - { - offset: 1, - color: "rgba(162, 187, 255, 0.20)", - }, - ]), - }, - label: { - show: true, - color: "#ffffff", - position: "top", - formatter: function (data) { - return data.value; + color: "#ffffff", + fontSize: 16, + width: 1, + type: "solid", }, }, }, { name: "低保补助金额", + type: "value", + min: 0, // 设置Y轴最小值 + max: function (value) { + // 自定义Y轴最大值，确保数据点显示在顶部 + return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50; + }, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, + splitLine: { + show: false, + lineStyle: { + color: "rgba(255, 255, 255, 0.2)", + fontSize: 16, + width: 1, + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#ffffff", + fontSize: 16, + }, + }, + axisLine: { + //y轴线的颜色以及宽度 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 16, + width: 1, + type: "solid", + }, + }, + }, + ], + series: [ + { + name: "背景", type: "bar", - data: data.list2, - barWidth: "18%", + data: data.bg, + showBackground: true, + backgroundStyle: { + color: "rgba(180, 180, 180, 0.2)", + }, + }, + { + yAxisIndex: 0, + name: "特困补助金额", + type: "line", + symbol: "emptyCircle", + + symbolSize: 10, 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)", - }, - ]), + borderColor: "#00FCFF", + borderWidth: 1, + color: "#00FCFF", }, label: { show: true, color: "#ffffff", - position: "top", + position:'bottom', formatter: function (data) { return data.value; }, }, + data: data.list1, }, { - type: "bar", - xAxisIndex: 1, yAxisIndex: 1, + name: "低保补助金额", + type: "line", + symbol: "emptyCircle", + + symbolSize: 10, itemStyle: { - color: "rgba(221, 242, 255, 0.1)", + borderColor: "#2468FF", + borderWidth: 1, + color: "#2468FF", }, - data: data.year.map(() => 100), - barWidth: 50, + label: { + show: true, + color: "#ffffff", + formatter: function (data) { + return data.value; + }, + }, + data: data.list2, }, ], }; @@ -207,6 +378,9 @@ onBeforeMount(() => { data.list1 = props.list1; data.list2 = props.list2; data.year = props.year; + data.year.forEach(() => { + data.bg.push(0); + }); getOption(); setChart(); }, 600); @@ -214,4 +388,5 @@ onBeforeMount(() => { \ No newline at end of file diff --git a/src/view/echarts_yl/ylJHSY.vue b/src/view/echarts_yl/ylJHSY.vue index e284d51..1ea7e91 100644 --- a/src/view/echarts_yl/ylJHSY.vue +++ b/src/view/echarts_yl/ylJHSY.vue @@ -232,7 +232,7 @@ const getOption = () => { label:{ show:true, position:'top', - color:'rgba(0, 252, 255, 1)', + color:'#ffffff', formatter:function(data){ return data.value } diff --git a/src/view/echarts_yl/ylSMFW.vue b/src/view/echarts_yl/ylSMFW.vue index d58c518..341a308 100644 --- a/src/view/echarts_yl/ylSMFW.vue +++ b/src/view/echarts_yl/ylSMFW.vue @@ -160,11 +160,26 @@ const option = { data: data, barWidth: 20, type: "bar", + label:{ + show:true, + color:'#ffffff', + formatter:function(data){ + return data.value + } + }, }, { name: "上门服务次数", data: lineData, type: "line", //线状图 + label:{ + show:true, + position:'top', + color:'#ffffff', + formatter:function(data){ + return data.value + } + }, itemStyle: { borderColor: "#00FCFF", borderWidth: 1, diff --git a/src/view/echarts_yl/ylXZZC.vue b/src/view/echarts_yl/ylXZZC.vue index 7b686f5..fc491c1 100644 --- a/src/view/echarts_yl/ylXZZC.vue +++ b/src/view/echarts_yl/ylXZZC.vue @@ -215,6 +215,14 @@ const getOption = () => { ]), }, }, + label:{ + show:true, + position:'right', + color:'#ffffff', + formatter:function(data){ + return data.value + } + }, }, ], }; From 0f0fd4f9ac8101eda74dba9770c148a2a43b9364 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 24 May 2024 10:21:48 +0800 Subject: [PATCH 2/2] 1 --- src/view/echarts_sy/pie.vue | 2 +- src/view/sy.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/view/echarts_sy/pie.vue b/src/view/echarts_sy/pie.vue index 3805a03..ebd6b68 100644 --- a/src/view/echarts_sy/pie.vue +++ b/src/view/echarts_sy/pie.vue @@ -1,5 +1,5 @@