This commit is contained in:
姚宇浩 2024-08-02 14:40:39 +08:00
parent 5030a0fb6f
commit 22717be4e6
4 changed files with 1228 additions and 8 deletions

View File

@ -69,13 +69,19 @@
</div> </div>
<div style="overflow: hidden"> <div style="overflow: hidden">
<div class="minPie"> <div class="minPie">
<div class="minPieImg" style="letter-spacing: 1px"> <div
class="minPieImg"
style="letter-spacing: 1px"
@click="showEchartTy('集聚类型分布')"
>
集聚类型分布 集聚类型分布
</div> </div>
<Pie3dMt :list="minData.minPieData1"></Pie3dMt> <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div> </div>
<div class="minPie"> <div class="minPie">
<div class="minPieImg">年龄分布</div> <div class="minPieImg" @click="showEchartTy('年龄分布')">
年龄分布
</div>
<Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2> <Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
</div> </div>
</div> </div>
@ -182,6 +188,34 @@
</DialogElderly> </DialogElderly>
<DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close"> <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
</DialogMap> </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> </div>
</template> </template>
@ -197,10 +231,10 @@ import {
import DialogEnrol from "./dialog/dialogEnrol.vue"; import DialogEnrol from "./dialog/dialogEnrol.vue";
import DialogElderly from "./dialog/diaLogElderlyData.vue"; import DialogElderly from "./dialog/diaLogElderlyData.vue";
import DialogMap from "./dialog/dialogMap.vue"; import DialogMap from "./dialog/dialogMap.vue";
import DialogEcTy from "./dialog/dialogEcTy.vue";
import right2 from "./echart_analyze/right2.vue"; import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue"; import right1 from "./echart_analyze/right1.vue";
import jypx from "./echart_analyze/jypx.vue"; import jypx from "./echart_analyze/jypx.vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue"; import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import Pie3dMt2 from "./echart_analyze/pie3dMt2.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 rxfx from "./echart_analyze/rxfx.vue";
import FlipClock from "./echart_analyze/FlipClock.vue"; import FlipClock from "./echart_analyze/FlipClock.vue";
import ePie4 from "./echart_analyze/pie4.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 ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png"; import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png"; import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
@ -224,6 +259,8 @@ const showR = ref(false); //loading
const dialogShowEnrol = ref(false); const dialogShowEnrol = ref(false);
const dialogShowElderly = ref(false); const dialogShowElderly = ref(false);
const dialogShowMap = ref(false); const dialogShowMap = ref(false);
const dialogShowEcTy = ref(false);
const dialogShowEcTy1 = ref(false);
const mapTitle = ref(""); const mapTitle = ref("");
const dataTab = reactive({ const dataTab = reactive({
url: "", 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 = () => { const showEnrol = () => {
dialogShowEnrol.value = true; dialogShowEnrol.value = true;
}; };
const close = () => { const close = () => {
dialogShowEnrol.value = false; dialogShowEnrol.value = false;
dialogShowMap.value = false; dialogShowMap.value = false;
dialogShowEcTy.value = false;
dialogShowEcTy1.value = false;
}; };
const showEnrol1 = () => { const showEnrol1 = () => {
dialogShowElderly.value = true; dialogShowElderly.value = true;
@ -480,7 +527,14 @@ const showEnrol1 = () => {
const close1 = () => { const close1 = () => {
dialogShowElderly.value = false; dialogShowElderly.value = false;
}; };
const showEchartTy = (name) => {
dataEc.title = name;
if (name == "年龄分布") {
dialogShowEcTy1.value = true;
} else {
dialogShowEcTy.value = true;
}
};
// //
const tab_choose = ref([ const tab_choose = ref([
{ {
@ -1197,6 +1251,7 @@ onBeforeUnmount(() => {
position: relative; position: relative;
float: left; float: left;
.minPieImg { .minPieImg {
cursor: pointer;
position: absolute; position: absolute;
width: 137px; width: 137px;
height: 20px; height: 20px;

View File

@ -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>

View File

@ -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) {
// canvasshapecustom
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) {
// canvasshapecustom
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) {
// canvasshapecustom
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) {
// canvasshapecustom
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) {
// canvasshapecustom
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) {
// canvasshapecustom
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>

View File

@ -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: {
//线4x0,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, //shadowBlurshadowColor,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: {
//线4x0,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, //shadowBlurshadowColor,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: {
//线4x0,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, //shadowBlurshadowColor,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>