This commit is contained in:
parent
e200493c4e
commit
8f3874f4b9
|
@ -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>
|
||||||
|
|
|
@ -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); // 人次
|
||||||
|
|
Loading…
Reference in New Issue