This commit is contained in:
duanxiaohai
parent
f7ed5595c0
commit
c2d047afd9
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: calc(100% - 36px);"></div>
|
||||
<div ref="chart" style="width: 100%; height: calc(100% - 68px)"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -9,8 +9,8 @@ import * as echarts from "echarts";
|
|||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const data = [120, 200, 150, 80, 70, 110, 130];
|
||||
const lineData = [150, 230, 224, 218, 135, 147, 260];
|
||||
const data = [120, 200, 50, 80, 70, ];
|
||||
const lineData = [150, 230, 24, 218, 135,];
|
||||
const max = data
|
||||
.concat(lineData)
|
||||
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
|
|
@ -54,12 +54,12 @@ const option = {
|
|||
top: "8%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
color: "#ffffff", //上文字标题颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
left: "6%",
|
||||
right: "9%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
color: "#ffffff",
|
||||
|
|
@ -74,7 +74,7 @@ const option = {
|
|||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -93,6 +93,7 @@ const option = {
|
|||
name: "计划生育人数",
|
||||
max: max,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
|
|
@ -100,18 +101,27 @@ const option = {
|
|||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
scale: true,
|
||||
name: "计划生育补贴金额/元",
|
||||
min: 0,
|
||||
max: max,
|
||||
name: "计划生育补贴金额/元",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
|
|
@ -120,14 +130,20 @@ const option = {
|
|||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
// max: 300,
|
||||
// position: "right",
|
||||
// boundaryGap: [0.2, 0.2]
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -141,6 +157,11 @@ const option = {
|
|||
name: "计划生育补贴金额",
|
||||
data: lineData,
|
||||
type: "line", //线状图
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const option = {
|
|||
top: "8%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -74,7 +74,7 @@ const option = {
|
|||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -95,14 +95,23 @@ const option = {
|
|||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -112,22 +121,27 @@ const option = {
|
|||
name: "上门服务次数",
|
||||
min: 0,
|
||||
max: max,
|
||||
splitLine: {
|
||||
splitLine: {//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
// max: 300,
|
||||
// position: "right",
|
||||
// boundaryGap: [0.2, 0.2]
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
|
|||
|
|
@ -86,10 +86,45 @@ let option = {
|
|||
// }
|
||||
// }
|
||||
// },
|
||||
xAxis: {},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
splitLine: {//分割线配置
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: data,
|
||||
splitLine: {//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -107,9 +107,9 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title familyPlanning"></div>
|
||||
<!-- 计划生育 -->
|
||||
<div style="width: 100%; ">
|
||||
<!-- <div style="width: 100%; "> -->
|
||||
<ylJHSY></ylJHSY>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
|
|
|
|||
Loading…
Reference in New Issue