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
+ }
+ },
},
],
};