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

gx

This commit is contained in:
duanxiaohai 2024-05-16 09:52:53 +08:00
parent 8f3874f4b9
commit 5949fd14f7
1 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,28 @@ const chart = ref(); // 创建DOM引用
const data = reactive({ const data = reactive({
list: [], list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
option: {}, option: {},
}); });
@ -44,43 +66,53 @@ const colorList = [
"rgba(255, 255, 255)", "rgba(255, 255, 255)",
]; ];
const pieData = [ const pieData = reactive([
{ {
name: "60-70岁", //名称 name: "61-70岁", //名称
value: 79357, //值 value: "", //值
}, },
{ {
name: "70-80岁", name: "71-80岁",
value: 57842, value: 57842,
}, },
{ {
name: "80-90岁", name: "81-90岁",
value: 40934, value: 40934,
}, },
{ {
name: "90-100岁", name: "91-100岁",
value: 11375, value: 11375,
}, },
{ {
name: "100岁以上", name: "100岁以上",
value: 1945, value: 1945,
}, },
]; ]);
const serData = pieData.map((dItem, index) => { // const serData = pieData.map((dItem, index) => {
return { // console.log(dItem, index, 666);
...dItem, // return {
value: Number(dItem.value), // ...dItem,
itemStyle: { // value: Number(dItem.value),
color: colorList[index], // itemStyle: {
}, // color: colorList[index],
}; // },
}); // };
// });
//设置图表配置项 //设置图表配置项
// const option = getPie3D(serData, 0.8); // const option = getPie3D(serData, 0.8);
const getOption = () => { const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8); data.option = getPie3D(serData, 0.8);
}; };
@ -232,7 +264,7 @@ function getPie3D(pieData, internalDiameterRatio) {
target = pieData[i].value; target = pieData[i].value;
} }
} }
if (name == "90-100岁") { if (name == "91-100岁") {
return ` ${name} ${target} 人`; return ` ${name} ${target} 人`;
} else if (name == "100岁以上") { } else if (name == "100岁以上") {
return ` ${name} ${target} 人`; return ` ${name} ${target} 人`;
@ -531,15 +563,16 @@ const setChart = () => {
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
// console.log(data.list,555); pieData[0].value = data.list.nl5160;
// pieData[0].value=data.list.nl5160 pieData[1].value = data.list.nl6170;
// pieData[1].value=data.list.nl6170 pieData[2].value = data.list.nl7180;
// pieData[2].value=data.list.nl7180 pieData[3].value = data.list.nl8190;
// pieData[3].value=data.list.nl8190 pieData[4].value = data.list.nl91100;
// pieData[4].value=data.list.nl91100 console.log(data.list, pieData, 555);
getOption(); getOption();
setChart(); setChart();
}, 600); }, 400);
}); });
</script> </script>