This commit is contained in:
parent
5030a0fb6f
commit
22717be4e6
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<div class="displayFlex left_bg">
|
||||
<div class="flex11" >
|
||||
<div class="flex11">
|
||||
<div class="yd_title left_1" @click="showEnrol1()">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title center_0" >
|
||||
<div class="yd_title center_0">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
|
|
@ -69,13 +69,19 @@
|
|||
</div>
|
||||
<div style="overflow: hidden">
|
||||
<div class="minPie">
|
||||
<div class="minPieImg" style="letter-spacing: 1px">
|
||||
<div
|
||||
class="minPieImg"
|
||||
style="letter-spacing: 1px"
|
||||
@click="showEchartTy('集聚类型分布')"
|
||||
>
|
||||
集聚类型分布
|
||||
</div>
|
||||
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
|
||||
</div>
|
||||
<div class="minPie">
|
||||
<div class="minPieImg">年龄分布</div>
|
||||
<div class="minPieImg" @click="showEchartTy('年龄分布')">
|
||||
年龄分布
|
||||
</div>
|
||||
<Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,6 +188,34 @@
|
|||
</DialogElderly>
|
||||
<DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
|
||||
</DialogMap>
|
||||
<DialogEcTy
|
||||
:dialogShowEc="dialogShowEcTy"
|
||||
:title="dataEc.title"
|
||||
@close="close"
|
||||
>
|
||||
<template #echart>
|
||||
<dialog_jjlxfb
|
||||
:list="nlfb.list1"
|
||||
:list2="nlfb.list2"
|
||||
:list3="nlfb.list3"
|
||||
:year="nlfb.year"
|
||||
></dialog_jjlxfb>
|
||||
</template>
|
||||
</DialogEcTy>
|
||||
<DialogEcTy
|
||||
:dialogShowEc="dialogShowEcTy1"
|
||||
:title="dataEc.title"
|
||||
@close="close"
|
||||
>
|
||||
<template #echart>
|
||||
<dialog_nlfb
|
||||
:list="nlfb.list1"
|
||||
:list2="nlfb.list2"
|
||||
:list3="nlfb.list3"
|
||||
:year="nlfb.year"
|
||||
></dialog_nlfb>
|
||||
</template>
|
||||
</DialogEcTy>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -197,10 +231,10 @@ import {
|
|||
import DialogEnrol from "./dialog/dialogEnrol.vue";
|
||||
import DialogElderly from "./dialog/diaLogElderlyData.vue";
|
||||
import DialogMap from "./dialog/dialogMap.vue";
|
||||
import DialogEcTy from "./dialog/dialogEcTy.vue";
|
||||
import right2 from "./echart_analyze/right2.vue";
|
||||
import right1 from "./echart_analyze/right1.vue";
|
||||
import jypx from "./echart_analyze/jypx.vue";
|
||||
|
||||
import http from "@/utils/request.js";
|
||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||
import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";
|
||||
|
|
@ -211,7 +245,8 @@ import ylXZZC from "./echart_analyze/ylXZZC.vue";
|
|||
import rxfx from "./echart_analyze/rxfx.vue";
|
||||
import FlipClock from "./echart_analyze/FlipClock.vue";
|
||||
import ePie4 from "./echart_analyze/pie4.vue";
|
||||
|
||||
import dialog_nlfb from "./echart_analyze/dialog_nlfb.vue";
|
||||
import dialog_jjlxfb from "./echart_analyze/dialog_jjlxfb.vue";
|
||||
import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
|
||||
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
|
||||
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
|
||||
|
|
@ -224,6 +259,8 @@ const showR = ref(false); //loading
|
|||
const dialogShowEnrol = ref(false);
|
||||
const dialogShowElderly = ref(false);
|
||||
const dialogShowMap = ref(false);
|
||||
const dialogShowEcTy = ref(false);
|
||||
const dialogShowEcTy1 = ref(false);
|
||||
const mapTitle = ref("");
|
||||
const dataTab = reactive({
|
||||
url: "",
|
||||
|
|
@ -466,13 +503,23 @@ const dataElderly = reactive({
|
|||
},
|
||||
],
|
||||
});
|
||||
|
||||
const dataEc = reactive({
|
||||
title: "",
|
||||
});
|
||||
const nlfb = reactive({
|
||||
year: [2022, 2023, 2024, 2025, 2026],
|
||||
list1: [0, 1000, 500, 0, 0],
|
||||
list2: [0, 2000, 1000, 0, 0],
|
||||
list3: [0, 3000, 1500, 0, 0],
|
||||
});
|
||||
const showEnrol = () => {
|
||||
dialogShowEnrol.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
dialogShowEnrol.value = false;
|
||||
dialogShowMap.value = false;
|
||||
dialogShowEcTy.value = false;
|
||||
dialogShowEcTy1.value = false;
|
||||
};
|
||||
const showEnrol1 = () => {
|
||||
dialogShowElderly.value = true;
|
||||
|
|
@ -480,7 +527,14 @@ const showEnrol1 = () => {
|
|||
const close1 = () => {
|
||||
dialogShowElderly.value = false;
|
||||
};
|
||||
|
||||
const showEchartTy = (name) => {
|
||||
dataEc.title = name;
|
||||
if (name == "年龄分布") {
|
||||
dialogShowEcTy1.value = true;
|
||||
} else {
|
||||
dialogShowEcTy.value = true;
|
||||
}
|
||||
};
|
||||
//数据切换
|
||||
const tab_choose = ref([
|
||||
{
|
||||
|
|
@ -1197,6 +1251,7 @@ onBeforeUnmount(() => {
|
|||
position: relative;
|
||||
float: left;
|
||||
.minPieImg {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 137px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,219 @@
|
|||
|
||||
<template>
|
||||
<div class="dialogPage">
|
||||
<el-dialog
|
||||
v-model="dialogShowEc"
|
||||
width="80vw"
|
||||
:show-close="false"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<el-icon
|
||||
size="26"
|
||||
color="#fff"
|
||||
@click="closeDialog"
|
||||
>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="tabelPart">
|
||||
<div class="bo">
|
||||
<div class="title">
|
||||
<div class="title_top">
|
||||
<img
|
||||
src="@/assets/images/table_l.png"
|
||||
alt=""
|
||||
style="margin-right: 10px"
|
||||
/>
|
||||
<div class="name">{{ title }}详情</div>
|
||||
<img
|
||||
src="@/assets/images/table_r.png"
|
||||
alt=""
|
||||
style="margin-left: 10px"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
class="title_botton"
|
||||
src="@/assets/images/table_c.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 600px">
|
||||
<slot name="echart"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
||||
import eL from "./echarts/echartLine.vue";
|
||||
|
||||
const props = defineProps({
|
||||
dialogShowEc: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
// 详情弹框
|
||||
const dialogShowEc = ref();
|
||||
const data = reactive({
|
||||
title: "",
|
||||
list1: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
|
||||
// 监听
|
||||
watch(
|
||||
() => props.dialogShowEc,
|
||||
(newVal, oldVal) => {
|
||||
dialogShowEc.value = newVal;
|
||||
}
|
||||
);
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
data.title = props.title;
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogShowEc.value = false;
|
||||
emit("close");
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog) {
|
||||
--el-dialog-bg-color: none;
|
||||
--el-dialog-width: 76% !important;
|
||||
}
|
||||
|
||||
.my-header {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.tabelPart {
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 77, 131, 0.69) 0%,
|
||||
rgba(0, 51, 83, 0.77) 50%,
|
||||
rgba(0, 77, 131, 0.74) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
66% 40% at 50% 0%,
|
||||
rgba(1, 150, 243, 0.55) 0%,
|
||||
rgba(0, 116, 255, 0) 100%
|
||||
);
|
||||
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(21, 150, 255, 1),
|
||||
rgba(0, 157, 227, 0)
|
||||
)
|
||||
2 2;
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-bg-color: none;
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-header-bg-color: none;
|
||||
background: none;
|
||||
border: none;
|
||||
--el-table-text-color: #fff;
|
||||
--el-table-header-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.pagePart {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
--el-pagination-button-disabled-bg-color: none;
|
||||
--el-pagination-bg-color: none;
|
||||
--el-pagination-button-bg-color: none;
|
||||
--el-pagination-button-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-pagination button:disabled) {
|
||||
background-color: rgba(0, 116, 255, 0) !important;
|
||||
}
|
||||
:deep(.el-pagination > .is-last) {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.bo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
||||
img {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: PangMenZhengDao, PangMenZhengDao;
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
color: #ffffff;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
|
||||
-webkit-background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent;
|
||||
/*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
&_botton {
|
||||
margin-top: 5px;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,663 @@
|
|||
<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)",
|
||||
},
|
||||
{
|
||||
left: "rgba(60, 143, 255, .16)",
|
||||
right: "rgba(60, 143, 255, .6)",
|
||||
top: "rgba(60, 143, 255, 1)",
|
||||
bottom: "rgba(60, 143, 255, .46)",
|
||||
front: "rgba(60, 143, 255, .66)",
|
||||
},
|
||||
];
|
||||
const maxList = ref([
|
||||
190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
|
||||
]);
|
||||
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||
const data = reactive({
|
||||
list: [],
|
||||
option: {},
|
||||
Max: 200,
|
||||
valueList: [20, 53, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
|
||||
valueList2: [120, 153, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
|
||||
xxname: [
|
||||
"东华街道",
|
||||
"大街乡",
|
||||
"塔石镇",
|
||||
"小南海镇",
|
||||
"模环乡",
|
||||
"横山镇",
|
||||
"沐尘畲族乡",
|
||||
"石佛乡",
|
||||
"罗家乡",
|
||||
"庙下乡",
|
||||
"溪口镇",
|
||||
"社阳乡",
|
||||
"詹家镇",
|
||||
"龙舟街道",
|
||||
"湖镇镇",
|
||||
],
|
||||
});
|
||||
// 注册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}:{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: [
|
||||
//阴影部分
|
||||
// {
|
||||
// type: "custom",
|
||||
// renderItem: function (params, api) {
|
||||
// // console.log(api);
|
||||
// const location = api.coord([api.value(0), api.value(1)]);
|
||||
// return {
|
||||
// type: "group",
|
||||
// children: [
|
||||
// {
|
||||
// type: "CubeBottom_1",
|
||||
// shape: {
|
||||
// api,
|
||||
// x: location[0],
|
||||
// y: location[1],
|
||||
// xAxisPoint: api.coord([api.value(0), 0]),
|
||||
// },
|
||||
// style: {
|
||||
// fill: "rgba(103, 180, 233, .16)",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "CubeLeft_1",
|
||||
// shape: {
|
||||
// api,
|
||||
// x: location[0],
|
||||
// y: location[1],
|
||||
// xAxisPoint: api.coord([api.value(0), 0]),
|
||||
// },
|
||||
// style: {
|
||||
// fill: "rgba(103, 180, 233, .04)",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "CubeFront_1",
|
||||
// shape: {
|
||||
// api,
|
||||
// x: location[0],
|
||||
// y: location[1],
|
||||
// xAxisPoint: api.coord([api.value(0), 0]),
|
||||
// },
|
||||
// style: {
|
||||
// fill: "rgba(103, 180, 233, .16)",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "CubeRight_1",
|
||||
// shape: {
|
||||
// api,
|
||||
// x: location[0],
|
||||
// y: location[1],
|
||||
// xAxisPoint: api.coord([api.value(0), 0]),
|
||||
// },
|
||||
// style: {
|
||||
// fill: "rgba(103, 180, 233, .08)",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "CubeTop_1",
|
||||
// shape: {
|
||||
// api,
|
||||
// x: location[0],
|
||||
// y: location[1],
|
||||
// xAxisPoint: api.coord([api.value(0), 0]),
|
||||
// },
|
||||
// style: {
|
||||
// fill: "rgba(103, 180, 233, .26)",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// },
|
||||
// data: maxList.value,
|
||||
// },
|
||||
{
|
||||
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"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
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"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: data.valueList2,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
myChart.on("click", function (params) {
|
||||
emit("shuju", params.name);
|
||||
});
|
||||
};
|
||||
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.list = props.list;
|
||||
// setChart1();
|
||||
// data.Max = getMaxCeilingValue(data.valueList);
|
||||
// maxList.value = data.valueList.map((item) => parseInt(data.Max) * 0.9);// 生成新的数组，将每个值都替换为 data.Max 的90%
|
||||
getOption();
|
||||
setChart();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 100%"></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: () => [],
|
||||
},
|
||||
list3: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list2: [],
|
||||
list3: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
},
|
||||
legend: {
|
||||
data: ["0-18岁", "19-60岁", "60岁以上"],
|
||||
top: "3%",
|
||||
right: "40%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
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: "0-18岁",
|
||||
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: "19-60岁",
|
||||
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,
|
||||
},
|
||||
{
|
||||
name: "60岁以上",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
smooth: true,
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#00A8FF",
|
||||
borderWidth: 1,
|
||||
color: "#00A8FF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#00A8FF",
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 168, 255,0.50)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 168, 255,0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
},
|
||||
data: data.list3,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
watch(
|
||||
() => props.list,
|
||||
(newValue, oldValue) => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
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.list3 = props.list3;
|
||||
data.year = props.year;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue