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({
list: [],
// pieData: [
// {
// name: "61-70岁", //名称
// value: "", //值
// },
// {
// name: "71-80岁",
// value: "",
// },
// {
// name: "81-90岁",
// value: "",
// },
// {
// name: "91-100岁",
// value: "",
// },
// {
// name: "100岁以上",
// value: "",
// },
// ],
option: {},
});
@ -44,43 +66,53 @@ const colorList = [
"rgba(255, 255, 255)",
];
const pieData = [
const pieData = reactive([
{
name: "60-70岁", //名称
value: 79357, //值
name: "61-70岁", //名称
value: "", //值
},
{
name: "70-80岁",
name: "71-80岁",
value: 57842,
},
{
name: "80-90岁",
name: "81-90岁",
value: 40934,
},
{
name: "90-100岁",
name: "91-100岁",
value: 11375,
},
{
name: "100岁以上",
value: 1945,
},
];
]);
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
// const serData = pieData.map((dItem, index) => {
// console.log(dItem, index, 666);
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
//设置图表配置项
// const option = getPie3D(serData, 0.8);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8);
};
@ -232,7 +264,7 @@ function getPie3D(pieData, internalDiameterRatio) {
target = pieData[i].value;
}
}
if (name == "90-100岁") {
if (name == "91-100岁") {
return ` ${name} ${target} 人`;
} else if (name == "100岁以上") {
return ` ${name} ${target} 人`;
@ -531,15 +563,16 @@ const setChart = () => {
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
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;
console.log(data.list, pieData, 555);
getOption();
setChart();
}, 600);
}, 400);
});
</script>