This commit is contained in:
duanxiaohai
parent
5f77b825f6
commit
a93aeebaf3
|
|
@ -2,13 +2,79 @@
|
|||
<div ref="chart" style="width: 100%; height: 250px"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
<script setup>
|
||||
import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// year: {
|
||||
// type: Array,
|
||||
// default: () => {
|
||||
// return [];
|
||||
// },
|
||||
// },
|
||||
});
|
||||
const data = reactive({
|
||||
list: [
|
||||
{
|
||||
name: "1-10岁",
|
||||
value: 95,
|
||||
},
|
||||
{
|
||||
name: "11-20岁",
|
||||
value: 120,
|
||||
},
|
||||
{
|
||||
name: "21-30岁",
|
||||
value: 98,
|
||||
},
|
||||
{
|
||||
name: "31-40岁",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
name: "41-50岁",
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
name: "51-60岁",
|
||||
value: 97,
|
||||
},
|
||||
{
|
||||
name: "61-70岁",
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
name: "71-80岁",
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
name: "81-90岁",
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
name: "91-100岁",
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
name: "100岁以上",
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
list1: {},
|
||||
year: [],
|
||||
option: {},
|
||||
});
|
||||
|
||||
//展示数据
|
||||
const optionData = [];
|
||||
//扇形图颜色数据
|
||||
|
|
@ -72,148 +138,184 @@ const resultData = [
|
|||
value: 100,
|
||||
},
|
||||
];
|
||||
let sum = 0;
|
||||
resultData.forEach((item) => {
|
||||
sum += item.value;
|
||||
});
|
||||
resultData.forEach((item) => {
|
||||
optionData.push({ value: item.value, name: item.name });
|
||||
optionData.push({
|
||||
name: "",
|
||||
value: sum / 100,
|
||||
itemStyle: { color: "transparent" },
|
||||
});
|
||||
});
|
||||
let option = {
|
||||
//你的代码
|
||||
legend: [
|
||||
{
|
||||
orient: "vertical",
|
||||
right: "6%",
|
||||
top: "10%",
|
||||
itemWidth: 25, // 可以设置图例标记的宽度
|
||||
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
itemGap: 19,
|
||||
itemStyle: {
|
||||
borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
borderWidth: 10, // 图例边框宽度
|
||||
borderRadius:20,
|
||||
},
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
padding:10,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: resultData,
|
||||
formatter: (name) => {
|
||||
if (resultData.length) {
|
||||
const item = resultData.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
const getOption1 = () => {
|
||||
// data.list[0].value = data.list.nl17;
|
||||
// data.list[1].value = data.list.nl1834;
|
||||
// data.list[2].value = data.list.nl3569;
|
||||
// data.list[0].value = data.list.nl60;
|
||||
|
||||
formatter(params) {
|
||||
let res = "";
|
||||
const { marker, name, value } = params;
|
||||
if (name !== "") {
|
||||
res += `${marker}${name}:${value}`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "85%"],
|
||||
center: ["25%", "50%"],
|
||||
label: {
|
||||
position: "inside",
|
||||
formatter(item) {
|
||||
if (item.name === "") {
|
||||
return "";
|
||||
}
|
||||
return "";
|
||||
data.list[0].value = parseInt(data.list1.nl110);
|
||||
data.list[1].value = parseInt(data.list1.nl1120);
|
||||
data.list[2].value = parseInt(data.list1.nl2130);
|
||||
data.list[3].value = parseInt(data.list1.nl3140);
|
||||
data.list[4].value = parseInt(data.list1.nl4150);
|
||||
data.list[5].value = parseInt(data.list1.nl5160);
|
||||
data.list[6].value = parseInt(data.list1.nl6170);
|
||||
data.list[7].value = parseInt(data.list1.nl7180);
|
||||
data.list[8].value = parseInt(data.list1.nl8190);
|
||||
data.list[9].value = parseInt(data.list1.nl91100);
|
||||
data.list[10].value = parseInt(data.list1.nl100);
|
||||
|
||||
let sum = 0;
|
||||
data.list.forEach((item) => {
|
||||
sum += item.value;
|
||||
});
|
||||
data.list.forEach((item) => {
|
||||
optionData.push({ value: item.value, name: item.name });
|
||||
optionData.push({
|
||||
name: "",
|
||||
value: sum / 100,
|
||||
itemStyle: { color: "transparent" },
|
||||
});
|
||||
});
|
||||
};
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
//你的代码
|
||||
legend: [
|
||||
{
|
||||
orient: "vertical",
|
||||
right: "6%",
|
||||
top: "10%",
|
||||
itemWidth: 25, // 可以设置图例标记的宽度
|
||||
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
itemGap: 19,
|
||||
itemStyle: {
|
||||
borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
borderWidth: 10, // 图例边框宽度
|
||||
borderRadius: 20,
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
normal: {
|
||||
length: 30, // 指示线长度
|
||||
length2: 30
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color(params) {
|
||||
return colorList[parseInt(params.dataIndex / 2)].color1;
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
padding: 10,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
z: 3,
|
||||
data: optionData,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "87%"],
|
||||
center: ["25%", "50%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color(params) {
|
||||
return colorList[parseInt(params.dataIndex / 2)].color2;
|
||||
},
|
||||
data: data.list,
|
||||
formatter: (name) => {
|
||||
if (data.list.length) {
|
||||
const item = data.list.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
z: 2,
|
||||
data: optionData,
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
formatter(params) {
|
||||
let res = "";
|
||||
const { marker, name, value } = params;
|
||||
if (name !== "") {
|
||||
res += `${marker}${name}:${value}`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "85%"],
|
||||
center: ["25%", "50%"],
|
||||
label: {
|
||||
position: "inside",
|
||||
formatter(item) {
|
||||
if (item.name === "") {
|
||||
return "";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
normal: {
|
||||
length: 30, // 指示线长度
|
||||
length2: 30,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color(params) {
|
||||
return colorList[parseInt(params.dataIndex / 2)].color1;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
z: 3,
|
||||
data: optionData,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "87%"],
|
||||
center: ["25%", "50%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color(params) {
|
||||
return colorList[parseInt(params.dataIndex / 2)].color2;
|
||||
},
|
||||
},
|
||||
},
|
||||
z: 2,
|
||||
data: optionData,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中： 需要引入
|
||||
// onMounted(() => {
|
||||
// // 基于准备好的dom，初始化echarts实例
|
||||
// // var myChart = echarts.init(document.getElementById('main'));
|
||||
// // Vue3中： 需要引入
|
||||
// var myChart = echarts.init(chart.value);
|
||||
|
||||
// // init(); // vue3.2没有this
|
||||
// // 使用刚指定的配置项和数据显示图表。
|
||||
// myChart.setOption(option);
|
||||
|
||||
// // 单图表响应式: 跟随浏览器大小改变
|
||||
// // window.addEventListener("resize", () => {
|
||||
// // myChart.resize();
|
||||
// // });
|
||||
// });
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list1 = props.list;
|
||||
// console.log(data.list, 11111);
|
||||
getOption1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<ePie style="margin-bottom: 30px" :list="data.PopulationData"></ePie>
|
||||
<ePie style="margin-bottom: 30px" :list="data.ageGroup"></ePie>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
|
@ -324,6 +324,23 @@ const data = reactive({
|
|||
man: "",
|
||||
woman: "",
|
||||
}, //人口数据
|
||||
ageGroup: {
|
||||
nl17: "0", // 17岁以下人口总数
|
||||
nl1834: "0", // 18-34人口总数
|
||||
nl3569: "0", // 35-69人口总数
|
||||
nl60: "0", // 60以上人口总数
|
||||
nl110: "0", // 1-10岁人口总数
|
||||
nl1120: "0", // 11-20岁人口总数
|
||||
nl2130: "0", // 21-30岁人口总数
|
||||
nl3140: "0", // 31-40岁人口总数
|
||||
nl4150: "0", // 41-50岁人口总数
|
||||
nl5160: "0", // 51-60岁人口总数
|
||||
nl6170: "0", // 61-70岁人口总数
|
||||
nl7180: "0", // 71-80岁人口总数
|
||||
nl8190: "0", // 81-90岁人口总数
|
||||
nl91100: "0", // 91-100岁人口总数
|
||||
nl100: "0", // 100岁以上人口总数,
|
||||
},
|
||||
ageRatio: [],
|
||||
salvageServices: {
|
||||
jzrc: "", //救助人次
|
||||
|
|
@ -757,7 +774,6 @@ const addThousandSeparator = (numberString) => {
|
|||
const getData = async () => {
|
||||
await http.get("/api/ggfwyth/index").then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res.data);
|
||||
// 民生福利
|
||||
if (data.LivelihoodWelfare) {
|
||||
data.LivelihoodWelfare.zgylbxzsr = addThousandSeparator(
|
||||
|
|
@ -800,12 +816,30 @@ const getData = async () => {
|
|||
}
|
||||
// 教育事业&师生比例
|
||||
// 就业服务
|
||||
// 人口数据&年龄比例
|
||||
// 年龄段分类&人口数据&年龄比例
|
||||
data.PopulationData = res.data.rksj;
|
||||
// 人口总数
|
||||
if (data.PopulationData) {
|
||||
data.PopulationData.rkzs = addThousandSeparator(res.data.rksj.rkzs);
|
||||
data.PopulationData.man = addThousandSeparator(res.data.rksj.man);
|
||||
data.PopulationData.woman = addThousandSeparator(res.data.rksj.woman);
|
||||
// 人口年龄段分类数
|
||||
data.ageGroup.nl17 = res.data.rksj.nl17; // 17岁以下人口总数
|
||||
data.ageGroup.nl1834 = res.data.rksj.nl183; // 18-34人口总数
|
||||
data.ageGroup.nl3569 = res.data.rksj.nl3569; // 35-69人口总数
|
||||
data.ageGroup.nl60 = res.data.rksj.nl60; // 60以上人口总数
|
||||
|
||||
data.ageGroup.nl110 = res.data.rksj.nl110; // 1-10岁人口总数
|
||||
data.ageGroup.nl1120 = res.data.rksj.nl1120; // 11-20岁人口总数
|
||||
data.ageGroup.nl2130 = res.data.rksj.nl2130; // 21-30岁人口总数
|
||||
data.ageGroup.nl3140 = res.data.rksj.nl3140; // 31-40岁人口总数
|
||||
data.ageGroup.nl4150 = res.data.rksj.nl4150; // 41-50岁人口总数
|
||||
data.ageGroup.nl5160 = res.data.rksj.nl5160; // 51-60岁人口总数
|
||||
data.ageGroup.nl6170 = res.data.rksj.nl6170; // 61-70岁人口总数
|
||||
data.ageGroup.nl7180 = res.data.rksj.nl7180; // 71-80岁人口总数
|
||||
data.ageGroup.nl8190 = res.data.rksj.nl8190; // 81-90岁人口总数
|
||||
data.ageGroup.nl91100 = res.data.rksj.nl91100; // 91-100岁人口总数
|
||||
data.ageGroup.nl100 = res.data.rksj.nl100; // 100岁以上人口总数,
|
||||
}
|
||||
// 年龄比例
|
||||
data.ageRatio.push(res.data.rksj.nl17Percent); //13~17岁以下人口占比
|
||||
|
|
|
|||
Loading…
Reference in New Issue