Merge branch 'main' of git.zdool.com:xs/ggfwjsc
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 113 KiB |
Before Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 114 KiB |
Before Width: | Height: | Size: 97 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 114 KiB |
Before Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 103 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 116 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 115 KiB |
Before Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 99 KiB |
|
@ -157,6 +157,14 @@ const option = {
|
|||
data: data,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
},
|
||||
// {
|
||||
// // name: "上门服务次数",
|
||||
|
|
|
@ -136,6 +136,14 @@ const getOption = () => {
|
|||
type: "bar",
|
||||
data: data.list[1],
|
||||
barWidth: "18%",
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
@ -154,6 +162,14 @@ const getOption = () => {
|
|||
type: "bar",
|
||||
data: data.list[0],
|
||||
barWidth: "18%",
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
|
@ -127,6 +127,14 @@ data.option = {
|
|||
type: "bar",
|
||||
data: data.list,
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position:'top',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
|
|
|
@ -94,6 +94,14 @@ const getOption = () => {
|
|||
symbol: "emptyCircle",
|
||||
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position:'top',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 250px"></div>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
|
@ -122,6 +122,14 @@ const getOption = () => {
|
|||
type: "bar",
|
||||
data: data.zgffrc,
|
||||
barWidth: "18%",
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position:'top',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
@ -140,6 +148,14 @@ const getOption = () => {
|
|||
type: "bar",
|
||||
data: data.cxffrc,
|
||||
barWidth: "18%",
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position:'top',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 250px"></div>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
|
@ -35,18 +35,18 @@ const getOption = () => {
|
|||
},
|
||||
legend: {
|
||||
data: ["职工医疗保险金额", "城乡医疗保险金额"],
|
||||
top: "6%",
|
||||
right: "11%",
|
||||
top: "3%",
|
||||
right: "25%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "23%",
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
|
@ -62,8 +62,14 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
yAxis: [
|
||||
{
|
||||
name: "职工医疗保险金额",
|
||||
type: "value",
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
@ -78,7 +84,55 @@ const getOption = () => {
|
|||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "城乡医疗保险金额",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
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: [
|
||||
{
|
||||
name: "背景",
|
||||
|
@ -90,6 +144,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: "职工医疗保险金额",
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
|
@ -100,9 +155,18 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.zgffje,
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: "城乡医疗保险金额",
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
|
@ -113,7 +177,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "bottom",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.cxffje,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -99,7 +99,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#E8FF00",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position:'top',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F4F65B",
|
||||
normal: {
|
||||
|
|
|
@ -158,6 +158,14 @@ const option = {
|
|||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
|
@ -170,6 +178,14 @@ const option = {
|
|||
data: data,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
position:'insideTop',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
|
@ -184,6 +184,14 @@ const option = {
|
|||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
|
@ -196,6 +204,14 @@ const option = {
|
|||
data: data,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
position:'insideTop',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
|
@ -188,6 +188,7 @@ const option = {
|
|||
symbolOffset: [0, 1], // 左 上
|
||||
z: 12,
|
||||
symbol: "circle", // 图形形状为圆
|
||||
|
||||
itemStyle: {
|
||||
color: "rgba(38, 191, 254, 1)",
|
||||
// color: "red",
|
||||
|
@ -203,6 +204,14 @@ const option = {
|
|||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
color: "rgba(36, 104, 255, 1)",
|
||||
|
@ -216,6 +225,14 @@ const option = {
|
|||
data: data,
|
||||
barWidth: 30,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
position:'insideTop',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
// borderColor: "#00FCFF",
|
||||
// borderWidth: 1,
|
||||
|
|
|
@ -55,7 +55,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top:'25%',
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
|
@ -85,6 +85,11 @@ const getOption = () => {
|
|||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
|
@ -117,6 +122,11 @@ const getOption = () => {
|
|||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
|
@ -163,6 +173,13 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#E8FF00",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
|
||||
data: data.list1,
|
||||
},
|
||||
|
@ -178,7 +195,13 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list2,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -55,7 +55,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top:'25%',
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
|
@ -118,6 +118,11 @@ const getOption = () => {
|
|||
{
|
||||
name: "99以上补贴金额",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.5) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
|
@ -171,7 +176,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#E8FF00",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
{
|
||||
|
@ -187,7 +199,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "bottom",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list2,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -55,7 +55,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top:'25%',
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
|
@ -78,6 +78,11 @@ const getOption = () => {
|
|||
{
|
||||
name: "特困发放人次",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
|
@ -111,6 +116,11 @@ const getOption = () => {
|
|||
{
|
||||
name: "低保发放人次",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
|
@ -164,6 +174,13 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
{
|
||||
|
@ -178,6 +195,13 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list2,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%;height:285px;"></div>
|
||||
<div ref="chart" style="width: 100%; height: 285px"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
|
@ -34,8 +34,8 @@ const data = reactive({
|
|||
list1: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {}
|
||||
})
|
||||
option: {},
|
||||
});
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
|
@ -52,7 +52,7 @@ const getOption = () =>{
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top:'25%',
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "5%",
|
||||
|
@ -81,7 +81,6 @@ const getOption = () =>{
|
|||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
|
@ -110,7 +109,7 @@ const getOption = () =>{
|
|||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.3)"
|
||||
color: "rgb(221, 242, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
|
@ -127,7 +126,6 @@ const getOption = () =>{
|
|||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
@ -147,6 +145,14 @@ const getOption = () =>{
|
|||
},
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "低保补助金额",
|
||||
|
@ -165,6 +171,14 @@ const getOption = () =>{
|
|||
},
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
|
@ -178,24 +192,24 @@ const getOption = () =>{
|
|||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
const setChart = () => {
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
}
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list1 = props.list1
|
||||
data.list2 = props.list2
|
||||
data.year = props.year
|
||||
getOption()
|
||||
setChart()
|
||||
}, 600)
|
||||
data.list1 = props.list1;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height:260px;"></div>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
@ -34,8 +34,8 @@ const data = reactive({
|
|||
list1: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {}
|
||||
})
|
||||
option: {},
|
||||
});
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
|
@ -139,6 +139,14 @@ const getOption = () => {
|
|||
},
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position:'top',
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "城乡养老保险发放人次",
|
||||
|
@ -157,6 +165,14 @@ const getOption = () => {
|
|||
},
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position:'top',
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
|
@ -170,24 +186,24 @@ const getOption = () => {
|
|||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
const setChart = () => {
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
}
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list1 = props.list1
|
||||
data.list2 = props.list2
|
||||
data.year = props.year
|
||||
getOption()
|
||||
setChart()
|
||||
}, 600)
|
||||
data.list1 = props.list1;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -53,7 +53,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top:'25%',
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
|
@ -109,6 +109,11 @@ const getOption = () => {
|
|||
{
|
||||
name: "城乡养老保险金额",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值,确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.4) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
|
@ -162,6 +167,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "bottom",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
{
|
||||
|
@ -176,7 +189,14 @@ const getOption = () => {
|
|||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "bottom",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list2,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -572,25 +572,25 @@ onMounted(() => {
|
|||
|
||||
.left_1 {
|
||||
// background-image: url(@/assets/eduImg/title1.png);
|
||||
background-image: url(@/assets/eduImg/title5.png);
|
||||
background-image: url(@/assets/images/education/new_xsqk.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_2 {
|
||||
background-image: url(@/assets/eduImg/title2.png);
|
||||
background-image: url(@/assets/images/education/new_cpfx.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
background-image: url(@/assets/eduImg/title3.png);
|
||||
background-image: url(@/assets/images/education/new_xxgk.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right_1 {
|
||||
background-image: url(@/assets/eduImg/title4.png);
|
||||
background-image: url(@/assets/images/education/new_csr.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
@ -102,7 +102,6 @@
|
|||
</div>
|
||||
<div class="flex1" style="margin-top: 20px">
|
||||
<div class="yd_title familyPlanning"></div>
|
||||
<!-- 计划生育 -->
|
||||
<!-- <div style="width: 100%; "> -->
|
||||
<eP5 :list="data.jsbgl"></eP5>
|
||||
<!-- </div> -->
|
||||
|
@ -287,24 +286,24 @@ const getData = async () => {
|
|||
|
||||
.familyPlanning {
|
||||
width: 96%;
|
||||
background-image: url(@/assets/images/hygiene/center_title_2.png);
|
||||
background-image: url(@/assets/images/hygiene/new_zcs.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.mechanism {
|
||||
background-image: url(@/assets/images/hygiene/xtgl.png);
|
||||
background-image: url(@/assets/images/hygiene/new_fygl.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.service {
|
||||
background-image: url(@/assets/images/hygiene/right_title_2.png);
|
||||
background-image: url(@/assets/images/hygiene/new_tjrs.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.last {
|
||||
background-image: url(@/assets/images/hygiene/right_title_3.png);
|
||||
background-image: url(@/assets/images/hygiene/new_jkhd.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -371,7 +370,7 @@ const getData = async () => {
|
|||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/images/hygiene/left_title_1.png);
|
||||
background-image: url(@/assets/images/hygiene/new_ylbx.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -383,20 +382,20 @@ const getData = async () => {
|
|||
}
|
||||
|
||||
.left_3 {
|
||||
background-image: url(@/assets/images/hygiene/right_title_1.png);
|
||||
background-image: url(@/assets/images/hygiene/new_lmb.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
width: 96%;
|
||||
background-image: url(@/assets/images/hygiene/center_title_1.png);
|
||||
background-image: url(@/assets/images/hygiene/new_jkda.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_2 {
|
||||
width: 96%;
|
||||
background-image: url(@/assets/images/hygiene/new_center.png);
|
||||
background-image: url(@/assets/images/hygiene/new_mz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
@ -103,7 +103,7 @@
|
|||
<span class="span1">{{ jysyList[0].title }}</span>学校师生比
|
||||
</div>
|
||||
<div class="right">
|
||||
{{ jysyList[0].teacher }}:{{ jysyList[0].student }}
|
||||
<span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item_xia">
|
||||
|
@ -926,25 +926,25 @@ onBeforeMount(async () => {
|
|||
}
|
||||
|
||||
.mechanism {
|
||||
background-image: url(@/assets/images/sy/right_1.png);
|
||||
background-image: url(@/assets/images/sy/new_ylws.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.service {
|
||||
background-image: url(@/assets/images/sy/right_2.png);
|
||||
background-image: url(@/assets/images/sy/new_whsy.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.last {
|
||||
background-image: url(@/assets/images/sy/right_3.png);
|
||||
background-image: url(@/assets/images/sy/new_tysy.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.last_1 {
|
||||
background-image: url(@/assets/images/sy/right_4.png);
|
||||
background-image: url(@/assets/images/sy/new_jtsy.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -1015,19 +1015,19 @@ onBeforeMount(async () => {
|
|||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/images/sy/left_1.png);
|
||||
background-image: url(@/assets/images/sy/new_msfz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_2 {
|
||||
background-image: url(@/assets/images/sy/left_2.png);
|
||||
background-image: url(@/assets/images/sy/new_jysy.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_3 {
|
||||
background-image: url(@/assets/images/sy/left_3.png);
|
||||
background-image: url(@/assets/images/sy/new_jyfw.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -1227,8 +1227,8 @@ onBeforeMount(async () => {
|
|||
|
||||
.left_1_1 {
|
||||
width: 551px;
|
||||
height: 25px;
|
||||
background-image: url(@/assets/images/sy/left_1_1.png);
|
||||
height: 30px;
|
||||
background-image: url(@/assets/images/sy/new_jzfw.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -1378,6 +1378,7 @@ onBeforeMount(async () => {
|
|||
&_item {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
padding-bottom: 10px;
|
||||
width: 267px;
|
||||
height: 74px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
@ -1419,28 +1420,32 @@ onBeforeMount(async () => {
|
|||
&_xia {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.77);
|
||||
height: 8px;
|
||||
// border: 1px solid rgba(255, 255, 255, 0.77);
|
||||
background-color: #27628d;
|
||||
position: relative;
|
||||
|
||||
border-radius: 8px;
|
||||
.csbl {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
width: calc(var(--teacher) / var(--total) * 100%);
|
||||
border-radius: 3px;
|
||||
border: 3px solid #00f5ff;
|
||||
height: 8px;
|
||||
background-color: #00f5ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ncbl {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
width: calc(var(--teacher) / var(--total) * 100%);
|
||||
border-radius: 3px;
|
||||
border: 3px solid #ffd863;
|
||||
height: 8px;
|
||||
background-color: #ffd863;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
&_xia:nth-child(2){
|
||||
background-color: #475e73;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 22px;
|
||||
|
|
|
@ -370,12 +370,12 @@ onBeforeMount(() => {
|
|||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/images/work/left_1.png);
|
||||
background-image: url(@/assets/images/work/new_zxjz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left_1_1 {
|
||||
background-image: url(@/assets/images/work/left_1_1.png);
|
||||
background-image: url(@/assets/images/work/new_qtjz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -387,24 +387,24 @@ onBeforeMount(() => {
|
|||
}
|
||||
|
||||
.center_0 {
|
||||
background-image: url(@/assets/images/work/center1.png);
|
||||
background-image: url(@/assets/images/work/new_jzgk.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
background-image: url(@/assets/images/work/center.png);
|
||||
background-image: url(@/assets/images/work/new_shljz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right_1 {
|
||||
background-image: url(@/assets/images/work/right_1.png);
|
||||
background-image: url(@/assets/images/work/new_rsqt.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.right_2 {
|
||||
background-image: url(@/assets/images/work/right_2.png);
|
||||
background-image: url(@/assets/images/work/new_dyh.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
@ -385,19 +385,19 @@ const getData = async () => {
|
|||
}
|
||||
|
||||
.familyPlanning {
|
||||
background-image: url(@/assets/YLTitle/titleImg9.png);
|
||||
background-image: url(@/assets/images/yl/new_jhsy.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.mechanism {
|
||||
background-image: url(@/assets/YLTitle/titleImg10.png);
|
||||
background-image: url(@/assets/images/yl/new_yljg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.service {
|
||||
background-image: url(@/assets/YLTitle/titleImg11.png);
|
||||
background-image: url(@/assets/images/yl/new_zlfw.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
@ -468,25 +468,25 @@ const getData = async () => {
|
|||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/images/ylbx.png);
|
||||
background-image: url(@/assets/images/yl/new_ylbx.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_2 {
|
||||
background-image: url(@/assets/images/gllrbt.png);
|
||||
background-image: url(@/assets/images/yl/new_gllrbt.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_3 {
|
||||
background-image: url(@/assets/images/tkjz.png);
|
||||
background-image: url(@/assets/images/yl/new_tklrjz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
background-image: url(@/assets/YLTitle/titleImg8.png);
|
||||
background-image: url(@/assets/images/yl/new_lnrzb.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|