diff --git a/src/view/echarts_education/pie.vue b/src/view/echarts_education/pie.vue
index 1d34abc..5e9a2b9 100644
--- a/src/view/echarts_education/pie.vue
+++ b/src/view/echarts_education/pie.vue
@@ -26,9 +26,10 @@ const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
- formatter: "{b0}
{a0}:{c0}
{a1}:{c1} ",
+ formatter: "{b0}
{a1}:{c1}
{a3}:{c3} ",
},
legend: {
+ data: ["县镇", "农村"],
top: "8%",
right: "11%",
textStyle: {
@@ -122,54 +123,89 @@ const getOption = () => {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
- // color: "rgba(142, 187, 255, 1)",
+ // color: "rgba(23, 136, 255, 1)",
// },
// {
// offset: 1,
- // color: "rgba(142, 187, 255, 0.20)",
+ // color: "rgba(23, 136, 255, 0.20)",
// },
// ]),
// },
// },
{
- name: "县镇",
- type: "bar",
+ z: 1,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
data: data.list[1],
- barWidth: "18%",
- label:{
- show:true,
- position:'top',
- color:'#ffffff',
- formatter:function(data){
- return data.value
- }
- },
+ symbol: "diamond",
+ symbolOffset: ["-25%", "-50%"],
+ symbolSize: [19, 10],
itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgba(23, 136, 255, 1)",
- },
- {
- offset: 1,
- color: "rgba(23, 136, 255, 0.20)",
- },
- ]),
+ borderColor: "#2fffa4",
+ color: "rgba(23, 136, 255, 1)",
},
},
{
+ z: 1,
+ barGap: "-50%",
+ name: "县镇",
+ type: "bar",
+ data: data.list[1],
+ barWidth: "25%",
+ label: {
+ show: true,
+ position: "top",
+ color: "#ffffff",
+ formatter: function (data) {
+ return data.value;
+ },
+ },
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(23, 136, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 136, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 136, 255, .3)" },
+ { offset: 1, color: "rgba(23, 136, 255, .5)" },
+ ],
+ },
+ },
+ },
+ {
+ z: 2,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.list[0],
+ symbol: "diamond",
+ symbolOffset: [5, "-50%"],
+ symbolSize: [19, 10],
+ itemStyle: {
+ borderColor: "#32ffee",
+ color: "rgba(23, 237, 255, 1)",
+ },
+ },
+ {
+ z:2,
name: "农村",
type: "bar",
+ barGap: "-50%",
data: data.list[0],
- barWidth: "18%",
- label:{
- show:true,
- position:'top',
- color:'#ffffff',
- formatter:function(data){
- return data.value
- }
- },
+ barWidth: "25%",
+ label: {
+ show: true,
+ position: "top",
+ color: "#ffffff",
+ formatter: function (data) {
+ return data.value;
+ },
+ },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
@@ -181,6 +217,21 @@ const getOption = () => {
color: "rgba(23, 237, 255, 0.20)",
},
]),
+ },
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+ { offset: 1, color: "rgba(23, 237, 255, .5)" },
+ ],
+ },
},
},
{
diff --git a/src/view/echarts_hygiene/pie.vue b/src/view/echarts_hygiene/pie.vue
index 7baf83f..2064187 100644
--- a/src/view/echarts_hygiene/pie.vue
+++ b/src/view/echarts_hygiene/pie.vue
@@ -23,7 +23,7 @@ const data = reactive({
cxffrc: [], //城乡医疗保险发放人次
year: [],
option: {},
- bg:[],
+ bg: [],
});
const chart = ref(); // 创建DOM引用
@@ -32,9 +32,10 @@ const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
- formatter: "{b0}
{a0}:{c0}
{a1}:{c1} ",
+ formatter: "{b0}
{a1}:{c1}
{a3}:{c3} ",
},
legend: {
+ data: ["职工医疗保险发放人次", "城乡医疗保险发放人次"],
top: "6%",
right: "11%",
textStyle: {
@@ -118,55 +119,117 @@ const getOption = () => {
],
series: [
{
- name: "职工医疗保险发放人次",
- type: "bar",
+ z: 1,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
data: data.zgffrc,
- barWidth: "18%",
- label: {
- show: true,
- color: "#ffffff",
- position:'top',
- formatter: function (data) {
- return (data.value/10000).toFixed(0) +'万';
- },
- },
+ symbol: "diamond",
+ symbolOffset: ["-20%", "-50%"],
+ symbolSize: [19, 10],
itemStyle: {
- color: 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)",
- },
- ]),
+ borderColor: "#2fffa4",
+ color: "rgba(142, 187, 255, 1)",
},
},
{
- name: "城乡医疗保险发放人次",
+ z: 1,
+ name: "职工医疗保险发放人次",
type: "bar",
- data: data.cxffrc,
+ barGap: "-50%",
+ data: data.zgffrc,
barWidth: "18%",
- label: {
+ label: {
show: true,
color: "#ffffff",
- position:'top',
+ position: "top",
formatter: function (data) {
- return (data.value/10000).toFixed(0) +'万';
+ return (data.value / 10000).toFixed(0) + "万";
},
},
+ // itemStyle: {
+ // color: 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)",
+ // },
+ // ]),
+ // },
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)",
- },
- ]),
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+ { offset: 1, color: "rgba(142, 187, 255, .5)" },
+ ],
+ },
+ },
+ },
+ {
+ z: 2,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.cxffrc,
+ symbol: "diamond",
+ symbolOffset: [4, "-50%"],
+ symbolSize: [19, 10],
+ itemStyle: {
+ borderColor: "#32ffee",
+ color: "rgba(23, 237, 255, 1)",
+ },
+ },
+ {
+ z: 2,
+ name: "城乡医疗保险发放人次",
+ type: "bar",
+ barGap: "-50%",
+ data: data.cxffrc,
+ barWidth: "18%",
+ label: {
+ show: true,
+ color: "#ffffff",
+ position: "top",
+ formatter: function (data) {
+ return (data.value / 10000).toFixed(0) + "万";
+ },
+ },
+ // 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)",
+ // },
+ // ]),
+ // },
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+ { offset: 1, color: "rgba(23, 237, 255, .5)" },
+ ],
+ },
},
},
{
@@ -198,7 +261,7 @@ onBeforeMount(() => {
data.zgffrc.push(item.zgffrc);
data.cxffrc.push(item.cxffrc);
data.bg.push("");
- })
+ });
getOption();
setChart();
}, 600);
diff --git a/src/view/echarts_work/eP3.vue b/src/view/echarts_work/eP3.vue
index e6b648a..8e3aa16 100644
--- a/src/view/echarts_work/eP3.vue
+++ b/src/view/echarts_work/eP3.vue
@@ -239,62 +239,114 @@ const getOption = () => {
color: "#2468FF",
},
},
+
{
+ barGap: "-50%",
+ z: 1,
yAxisIndex: 0,
name: "特困救助人次",
data: data.list1,
barWidth: 10,
type: "bar",
+ // itemStyle: {
+ // color: 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)",
+ // },
+ // ]),
+ // },
itemStyle: {
- color: 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)",
- },
- ]),
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+ { offset: 1, color: "rgba(142, 187, 255, .5)" },
+ ],
+ },
},
},
{
+ barGap: "-50%",
+ z: 2,
yAxisIndex: 0,
name: "低保救助人次",
data: data.list2,
barWidth: 10,
type: "bar",
itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgba(23, 136, 255, 1)",
- },
- {
- offset: 1,
- color: "rgba(23, 136, 255, 0.20)",
- },
- ]),
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(23, 136, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 136, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 136, 255, .3)" },
+ { offset: 1, color: "rgba(23, 136, 255, .5)" },
+ ],
+ },
},
+ // itemStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // {
+ // offset: 0,
+ // color: "rgba(23, 136, 255, 1)",
+ // },
+ // {
+ // offset: 1,
+ // color: "rgba(23, 136, 255, 0.20)",
+ // },
+ // ]),
+ // },
},
{
+ barGap: "-50%",
+ z: 3,
yAxisIndex: 0,
name: "低边救助人次",
data: data.list3,
barWidth: 10,
type: "bar",
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)",
- },
- ]),
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+ { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+ { offset: 1, color: "rgba(23, 237, 255, .5)" },
+ ],
+ },
},
+ // 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)",
+ // },
+ // ]),
+ // },
},
{
yAxisIndex: 2,
@@ -327,6 +379,48 @@ const getOption = () => {
},
type: "bar",
},
+ {
+ z: 1,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.list1,
+ symbol: "diamond",
+ symbolOffset: ["-20%", "-50%"],
+ symbolSize: [14, 8],
+ itemStyle: {
+ borderColor: "#2fffa4",
+ color: "rgba(142, 187, 255, 1)",
+ },
+ },
+ {
+ z: 2,
+ name: "上部2",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.list2,
+ symbol: "diamond",
+ symbolOffset: ["0", "-50%"],
+ symbolSize: [14, 8],
+ itemStyle: {
+ borderColor: "#2fffa4",
+ color: "rgba(23, 136, 255, 1)",
+ },
+ },
+ {
+ z: 3,
+ name: "上部3",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.list3,
+ symbol: "diamond",
+ symbolOffset: [5, "-50%"],
+ symbolSize: [14, 8],
+ itemStyle: {
+ borderColor: "#32ffee",
+ color: "rgba(23, 237, 255, 1)",
+ },
+ },
],
};
};
diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index d6a9904..564eb21 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -1,8 +1,5 @@
-
+