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

gx

This commit is contained in:
姚宇浩 2024-06-03 15:17:33 +08:00
parent 681ad8afc3
commit 77cea391c8
4 changed files with 376 additions and 136 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 = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
formatter: "{b0}<br />{a1}:{c1} <br />{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)" },
],
},
},
},
{

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

@ -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}<br />{a0}:{c0} <br />{a1}:{c1} ",
formatter: "{b0}<br />{a1}:{c1} <br />{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);

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

@ -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)",
},
},
],
};
};

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

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