xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-05-15 17:30:56 +08:00
parent e200493c4e
commit 8f3874f4b9
2 changed files with 525 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/view/echarts_yl/pie3d.vue
View File

@ -1,52 +1,88 @@
<template> <template>
<div ref="chart" style="width:100%;height:250px;"></div> <div ref="chart" style="width: 100%; height: 250px"></div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from 'echarts' import * as echarts from "echarts";
import 'echarts-gl'; import "echarts-gl";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 244, 245)', 'rgba(7, 166, 255)', 'rgba(255, 208, 118)', 'rgba(109, 148, 198)', 'rgba(255, 255, 255)'] const data = reactive({
list: [],
option: {},
});
const colorList = [
"#FFE35F",
"#0081FF",
"#8ABEDB",
"#25B9C8",
"#30EB92",
"rgba(69, 244, 245)",
"rgba(7, 166, 255)",
"rgba(255, 208, 118)",
"rgba(109, 148, 198)",
"rgba(255, 255, 255)",
];
const pieData = [ const pieData = [
{ {
name: "60-70岁", //名称 name: "60-70岁", //名称
value: 101243, //值 value: 79357, //值
}, },
{ {
name: "70-80岁", name: "70-80岁",
value: 84253, value: 57842,
}, },
{ {
name: "80-90岁", name: "80-90岁",
value: 14325, value: 40934,
}, },
{ {
name: "90-100岁", name: "90-100岁",
value: 4325, value: 11375,
}, },
{ {
name: "100岁以上", name: "100岁以上",
value: 563, value: 1945,
} },
] ];
const serData = pieData.map((dItem, index) => { const serData = pieData.map((dItem, index) => {
return { return {
...dItem, ...dItem,
value: Number(dItem.value), value: Number(dItem.value),
itemStyle: { itemStyle: {
color: colorList[index] color: colorList[index],
}, },
} };
}) });
//设置图表配置项 //设置图表配置项
const option = getPie3D(serData, 0.8) // const option = getPie3D(serData, 0.8);
const getOption = () => {
data.option = getPie3D(serData, 0.8);
};
// 生成模拟 3D 饼图的配置项 // 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) { function getPie3D(pieData, internalDiameterRatio) {
@ -56,7 +92,7 @@ function getPie3D(pieData, internalDiameterRatio) {
let endValue = 0; let endValue = 0;
let legendData = []; let legendData = [];
let k = let k =
typeof internalDiameterRatio !== 'undefined' typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3; : 1 / 3;
@ -65,8 +101,9 @@ function getPie3D(pieData, internalDiameterRatio) {
sumValue += pieData[i].value; sumValue += pieData[i].value;
let seriesItem = { let seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name, name:
type: 'surface', typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
type: "surface",
parametric: true, parametric: true,
wireframe: { wireframe: {
show: false, show: false,
@ -79,11 +116,13 @@ function getPie3D(pieData, internalDiameterRatio) {
}, },
}; };
if (typeof pieData[i].itemStyle != 'undefined') { if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {}; let itemStyle = {};
typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null; typeof pieData[i].itemStyle.color != "undefined"
typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity) ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null; : null;
@ -165,12 +204,12 @@ function getPie3D(pieData, internalDiameterRatio) {
"#F4BB29", "#F4BB29",
"#49C384", "#49C384",
], ],
width: '40%', width: "40%",
//图例列表的布局朝向。 //图例列表的布局朝向。
orient: "vertical", orient: "vertical",
right: 20, right: 20,
// bottom: 20, // bottom: 20,
top: 'center', top: "center",
// left: '10px', // left: '10px',
//图例文字每项之间的间隔 //图例文字每项之间的间隔
itemGap: 10, itemGap: 10,
@ -193,9 +232,9 @@ function getPie3D(pieData, internalDiameterRatio) {
target = pieData[i].value; target = pieData[i].value;
} }
} }
if(name == '90-100岁'){ if (name == "90-100岁") {
return ` ${name} ${target} 人`; return ` ${name} ${target} 人`;
}else if(name == '100岁以上'){ } else if (name == "100岁以上") {
return ` ${name} ${target} 人`; return ` ${name} ${target} 人`;
} else { } else {
return ` ${name} ${target} 人`; return ` ${name} ${target} 人`;
@ -240,9 +279,9 @@ function getPie3D(pieData, internalDiameterRatio) {
alpha: 25, //角度(这个很重要 调节角度的) alpha: 25, //角度(这个很重要 调节角度的)
distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小) distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
}, },
top: '-30', top: "-30",
left: '-120', left: "-120",
width: '100%', width: "100%",
show: false, show: false,
boxHeight: 20, boxHeight: 20,
}, },
@ -252,7 +291,14 @@ function getPie3D(pieData, internalDiameterRatio) {
} }
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
// 计算 // 计算
let midRatio = (startRatio + endRatio) / 2; let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2; let startRadian = startRatio * Math.PI * 2;
@ -284,8 +330,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
x: function (u, v) { x: function (u, v) {
if (u < startRadian) { if (u < startRadian) {
return ( return (
offsetX + offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
); );
} }
if (u > endRadian) { if (u > endRadian) {
@ -298,8 +343,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
y: function (u, v) { y: function (u, v) {
if (u < startRadian) { if (u < startRadian) {
return ( return (
offsetY + offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
); );
} }
if (u > endRadian) { if (u > endRadian) {
@ -319,7 +363,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
}, },
}; };
}; }
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。 // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
function bindListen(myChart) { function bindListen(myChart) {
@ -328,18 +372,14 @@ function bindListen(myChart) {
// 监听点击事件，实现选中效果（单选） // 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) { myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
let isSelected = let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
!option.series[params.seriesIndex].pieStatus.selected; let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
let isHovered =
option.series[params.seriesIndex].pieStatus.hovered;
let k = option.series[params.seriesIndex].pieStatus.k; let k = option.series[params.seriesIndex].pieStatus.k;
let startRatio = let startRatio = option.series[params.seriesIndex].pieData.startRatio;
option.series[params.seriesIndex].pieData.startRatio;
let endRatio = option.series[params.seriesIndex].pieData.endRatio; let endRatio = option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新） // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) { if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = option.series[selectedIndex].parametricEquation = getParametricEquation(
getParametricEquation(
option.series[selectedIndex].pieData.startRatio, option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio, option.series[selectedIndex].pieData.endRatio,
false, false,
@ -387,8 +427,7 @@ function bindListen(myChart) {
endRatio = option.series[hoveredIndex].pieData.endRatio; endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k; k = option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新） // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = option.series[hoveredIndex].parametricEquation = getParametricEquation(
getParametricEquation(
startRatio, startRatio,
endRatio, endRatio,
isSelected, isSelected,
@ -406,11 +445,9 @@ function bindListen(myChart) {
params.seriesName !== "pie2d" params.seriesName !== "pie2d"
) { ) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = isSelected = option.series[params.seriesIndex].pieStatus.selected;
option.series[params.seriesIndex].pieStatus.selected;
isHovered = true; isHovered = true;
startRatio = startRatio = option.series[params.seriesIndex].pieData.startRatio;
option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio; endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k; k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新） // 对当前点击的扇形，执行高亮操作（对 option 更新）
@ -423,8 +460,7 @@ function bindListen(myChart) {
k, k,
option.series[params.seriesIndex].pieData.value + 5 option.series[params.seriesIndex].pieData.value + 5
); );
option.series[params.seriesIndex].pieStatus.hovered = option.series[params.seriesIndex].pieStatus.hovered = isHovered;
isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex // 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex; hoveredIndex = params.seriesIndex;
} }
@ -449,8 +485,7 @@ function bindListen(myChart) {
startRatio = option.series[hoveredIndex].pieData.startRatio; startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio; endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新） // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = option.series[hoveredIndex].parametricEquation = getParametricEquation(
getParametricEquation(
startRatio, startRatio,
endRatio, endRatio,
isSelected, isSelected,
@ -467,26 +502,45 @@ function bindListen(myChart) {
}); });
} }
// 使用生命钩子 // 使用生命钩子
onMounted(() => { // onMounted(() => {
// 基于准备好的dom，初始化echarts实例 // // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main')); // // var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // // Vue3中： 需要引入
var myChart = echarts.init(chart.value) // var myChart = echarts.init(chart.value);
//设置交互事件 鼠标移入 点击 // //设置交互事件 鼠标移入 点击
// bindListen(myChart) // // bindListen(myChart)
// init(); // vue3.2没有this // // init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); // myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
// 单图表响应式: 跟随浏览器大小改变 // 单图表响应式: 跟随浏览器大小改变
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
myChart.resize() myChart.resize();
}) });
};
}) // 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
// console.log(data.list,555);
// pieData[0].value=data.list.nl5160
// pieData[1].value=data.list.nl6170
// pieData[2].value=data.list.nl7180
// pieData[3].value=data.list.nl8190
// pieData[4].value=data.list.nl91100
getOption();
setChart();
}, 600);
});
</script> </script>
<style scoped></style> <style scoped></style>

