This commit is contained in:
parent
8f3874f4b9
commit
5949fd14f7
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue