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

1

This commit is contained in:
姚宇浩 2024-05-23 11:05:35 +08:00
parent 5519b60e79
commit abbb6c1012
8 changed files with 527 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/view/echarts_hygiene/eP5.vue
View File

@ -84,6 +84,9 @@ const getOption = () => {
{ {
name: "在册数", name: "在册数",
type: "value", type: "value",
nameTextStyle: { // 设置Y轴名称的样式
fontSize: 14 // 这里设置字体大小为20
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {

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

@ -66,6 +66,9 @@ data.option = {
{ {
name: "历年体检人数", name: "历年体检人数",
type: "value", type: "value",
nameTextStyle: { // 设置Y轴名称的样式
fontSize: 14 // 这里设置字体大小为20
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {

237
src/view/echarts_yl/eP2.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,102 +35,155 @@ const data = reactive({
list2: [], list2: [],
year: [], year: [],
option: {}, option: {},
bg:[], bg: [],
}) });
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}", formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
},
legend: {
data: [ "90-98补贴人次", "99以上补贴人次"],
top: "8%",
right: "15%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { data: ["90-98补贴人次", "99以上补贴人次"],
left: "1%", top: "5%",
right: "10%", right: "25%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: data.year,
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: { textStyle: {
fontSize: 16,
color: "#ffffff", color: "#ffffff",
fontSize: 16,
}, },
}, },
}, grid: {
yAxis: { top:'25%',
type: "value", left: "1%",
splitLine: { right: "10%",
show: true, bottom: "3%",
lineStyle: { containLabel: true,
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
}, },
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "90-98补贴人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10, xAxis: {
itemStyle: { type: "category",
borderColor: "#E8FF00", data: data.year,
borderWidth: 1, axisLabel: {
color: "#E8FF00", //坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
}, },
data: data.list1,
}, },
{ yAxis: [
name: "99以上补贴人次", {
type: "line", type: "value",
symbol: "emptyCircle", name: "90-98补贴人次",
splitLine: {
symbolSize: 10, show: true,
itemStyle: { lineStyle: {
borderColor: "#2468FF", color: "rgba(255, 255, 255, 0.2)",
borderWidth: 1, fontSize: 16,
color: "#2468FF", width: 1,
},
},
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
}, },
{
type: "value",
name: "99以上补贴人次",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
data: data.list2, series: [
}, {
], name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "90-98补贴人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
data: data.list1,
},
{
yAxisIndex: 1,
name: "99以上补贴人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: data.list2,
},
],
};
}; };
}
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
@ -138,21 +191,21 @@ const setChart = () => {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
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;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>

112
src/view/echarts_yl/eP2_2.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,8 +35,8 @@ const data = reactive({
list2: [], list2: [],
year: [], year: [],
option: {}, option: {},
bg:[], bg: [],
}) });
const getOption = () => { const getOption = () => {
data.option = { data.option = {
@ -47,17 +47,18 @@ const getOption = () => {
}, },
legend: { legend: {
data: ["90-98补贴金额", "99以上补贴金额"], data: ["90-98补贴金额", "99以上补贴金额"],
top: "8%", top: "3%",
right: "15%", right: "25%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
}, },
}, },
grid: { grid: {
top:'25%',
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "3%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
@ -81,23 +82,72 @@ const getOption = () => {
}, },
}, },
}, },
yAxis: { yAxis: [
type: "value", {
splitLine: { name: "90-98补贴金额",
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: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
}, },
}, },
axisLabel: { {
//坐标轴刻度标签的相关设置 name: "99以上补贴金额",
textStyle: { type: "value",
color: "#ffffff", nameTextStyle: {
fontSize: 16, // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
}, },
}, },
}, ],
series: [ series: [
{ {
name: "背景", name: "背景",
@ -110,6 +160,7 @@ const getOption = () => {
}, },
}, },
{ {
yAxisIndex: 0,
name: "90-98补贴金额", name: "90-98补贴金额",
type: "line", type: "line",
symbol: "emptyCircle", symbol: "emptyCircle",
@ -124,6 +175,7 @@ const getOption = () => {
data: data.list1, data: data.list1,
}, },
{ {
yAxisIndex: 1,
name: "99以上补贴金额", name: "99以上补贴金额",
type: "line", type: "line",
stack: "Total", stack: "Total",
@ -140,7 +192,7 @@ const getOption = () => {
}, },
], ],
}; };
} };
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
@ -148,21 +200,21 @@ const setChart = () => {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
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;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>

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

@ -1,9 +1,9 @@
<template> <template>
<div ref="chart" style="width: 100%;height:280px;"></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";
@ -35,121 +35,174 @@ const data = reactive({
list2: [], list2: [],
year: [], year: [],
option: {}, option: {},
bg:[], bg: [],
}) });
const getOption = () =>{ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ", formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
legend: {
data: ["特困发放人次", "低保发放人次"],
top: "8%",
right: "11%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { data: ["特困发放人次", "低保发放人次"],
left: "1%", top: "5%",
right: "10%", right: "28%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: { textStyle: {
fontSize: 16,
color: "#ffffff", color: "#ffffff",
fontSize: 16,
}, },
}, },
}, grid: {
yAxis: { top:'25%',
type: "value", left: "1%",
splitLine: { right: "10%",
show: true, bottom: "3%",
lineStyle: { containLabel: true,
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
}, },
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "特困发放人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10, xAxis: {
itemStyle: { type: "category",
borderColor: "#00FCFF", // boundaryGap: false,
borderWidth: 1, data: data.year,
color: "#00FCFF", axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
}, },
data: data.list1,
}, },
{ yAxis: [
name: "低保发放人次", {
type: "line", name: "特困发放人次",
symbol: "emptyCircle", type: "value",
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: true,
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",
},
},
},
{
name: "低保发放人次",
type: "value",
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.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "特困发放人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
borderColor: "#2468FF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,
color: "#2468FF", color: "#00FCFF",
},
data: data.list1,
}, },
data: data.list2, {
}, yAxisIndex: 1,
], name: "低保发放人次",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: data.list2,
},
],
};
}; };
}
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;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>

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

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%;height:280px;"></div> <div ref="chart" style="width: 100%;height:285px;"></div>
</template> </template>
<script setup > <script setup >
@ -52,6 +52,7 @@ const getOption = () =>{
}, },
}, },
grid: { grid: {
top:'25%',
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "5%", bottom: "5%",

2
src/view/echarts_yl/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>

237
src/view/echarts_yl/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 >
@ -34,121 +34,174 @@ const data = reactive({
list2: [], list2: [],
year: [], year: [],
option: {}, option: {},
bg:[], bg: [],
}) });
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ", formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
legend: {
data: ["职工养老保险金额", "城乡养老保险金额"],
top: "8%",
right: "11%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { data: ["职工养老保险金额", "城乡养老保险金额"],
left: "1%", top: "3%",
right: "10%", right: "25%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: { textStyle: {
fontSize: 16,
color: "#ffffff", color: "#ffffff",
fontSize: 16,
}, },
}, },
}, grid: {
yAxis: { top:'25%',
type: "value", left: "1%",
splitLine: { right: "10%",
show: true, bottom: "0%",
lineStyle: { containLabel: true,
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
}, },
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "职工养老保险金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10, xAxis: {
itemStyle: { type: "category",
borderColor: "#00FCFF", // boundaryGap: false,
borderWidth: 1, data: data.year,
color: "#00FCFF", axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
}, },
data: data.list1,
}, },
{ yAxis: [
name: "城乡养老保险金额", {
type: "line", name: "职工养老保险金额",
symbol: "emptyCircle", type: "value",
nameTextStyle: {
symbolSize: 10, // 设置Y轴名称的样式
itemStyle: { fontSize: 14, // 这里设置字体大小为20
borderColor: "#2468FF", },
borderWidth: 1, splitLine: {
color: "#2468FF", show: true,
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",
},
},
}, },
{
name: "城乡养老保险金额",
type: "value",
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.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "职工养老保险金额",
type: "line",
symbol: "emptyCircle",
data: data.list2, symbolSize: 10,
}, itemStyle: {
], borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
data: data.list1,
},
{
yAxisIndex: 1,
name: "城乡养老保险金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: data.list2,
},
],
};
}; };
}
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;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>