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

1

This commit is contained in:
姚宇浩 2024-05-23 16:39:28 +08:00
parent 5847a42d52
commit 592c5105e8
11 changed files with 400 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/view/echarts_hygiene/eP7.vue
View File

@ -127,6 +127,14 @@ data.option = {
type: "bar", type: "bar",
data: data.list, data: data.list,
barWidth: 20, barWidth: 20,
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {

8
src/view/echarts_hygiene/gxy.vue
View File

@ -94,6 +94,14 @@ const getOption = () => {
symbol: "emptyCircle", symbol: "emptyCircle",
symbolSize: 10, symbolSize: 10,
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: { itemStyle: {
borderColor: "#00FCFF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,

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

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 250px"></div> <div ref="chart" style="width: 100%; height: 260px"></div>
</template> </template>
<script setup > <script setup >
@ -122,6 +122,14 @@ const getOption = () => {
type: "bar", type: "bar",
data: data.zgffrc, data: data.zgffrc,
barWidth: "18%", barWidth: "18%",
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -140,6 +148,14 @@ const getOption = () => {
type: "bar", type: "bar",
data: data.cxffrc, data: data.cxffrc,
barWidth: "18%", barWidth: "18%",
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {

111
src/view/echarts_hygiene/pie2.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 250px"></div> <div ref="chart" style="width: 100%; height: 260px"></div>
</template> </template>
<script setup > <script setup >
@ -35,18 +35,18 @@ const getOption = () => {
}, },
legend: { legend: {
data: ["职工医疗保险金额", "城乡医疗保险金额"], data: ["职工医疗保险金额", "城乡医疗保险金额"],
top: "6%", top: "3%",
right: "11%", right: "25%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
}, },
}, },
grid: { grid: {
top: "23%", top: "25%",
left: "1%", left: "1%",
right: "10%", right: "5%",
bottom: "3%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
@ -62,23 +62,77 @@ const getOption = () => {
}, },
}, },
}, },
yAxis: { yAxis: [
type: "value", {
splitLine: { name: "职工医疗保险金额",
show: true, type: "value",
lineStyle: { nameTextStyle: {
color: "rgba(226, 226, 226, 0.3)", // 设置Y轴名称的样式
width: 1, fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
}, },
}, },
axisLabel: { {
//坐标轴刻度标签的相关设置 name: "城乡医疗保险金额",
textStyle: { type: "value",
fontSize: 16, min: 0, // 设置Y轴最小值
color: "#ffffff", max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.5) / 50) * 50;
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
}, },
}, },
}, ],
series: [ series: [
{ {
name: "背景", name: "背景",
@ -90,6 +144,7 @@ const getOption = () => {
}, },
}, },
{ {
yAxisIndex: 0,
name: "职工医疗保险金额", name: "职工医疗保险金额",
type: "line", type: "line",
symbol: "emptyCircle", symbol: "emptyCircle",
@ -100,9 +155,18 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, },
label: {
show: true,
color: "#ffffff",
position: "top",
formatter: function (data) {
return data.value;
},
},
data: data.zgffje, data: data.zgffje,
}, },
{ {
yAxisIndex: 1,
name: "城乡医疗保险金额", name: "城乡医疗保险金额",
type: "line", type: "line",
symbol: "emptyCircle", symbol: "emptyCircle",
@ -113,7 +177,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#2468FF",
}, },
label: {
show: true,
color: "#ffffff",
position: "bottom",
formatter: function (data) {
return data.value;
},
},
data: data.cxffje, data: data.cxffje,
}, },
], ],

9
src/view/echarts_hygiene/tnb.vue
View File

@ -99,7 +99,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#E8FF00", color: "#E8FF00",
}, },
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
areaStyle: { areaStyle: {
color: "#F4F65B", color: "#F4F65B",
normal: { normal: {

27
src/view/echarts_yl/eP2.vue
View File

@ -55,7 +55,7 @@ const getOption = () => {
}, },
}, },
grid: { grid: {
top:'25%', top: "25%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "3%", bottom: "3%",
@ -85,6 +85,11 @@ const getOption = () => {
width: 1, width: 1,
}, },
}, },
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
},
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20 fontSize: 14, // 这里设置字体大小为20
@ -117,6 +122,11 @@ const getOption = () => {
fontSize: 16, fontSize: 16,
width: 1, width: 1,
}, },
},
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
}, },
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
@ -163,6 +173,13 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#E8FF00", color: "#E8FF00",
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list1, data: data.list1,
}, },
@ -178,7 +195,13 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#2468FF",
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list2, data: data.list2,
}, },
], ],

25
src/view/echarts_yl/eP2_2.vue
View File

@ -55,7 +55,7 @@ const getOption = () => {
}, },
}, },
grid: { grid: {
top:'25%', top: "25%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "0%", bottom: "0%",
@ -118,6 +118,11 @@ const getOption = () => {
{ {
name: "99以上补贴金额", name: "99以上补贴金额",
type: "value", type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.5) / 50) * 50;
},
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20 fontSize: 14, // 这里设置字体大小为20
@ -171,7 +176,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#E8FF00", color: "#E8FF00",
}, },
label: {
show: true,
color: "#ffffff",
position: "top",
formatter: function (data) {
return data.value;
},
},
data: data.list1, data: data.list1,
}, },
{ {
@ -187,7 +199,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#2468FF",
}, },
label: {
show: true,
color: "#ffffff",
position: "bottom",
formatter: function (data) {
return data.value;
},
},
data: data.list2, data: data.list2,
}, },
], ],

26
src/view/echarts_yl/eP3.vue
View File

@ -55,7 +55,7 @@ const getOption = () => {
}, },
}, },
grid: { grid: {
top:'25%', top: "25%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "3%", bottom: "3%",
@ -78,6 +78,11 @@ const getOption = () => {
{ {
name: "特困发放人次", name: "特困发放人次",
type: "value", type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50;
},
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20 fontSize: 14, // 这里设置字体大小为20
@ -111,6 +116,11 @@ const getOption = () => {
{ {
name: "低保发放人次", name: "低保发放人次",
type: "value", type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50;
},
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20 fontSize: 14, // 这里设置字体大小为20
@ -164,6 +174,13 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list1, data: data.list1,
}, },
{ {
@ -178,6 +195,13 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#2468FF",
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list2, data: data.list2,
}, },
], ],

280
src/view/echarts_yl/eP3_2.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div ref="chart" style="width: 100%;height:285px;"></div> <div ref="chart" style="width: 100%; height: 285px"></div>
</template> </template>
<script setup > <script setup >
import { onBeforeMount, reactive, ref,defineProps } from "vue"; import { onBeforeMount, reactive, ref, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -34,168 +34,182 @@ const data = reactive({
list1: [], list1: [],
list2: [], list2: [],
year: [], year: [],
option: {} option: {},
}) });
const getOption = () =>{ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
legend: {
top: "5%",
right: "11%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { top: "5%",
top:'25%', right: "11%",
left: "1%", textStyle: {
right: "10%", fontSize: 16,
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", color: "#ffffff",
fontSize: 16,
}, },
}, },
grid: {
], top: "25%",
left: "1%",
yAxis: [ right: "10%",
{ bottom: "5%",
type: "value", containLabel: true,
splitLine: { },
show: true, calculable: true,
lineStyle: { xAxis: [
color: "rgba(226, 226, 226, 0.3)", {
width: 1, type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
}, },
data: data.year,
}, },
axisLabel: { {
//坐标轴刻度标签的相关设置 axisTick: false,
textStyle: { type: "category",
data: data.year,
axisLabel: {
show: false,
color: "#ffffff", color: "#ffffff",
fontSize: 16, 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,
},
},
], yAxis: [
series: [ {
{ type: "value",
name: "特困补助金额", splitLine: {
type: "bar", show: true,
data: data.list1, lineStyle: {
barWidth: "18%", color: "rgba(226, 226, 226, 0.3)",
itemStyle: { width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(162, 187, 255, 1)",
}, },
{ },
offset: 1, axisLabel: {
color: "rgba(162, 187, 255, 0.20)", //坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
}, },
]), },
}, },
}, {
{ type: "value",
name: "低保补助金额", min: 0,
type: "bar", max: 100,
data: data.list2, splitLine: {
barWidth: "18%", show: false,
itemStyle: { lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ type: "solid",
{ color: "rgb(221, 242, 255,0.3)",
offset: 0,
color: "rgba(23, 237, 255, 1)",
}, },
{ },
offset: 1, axisLine: {
color: "rgba(23, 237, 255, 0.20)", show: false,
lineStyle: {
type: "dotted",
}, },
]), },
axisLabel: {
show: false,
fontSize: 16,
color: "#DEF1FF",
fontFamily: "MicrosoftYaHei",
lineHeight: 19,
},
}, },
}, ],
{ series: [
type: "bar", {
xAxisIndex: 1, name: "特困补助金额",
yAxisIndex: 1, type: "bar",
itemStyle: { data: data.list1,
color: "rgba(221, 242, 255, 0.1)", 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;
},
},
}, },
data: data.year.map(() => 100), {
barWidth: 50, 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 setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
} };
// 使用生命钩子 // 使用生命钩子
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list1 = props.list1 data.list1 = props.list1;
data.list2 = props.list2 data.list2 = props.list2;
data.year = props.year data.year = props.year;
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>

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

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height:260px;"></div> <div ref="chart" style="width: 100%; height: 260px"></div>
</template> </template>
<script setup> <script setup>
@ -34,8 +34,8 @@ const data = reactive({
list1: [], list1: [],
list2: [], list2: [],
year: [], year: [],
option: {} option: {},
}) });
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
@ -139,6 +139,14 @@ const getOption = () => {
}, },
]), ]),
}, },
label: {
show: true,
position:'top',
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
{ {
name: "城乡养老保险发放人次", name: "城乡养老保险发放人次",
@ -157,6 +165,14 @@ const getOption = () => {
}, },
]), ]),
}, },
label: {
show: true,
position:'top',
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
{ {
type: "bar", type: "bar",
@ -170,24 +186,24 @@ const getOption = () => {
}, },
], ],
}; };
} };
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
} };
// 使用生命钩子 // 使用生命钩子
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list1 = props.list1 data.list1 = props.list1;
data.list2 = props.list2 data.list2 = props.list2;
data.year = props.year data.year = props.year;
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>

24
src/view/echarts_yl/pie2.vue
View File

@ -53,7 +53,7 @@ const getOption = () => {
}, },
}, },
grid: { grid: {
top:'25%', top: "25%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "0%", bottom: "0%",
@ -109,6 +109,11 @@ const getOption = () => {
{ {
name: "城乡养老保险金额", name: "城乡养老保险金额",
type: "value", type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.4) / 50) * 50;
},
nameTextStyle: { nameTextStyle: {
// 设置Y轴名称的样式 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20 fontSize: 14, // 这里设置字体大小为20
@ -162,6 +167,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, },
label: {
show: true,
color: "#ffffff",
position: "bottom",
formatter: function (data) {
return data.value;
},
},
data: data.list1, data: data.list1,
}, },
{ {
@ -176,7 +189,14 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#2468FF",
}, },
label: {
show: true,
color: "#ffffff",
position: "bottom",
formatter: function (data) {
return data.value;
},
},
data: data.list2, data: data.list2,
}, },
], ],