17
src/view/yl.vue
View File

@ -136,10 +136,10 @@
<div class="mtpImg1"></div> <div class="mtpImg1"></div>
<div class="mtpImg2"></div> <div class="mtpImg2"></div>
<div class="mtpImg3"></div> <div class="mtpImg3"></div>
<div class="mtpText1">588811</div> <div class="mtpText1">{{ data.oldAgeTotal }}</div>
<div class="mtpText2">18%</div> <div class="mtpText2">{{ data.oldAgePercent }}%</div>
</div> </div>
<ePie3d></ePie3d> <ePie3d :list="data.rkgk"></ePie3d>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title familyPlanning"></div> <div class="yd_title familyPlanning"></div>
@ -203,8 +203,7 @@
alt="" alt=""
/> />
</div> </div>
<ylXZZC :list1="data.zccs1" <ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
:list2="data.zccs2"></ylXZZC>
</div> </div>
</div> </div>
</div> </div>
@ -248,6 +247,9 @@ const data = reactive({
leftbottom3: [], leftbottom3: [],
leftbottom4: [], leftbottom4: [],
leftbottomYear: [], leftbottomYear: [],
oldAgePercent: "",
oldAgeTotal: "",
rkgk: [],
centerBottom1: [], centerBottom1: [],
centerBottom2: [], centerBottom2: [],
centerBottomYear: [], centerBottomYear: [],
@ -300,6 +302,11 @@ const getData = async () => {
}); });
// 年份 // 年份
data.leftbottomYear = res.data.tkdbOldAge.year; data.leftbottomYear = res.data.tkdbOldAge.year;
// 老年人各年龄及占比
data.oldAgePercent = res.data.lnrgnljzb.oldAgePercent;
data.oldAgeTotal = res.data.lnrgnljzb.oldAgeTotal;
data.rkgk = res.data.lnrgnljzb.rkgk;
// 计划生育 // 计划生育
res.data.familyPlanning.familyPlanningData.forEach((element) => { res.data.familyPlanning.familyPlanningData.forEach((element) => {
data.centerBottom1.push(element.jhsyrs); // 人次 data.centerBottom1.push(element.jhsyrs); // 人次