xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-06-04 09:15:19 +08:00
parent c7b7c26ba3 77cea391c8
commit 97c0f82acb
5 changed files with 482 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/view/echarts_education/pie.vue
View File

@ -26,9 +26,10 @@ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
}, },
legend: { legend: {
data: ["县镇", "农村"],
top: "8%", top: "8%",
right: "11%", right: "11%",
textStyle: { textStyle: {
@ -122,54 +123,89 @@ const getOption = () => {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { // {
// offset: 0, // offset: 0,
// color: "rgba(142, 187, 255, 1)", // color: "rgba(23, 136, 255, 1)",
// }, // },
// { // {
// offset: 1, // offset: 1,
// color: "rgba(142, 187, 255, 0.20)", // color: "rgba(23, 136, 255, 0.20)",
// }, // },
// ]), // ]),
// }, // },
// }, // },
{ {
name: "县镇", z: 1,
type: "bar", name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list[1], data: data.list[1],
barWidth: "18%", symbol: "diamond",
label:{ symbolOffset: ["-25%", "-50%"],
show:true, symbolSize: [19, 10],
position:'top',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ borderColor: "#2fffa4",
{ color: "rgba(23, 136, 255, 1)",
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
}, },
}, },
{ {
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: "农村", name: "农村",
type: "bar", type: "bar",
barGap: "-50%",
data: data.list[0], data: data.list[0],
barWidth: "18%", barWidth: "25%",
label:{ label: {
show:true, show: true,
position:'top', position: "top",
color:'#ffffff', color: "#ffffff",
formatter:function(data){ formatter: function (data) {
return data.value return data.value;
} },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -181,6 +217,21 @@ const getOption = () => {
color: "rgba(23, 237, 255, 0.20)", 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)" },
],
},
}, },
}, },
{ {

141
src/view/echarts_hygiene/pie.vue
View File

@ -23,7 +23,7 @@ const data = reactive({
cxffrc: [], //城乡医疗保险发放人次 cxffrc: [], //城乡医疗保险发放人次
year: [], year: [],
option: {}, option: {},
bg:[], bg: [],
}); });
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
@ -32,9 +32,10 @@ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
}, },
legend: { legend: {
data: ["职工医疗保险发放人次", "城乡医疗保险发放人次"],
top: "6%", top: "6%",
right: "11%", right: "11%",
textStyle: { textStyle: {
@ -118,55 +119,117 @@ const getOption = () => {
], ],
series: [ series: [
{ {
name: "职工医疗保险发放人次", z: 1,
type: "bar", name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.zgffrc, data: data.zgffrc,
barWidth: "18%", symbol: "diamond",
label: { symbolOffset: ["-20%", "-50%"],
show: true, symbolSize: [19, 10],
color: "#ffffff",
position:'top',
formatter: function (data) {
return (data.value/10000).toFixed(0) +'万';
},
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ borderColor: "#2fffa4",
{ color: "rgba(142, 187, 255, 1)",
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
}, },
}, },
{ {
name: "城乡医疗保险发放人次", z: 1,
name: "职工医疗保险发放人次",
type: "bar", type: "bar",
data: data.cxffrc, barGap: "-50%",
data: data.zgffrc,
barWidth: "18%", barWidth: "18%",
label: { label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position:'top', position: "top",
formatter: function (data) { 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: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { 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.zgffrc.push(item.zgffrc);
data.cxffrc.push(item.cxffrc); data.cxffrc.push(item.cxffrc);
data.bg.push(""); data.bg.push("");
}) });
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);

154
src/view/echarts_work/eP3.vue
View File

@ -239,62 +239,114 @@ const getOption = () => {
color: "#2468FF", color: "#2468FF",
}, },
}, },
{ {
barGap: "-50%",
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "特困救助人次", name: "特困救助人次",
data: data.list1, data: data.list1,
barWidth: 10, barWidth: 10,
type: "bar", 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: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(142, 187, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(142, 187, 255, 0.20)", { 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, yAxisIndex: 0,
name: "低保救助人次", name: "低保救助人次",
data: data.list2, data: data.list2,
barWidth: 10, barWidth: 10,
type: "bar", type: "bar",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 136, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 136, 255, 0.20)", { 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, yAxisIndex: 0,
name: "低边救助人次", name: "低边救助人次",
data: data.list3, data: data.list3,
barWidth: 10, barWidth: 10,
type: "bar", type: "bar",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { 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, yAxisIndex: 2,
@ -327,6 +379,48 @@ const getOption = () => {
}, },
type: "bar", 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)",
},
},
], ],
}; };
}; };

100
src/view/echarts_yl/pie.vue
View File

@ -1,8 +1,5 @@
<template> <template>
<div <div ref="chart" style="width: 100%; height: 260px"></div>
ref="chart"
style="width: 100%; height: 260px"
></div>
</template> </template>
<script setup> <script setup>
@ -43,9 +40,10 @@ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
}, },
legend: { legend: {
data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
top: "8%", top: "8%",
right: "11%", right: "11%",
textStyle: { textStyle: {
@ -127,35 +125,39 @@ const getOption = () => {
series: [ series: [
{ {
z: 1, z: 1,
name: '上部1', name: "上部1",
type: 'pictorialBar', type: "pictorialBar",
symbolPosition: 'end', symbolPosition: "end",
data: data.list1, data: data.list1,
symbol: 'diamond', symbol: "diamond",
symbolOffset: ['-50%', '-50%'], symbolOffset: ["-20%", "-50%"],
symbolSize: [20, 19], symbolSize: [19, 10],
itemStyle: { itemStyle: {
borderColor: '#2fffa4', borderColor: "#2fffa4",
color: '#2fffa4' color: "rgba(142, 187, 255, 1)",
}, },
}, },
{ {
z: 1, z: 1,
name: "职工养老保险发放人次", name: "职工养老保险发放人次",
type: "bar", type: "bar",
barGap: "-50%",
data: data.list1, data: data.list1,
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x2: 1, y: 0, y2: 0, x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(29, 245, 160, .7)' }, { offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: 'rgba(29, 245, 160, .7)' }, { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: 'rgba(29, 245, 160, .3)' }, { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: 'rgba(29, 245, 160, .3)' } { offset: 1, color: "rgba(142, 187, 255, .5)" },
] ],
} },
}, },
// itemStyle: { // itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -171,33 +173,63 @@ const getOption = () => {
// }, // },
label: { label: {
show: true, show: true,
position: 'top', position: "top",
color: "#ffffff", color: "#ffffff",
formatter: function (data) { formatter: function (data) {
return data.value; return data.value;
}, },
}, },
}, },
{
z: 2,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list2,
symbol: "diamond",
symbolOffset: [4, "-50%"],
symbolSize: [19, 10],
itemStyle: {
borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)",
},
},
{ {
name: "城乡养老保险发放人次", name: "城乡养老保险发放人次",
type: "bar", type: "bar",
data: data.list2, data: data.list2,
barGap: "-50%",
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { 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)",
// },
// ]),
// },
label: { label: {
show: true, show: true,
position: 'top', position: "top",
color: "#ffffff", color: "#ffffff",
formatter: function (data) { formatter: function (data) {
return data.value; return data.value;

212
src/view/sy.vue
View File

@ -2020,111 +2020,6 @@ onBeforeMount(async () => {
right: 50px; right: 50px;
} }
} }
// 交通事业
.jtsyBox {
width: 97%;
// background-color: skyblue;
display: flex;
flex-direction: column;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: left;
font-style: normal;
font-family: PingFangSC, PingFang SC;
img {
width: 68px;
height: 96px;
margin-right: 4px;
}
.jtsyBoxtop {
display: flex;
justify-content: space-evenly;
margin-bottom: 15px;
padding-top: 20px;
.jtsyBoxtop1 {
display: flex;
span {
font-family: TCloudNumber, TCloudNumber;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 0px 4px #12fbff;
text-align: left;
font-style: normal;
}
.jtsyname {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 2px 4px #35e0f9;
text-align: left;
font-style: normal;
position: relative;
}
.jtsyname::after {
content: "";
display: block;
width: 60px;
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
position: absolute;
bottom: -6px;
left: 0;
}
.jtsytext {
margin-top: 14px;
margin-bottom: 2px;
// width: 80px;
}
}
}
.jtsyBoxbot {
display: flex;
justify-content: space-between;
.jtsyBoxtop1 {
display: flex;
span {
font-family: TCloudNumber, TCloudNumber;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 0px 4px #12fbff;
text-align: left;
font-style: normal;
}
.jtsyname {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 2px 4px #35e0f9;
text-align: left;
font-style: normal;
position: relative;
}
.jtsyname::after {
content: "";
display: block;
width: 60px;
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
position: absolute;
bottom: -6px;
left: 0;
}
.jtsytext {
margin-top: 14px;
margin-bottom: 2px;
}
}
}
}
.table { .table {
width: 94%; width: 94%;
@ -2425,7 +2320,6 @@ onBeforeMount(async () => {
} }
} }
} }
//交通事业 //交通事业
table { table {
margin-top: 20px; margin-top: 20px;
@ -2498,4 +2392,110 @@ table {
} }
} }
} }
// 交通事业
.jtsyBox {
width: 97%;
// background-color: skyblue;
display: flex;
flex-direction: column;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: left;
font-style: normal;
font-family: PingFangSC, PingFang SC;
img {
width: 68px;
height: 96px;
margin-right: 4px;
}
.jtsyBoxtop {
display: flex;
justify-content: space-evenly;
margin-bottom: 15px;
padding-top: 20px;
.jtsyBoxtop1 {
display: flex;
span {
font-family: TCloudNumber, TCloudNumber;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 0px 4px #12fbff;
text-align: left;
font-style: normal;
}
.jtsyname {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 2px 4px #35e0f9;
text-align: left;
font-style: normal;
position: relative;
}
.jtsyname::after {
content: "";
display: block;
width: 60px;
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
position: absolute;
bottom: -6px;
left: 0;
}
.jtsytext {
margin-top: 14px;
margin-bottom: 2px;
// width: 80px;
}
}
}
.jtsyBoxbot {
display: flex;
justify-content: space-between;
.jtsyBoxtop1 {
display: flex;
span {
font-family: TCloudNumber, TCloudNumber;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 0px 4px #12fbff;
text-align: left;
font-style: normal;
}
.jtsyname {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 22px;
text-shadow: 0px 2px 4px #35e0f9;
text-align: left;
font-style: normal;
position: relative;
}
.jtsyname::after {
content: "";
display: block;
width: 60px;
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
position: absolute;
bottom: -6px;
left: 0;
}
.jtsytext {
margin-top: 14px;
margin-bottom: 2px;
}
}
}
}
</style> </style>