This commit is contained in:
duanxiaohai
parent
b6657cbe1a
commit
f5ce5856bd
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 350px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: "{b0}<br />{a1}:{c1}<br /> ",
|
||||
},
|
||||
// legend: {
|
||||
// data: ["糖尿病人数", "高血压人数"],
|
||||
// top: "6%",
|
||||
// right: "11%",
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// color: "#ffffff",
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
// boundaryGap: false,
|
||||
data: data.year,
|
||||
// splitArea: {
|
||||
// show: true,
|
||||
// interval: '10',
|
||||
// areaStyle: {
|
||||
// color: ["rgba(255, 255, 255, 0.10)"],
|
||||
// width:10,
|
||||
// },
|
||||
// },
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
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",
|
||||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
smooth: true,
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#E8FF00",
|
||||
borderWidth: 1,
|
||||
color: "#E8FF00",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F4F65B",
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
// color: 'RGBA(184, 204, 241, 1)'
|
||||
color: "rgba(255, 234, 90, 0.50)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 234, 90, 0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
},
|
||||
// {
|
||||
// name: "高血压人数",
|
||||
// type: "line",
|
||||
// stack: "Total",
|
||||
// symbol: "emptyCircle",
|
||||
// smooth: true,
|
||||
// symbolSize: 10,
|
||||
// itemStyle: {
|
||||
// borderColor: "#00FCFF",
|
||||
// borderWidth: 1,
|
||||
// color: "#00FCFF",
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: "#ffffff",
|
||||
// position: "top",
|
||||
// formatter: function (data) {
|
||||
// return data.value;
|
||||
// },
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: "#F4F65B",
|
||||
// normal: {
|
||||
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
// color: new echarts.graphic.LinearGradient(
|
||||
// 0,
|
||||
// 0,
|
||||
// 0,
|
||||
// 1,
|
||||
// [
|
||||
// {
|
||||
// offset: 0,
|
||||
// // color: 'RGBA(184, 204, 241, 1)'
|
||||
// color: "rgba(0, 252, 255, 0.50)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0, 252, 255, 0)",
|
||||
// },
|
||||
// ],
|
||||
// false
|
||||
// ),
|
||||
// shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
// },
|
||||
// },
|
||||
// data: data.list2,
|
||||
// },
|
||||
],
|
||||
};
|
||||
};
|
||||
watch(
|
||||
() => props.list,
|
||||
(newValue, oldValue) => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
}
|
||||
);
|
||||
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
console.log(data.bg);
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 330px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
//职称结构取数
|
||||
|
||||
var rich = {
|
||||
name: {
|
||||
color: "#666666",
|
||||
fontSize: 14,
|
||||
padding: [8, 30, 0, 30],
|
||||
fontWeight: "400",
|
||||
align: "left",
|
||||
},
|
||||
value: {
|
||||
color: "#333",
|
||||
fontSize: 15,
|
||||
padding: [0, 30, 8, 30],
|
||||
fontWeight: "500",
|
||||
align: "left",
|
||||
},
|
||||
percent: {
|
||||
color: "#FFF",
|
||||
align: "right",
|
||||
fontSize: 15,
|
||||
fontWeight: "500",
|
||||
//padding: [0, 5]
|
||||
},
|
||||
hr: {
|
||||
borderColor: "#DFDFDF",
|
||||
width: "100%",
|
||||
borderWidth: 1,
|
||||
height: 0,
|
||||
},
|
||||
cir: {
|
||||
fontSize: 26,
|
||||
},
|
||||
};
|
||||
var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
legend: {
|
||||
show: true,
|
||||
width: "80%",
|
||||
top: "5%",
|
||||
textStyle: {
|
||||
inside: true,
|
||||
color: "#9FC3E7",
|
||||
padding: [14, 0, 10, 0],
|
||||
align: "left",
|
||||
verticalAlign: "center",
|
||||
fontSize: 14,
|
||||
rich: {},
|
||||
},
|
||||
// icon: "rect",
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
// bottom: '15%'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "pie",
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
|
||||
label: {
|
||||
// 显示标签
|
||||
show: true,
|
||||
// 标签位置
|
||||
position: "outside",
|
||||
// 标签对齐方式
|
||||
// alignTo: "labelLine",
|
||||
// 背景颜色
|
||||
backgroundColor: "transparent",
|
||||
// 高度
|
||||
height: 0,
|
||||
// 宽度
|
||||
width: 0,
|
||||
// 行高
|
||||
lineHeight: 0,
|
||||
// 标签距离标签线的距离
|
||||
distanceToLabelLine: 0,
|
||||
// 边框圆角
|
||||
borderRadius: 3,
|
||||
// 边框宽度
|
||||
borderWidth: 1,
|
||||
// 边框颜色
|
||||
borderColor: "auto",
|
||||
// 内边距
|
||||
padding: [3, -3, 3, -3],
|
||||
// 标签格式化
|
||||
formatter: function (params) {
|
||||
return `{b|${params.value}%}{a|${params.name}}`;
|
||||
},
|
||||
// 富文本样式
|
||||
rich: {
|
||||
// a样式
|
||||
a: {
|
||||
// 内边距
|
||||
padding: [-14, 10, 40, -70],
|
||||
// 字体大小
|
||||
fontSize: "12px",
|
||||
// 字体
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
// 字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
// b样式
|
||||
b: {
|
||||
// 内边距
|
||||
padding: [0, 10, 55, -70],
|
||||
// 字体大小
|
||||
fontSize: "15px",
|
||||
// 字体
|
||||
fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
|
||||
// 字体粗细
|
||||
fontWeight: "bold",
|
||||
// 字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// textStyle: {
|
||||
// color: "white", // 改变标示文字的颜色
|
||||
// fontSize: 18, //文字大小
|
||||
// },
|
||||
// formatter: "{b}:{c}" + "个\n\n",
|
||||
// borderWidth: 20,
|
||||
// borderRadius: 4,
|
||||
// padding: [0, -80],
|
||||
// },
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 40, // 改变标示线的长度
|
||||
length2: 40,
|
||||
// lineStyle: {
|
||||
// color: "white", // 改变标示线的颜色
|
||||
// },
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: "男", value: 300 },
|
||||
{ name: "女", value: 200 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
type: "pie",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ["50%", "50%"], //这里跟上面那组一样即可
|
||||
radius: ["52%", "52%"], //这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
|
||||
label: {
|
||||
normal: {
|
||||
show: false, //重点：此处主要是为了不展示data中的value和name
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 1, //此处的值无所谓是多少
|
||||
name: "", //因为不展示label，可不填
|
||||
itemStyle: {
|
||||
//边框样式，此处我们设置的浅蓝色，颜色可自行修改
|
||||
normal: {
|
||||
borderWidth: 20, //边框宽度
|
||||
// borderColor: colorList, //边框颜色
|
||||
borderColor: "rgba(94, 183, 249, 0.13)", //边框颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,620 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const emit = defineEmits(["shuju"]);
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const colors = [
|
||||
{
|
||||
left: "rgba(234, 162, 57, .16)",
|
||||
right: "rgba(234, 162, 57, .6)",
|
||||
top: "rgba(234, 162, 57, 1)",
|
||||
bottom: "rgba(234, 162, 57, .46)",
|
||||
front: "rgba(234, 162, 57, .66)",
|
||||
},
|
||||
{
|
||||
left: "rgba(14, 252, 255, .16)",
|
||||
right: "rgba(14, 252, 255, .6)",
|
||||
top: "rgba(14, 252, 255, 1)",
|
||||
bottom: "rgba(14, 252, 255, .46)",
|
||||
front: "rgba(14, 252, 255, .66)",
|
||||
},
|
||||
];
|
||||
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||
const data = reactive({
|
||||
list: [],
|
||||
option: {},
|
||||
Max: 20000,
|
||||
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
||||
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||
xxname: ["2020", "2021", "2022", "2023"],
|
||||
});
|
||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
||||
const CubeLeft_1 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 40, shape.y];
|
||||
const c1 = [shape.x - 27, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeFront_1 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 40, shape.y];
|
||||
const c1 = [shape.x - 18, shape.y];
|
||||
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeRight_1 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 18, shape.y];
|
||||
const c1 = [shape.x - 5, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeTop_1 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c0 = [shape.x - 40, shape.y];
|
||||
const c1 = [shape.x - 18, shape.y];
|
||||
const c2 = [shape.x - 5, shape.y - 14];
|
||||
const c3 = [shape.x - 27, shape.y - 14];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeBottom_1 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
|
||||
const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||
const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
||||
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
|
||||
echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
|
||||
echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
|
||||
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
|
||||
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
||||
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
|
||||
// -------------------------
|
||||
const CubeLeft_2 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 0, shape.y];
|
||||
const c1 = [shape.x + 13, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeFront_2 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 0, shape.y];
|
||||
const c1 = [shape.x + 22, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeRight_2 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x + 22, shape.y];
|
||||
const c1 = [shape.x + 35, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeTop_2 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c0 = [shape.x - 0, shape.y];
|
||||
const c1 = [shape.x + 22, shape.y];
|
||||
const c2 = [shape.x + 35, shape.y - 14];
|
||||
const c3 = [shape.x + 13, shape.y - 14];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
const CubeBottom_2 = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
|
||||
const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||
const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
},
|
||||
});
|
||||
|
||||
echarts.graphic.registerShape("CubeLeft_2", CubeLeft_2);
|
||||
echarts.graphic.registerShape("CubeFront_2", CubeFront_2);
|
||||
echarts.graphic.registerShape("CubeRight_2", CubeRight_2);
|
||||
echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
|
||||
echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
|
||||
|
||||
// ------------------------------
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
legend: {
|
||||
data: [
|
||||
"适龄生育妇女",
|
||||
"育龄妇女",
|
||||
],
|
||||
top: "0%",
|
||||
right: "30%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 10,
|
||||
top: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: data.xxname,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
data: data.xxname,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: data.Max,
|
||||
// interval: 100,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(255, 255, 255, .16)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "适龄生育妇女",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_1",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[0]["bottom"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_1",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[0]["left"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[0]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[0]["right"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[0]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
//设置图例颜色
|
||||
itemStyle: {
|
||||
show: true,
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
|
||||
},
|
||||
},
|
||||
data: data.valueList,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "育龄妇女",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["bottom"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["left"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["right"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
//设置图例颜色
|
||||
itemStyle: {
|
||||
show: true,
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [{ offset: 1, color: "rgba(14, 252, 255, 1)" }],
|
||||
},
|
||||
},
|
||||
data: data.valueList2,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value - 5;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
|
||||
data: data.valueList.map((item) => parseInt(item) + 5),
|
||||
barWidth: 30,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value - 5;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
|
||||
data: data.valueList2.map((item) => parseInt(item) + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
myChart.on("click", function (params) {
|
||||
emit("shuju", params.name, params.seriesIndex);
|
||||
});
|
||||
};
|
||||
const getMaxCeilingValue = (arr) => {
|
||||
let max = Math.max(...arr); // 找到数组中的最大值
|
||||
return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
|
||||
};
|
||||
const setChart1 = () => {
|
||||
data.valueList = [];
|
||||
data.xxname = [];
|
||||
if (data.list.length !== 0) {
|
||||
data.list.forEach((item) => {
|
||||
data.xxname.push(item.name); //信息名
|
||||
data.valueList.push(item.num); //信息数
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.xxname.forEach((item, index) => {
|
||||
props.list.forEach((itemm, indexx) => {
|
||||
if (item == itemm.xzjd) {
|
||||
data.valueList[index] = itemm.qrrs;
|
||||
data.valueList2[index] = itemm.qcrs;
|
||||
}
|
||||
});
|
||||
});
|
||||
getOption();
|
||||
setChart();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 90%"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
zgffrc: [], //育龄妇女
|
||||
cxffrc: [], //婴幼儿
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
|
||||
},
|
||||
legend: {
|
||||
data: ["育龄妇女", "婴幼儿"],
|
||||
top: "6%",
|
||||
right: "11%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "23%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
data: data.year,
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "value",
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.1)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 16,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
color: "#ffffff",
|
||||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// z: 1,
|
||||
// name: "上部1",
|
||||
// type: "pictorialBar",
|
||||
// symbolPosition: "end",
|
||||
// data: data.zgffrc,
|
||||
// symbol: "diamond",
|
||||
// symbolOffset: ["-60%", "-50%"],
|
||||
// symbolSize: [17, 10],
|
||||
// itemStyle: {
|
||||
// borderColor: "#2fffa4",
|
||||
// color: "rgba(142, 187, 255, 1)",
|
||||
// },
|
||||
// },
|
||||
{
|
||||
z: 1,
|
||||
name: "育龄妇女",
|
||||
type: "bar",
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
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, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(142, 187, 255, 1)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(142, 187, 255, 0.20)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
itemStyle: {
|
||||
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: ["62%", "-50%"],
|
||||
// symbolSize: [17, 10],
|
||||
// itemStyle: {
|
||||
// borderColor: "#32ffee",
|
||||
// color: "rgba(23, 237, 255, 1)",
|
||||
// },
|
||||
// },
|
||||
{
|
||||
z: 2,
|
||||
name: "婴幼儿",
|
||||
type: "bar",
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
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, [
|
||||
// {
|
||||
// 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)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: "bar",
|
||||
// xAxisIndex: 1,
|
||||
// yAxisIndex: 1,
|
||||
// itemStyle: {
|
||||
// color: "rgba(221, 242, 255, 0.1)",
|
||||
// },
|
||||
// data: data.bg.map(() => 100),
|
||||
// barWidth: 50,
|
||||
// },
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
data.list.forEach((item) => {
|
||||
data.zgffrc.push((item.zgffrc / 10000).toFixed(0));
|
||||
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
||||
data.bg.push("");
|
||||
});
|
||||
// console.log(data.zgffrc,data.cxffrc);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -45,11 +45,17 @@
|
|||
max-height="100vh"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="xh" label="序号" width="50" />
|
||||
<el-table-column prop="xm" label="姓名" width="60" />
|
||||
<el-table-column prop="sfzhm" label="身份证号" />
|
||||
<el-table-column prop="sfzhm" label="身份证" />
|
||||
<el-table-column prop="sfzhm" label="救助证号" />
|
||||
<el-table-column prop="sfzhm" label="联系电话" />
|
||||
<el-table-column prop="sfzhm" label="乡镇(街道)" />
|
||||
<el-table-column prop="sfzhm" label="村社" />
|
||||
<el-table-column prop="dz" label="地址" />
|
||||
<el-table-column prop="nl" label="年龄" width="60" />
|
||||
<el-table-column prop="bq" label="人口标签" />
|
||||
<el-table-column prop="sfzhm" label="救助日期" />
|
||||
<!-- <el-table-column prop="nl" label="年龄" width="60" /> -->
|
||||
<!-- <el-table-column prop="bq" label="人口标签" /> -->
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -164,7 +170,7 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
.tableheader {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -172,10 +178,10 @@ onMounted(() => {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px ;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
.tableheader_title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
|
@ -195,7 +201,7 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.select {
|
||||
margin-bottom: 20px ;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<infant v-if="gaikuangList.infant"></infant>
|
||||
<work v-if="gaikuangList.work"></work>
|
||||
<education v-if="gaikuangList.education"></education>
|
||||
<yl v-if="gaikuangList.yl"></yl>
|
||||
|
|
@ -173,6 +174,7 @@ import Bj1 from "@/assets/sy-table/sy-table7.png";
|
|||
import Bj2 from "@/assets/sy-table/sy-table4.png";
|
||||
import Bj3 from "@/assets/sy-table/sy-table5.png";
|
||||
import Bj4 from "@/assets/sy-table/sy-table6.png";
|
||||
import infant from "./table_gk/gk_infant.vue";
|
||||
import work from "./table_gk/gk_work.vue";
|
||||
import education from "./table_gk/gk_education.vue";
|
||||
import yl from "./table_gk/gk_yl.vue";
|
||||
|
|
@ -227,14 +229,18 @@ const data = reactive({
|
|||
son: [
|
||||
{
|
||||
id: "0",
|
||||
name: "优孕优生服务",
|
||||
name: "概况",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
name: "儿童健康服务",
|
||||
name: "优孕优生服务",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "儿童健康服务",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "儿童关爱服务",
|
||||
},
|
||||
],
|
||||
|
|
@ -510,6 +516,7 @@ const data = reactive({
|
|||
Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
|
||||
});
|
||||
const gaikuangList = reactive({
|
||||
infant: false,
|
||||
work: false,
|
||||
education: false,
|
||||
yl: false,
|
||||
|
|
@ -519,6 +526,7 @@ const gaikuangList = reactive({
|
|||
const show_7yx = ref(true);
|
||||
const gk = computed(() => {
|
||||
if (
|
||||
gaikuangList.infant ||
|
||||
gaikuangList.work ||
|
||||
gaikuangList.hygiene ||
|
||||
gaikuangList.education ||
|
||||
|
|
@ -538,7 +546,8 @@ const tapshow = (parentId, childId) => {
|
|||
localStorage.setItem("taps1", JSON.stringify(parentId));
|
||||
if (
|
||||
childId == 0 &&
|
||||
(parentId.name == "弱有所扶" ||
|
||||
(parentId.name == "幼有所育" ||
|
||||
parentId.name == "弱有所扶" ||
|
||||
parentId.name == "学有所教" ||
|
||||
parentId.name == "老有所养" ||
|
||||
parentId.name == "病有所医")
|
||||
|
|
@ -594,7 +603,9 @@ const gaikuang = (name) => {
|
|||
for (let name in gaikuangList) {
|
||||
gaikuangList[name] = false;
|
||||
}
|
||||
if (name == "弱有所扶") {
|
||||
if (name == "幼有所育") {
|
||||
gaikuangList.infant = true;
|
||||
} else if (name == "弱有所扶") {
|
||||
gaikuangList.work = true;
|
||||
} else if (name == "学有所教") {
|
||||
gaikuangList.education = true;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue