集聚类型分布+年龄分布
This commit is contained in:
parent
06d50b3601
commit
ae9b7162c2
|
|
@ -76,13 +76,15 @@
|
|||
>
|
||||
集聚类型分布
|
||||
</div>
|
||||
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
|
||||
<!-- <Pie3dMt :list="minData.minPieData1"></Pie3dMt> -->
|
||||
<PieMt :list="minData.minPieData1"></PieMt>
|
||||
</div>
|
||||
<div class="minPie">
|
||||
<div class="minPieImg" @click="showEchartTy('年龄分布')">
|
||||
年龄分布
|
||||
</div>
|
||||
<Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
|
||||
<!-- <Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2> -->
|
||||
<PieMt2 :list="minData.minPieData2"></PieMt2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -260,9 +262,9 @@ import right2 from "./echart_analyze/right2.vue";
|
|||
import right1 from "./echart_analyze/right1.vue";
|
||||
import jypx from "./echart_analyze/jypx.vue";
|
||||
import http from "@/utils/request.js";
|
||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||
import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";
|
||||
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
|
||||
import PieMt from "./echart_analyze/pieMt.vue";
|
||||
import PieMt2 from "./echart_analyze/pieMt2.vue";
|
||||
import edxs from "./echart_analyze/edXS.vue";
|
||||
import eP2 from "./echart_analyze/eP2.vue";
|
||||
import ylXZZC from "./echart_analyze/ylXZZC.vue";
|
||||
|
|
@ -723,7 +725,9 @@ const tab_change = (index, name) => {
|
|||
}
|
||||
};
|
||||
const chooseXX = (name) => {
|
||||
if (name == "交通") {
|
||||
console.log(name);
|
||||
|
||||
if (name == "公交出行信息推送") {
|
||||
mapTitle.value = "交通";
|
||||
dialogShowMap.value = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,230 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 240px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const data = reactive({
|
||||
list: [
|
||||
{
|
||||
name: "0-18岁", //名称
|
||||
num: 0, //值
|
||||
value: 9.67,
|
||||
},
|
||||
{
|
||||
name: "19-60岁",
|
||||
num: 0,
|
||||
value: 63.37,
|
||||
},
|
||||
{
|
||||
name: "60岁以上",
|
||||
num: 0,
|
||||
value: 26.97,
|
||||
},
|
||||
],
|
||||
option: {},
|
||||
});
|
||||
let sum = 0;
|
||||
let legendData = [];
|
||||
data.list.forEach((item) => {
|
||||
sum += item.value * 1; // *1保证sum值为数值
|
||||
legendData.push(item.name);
|
||||
});
|
||||
data.list.push({
|
||||
name: "总数",
|
||||
value: sum,
|
||||
tooltip: { formatter: () => "" },
|
||||
itemStyle: { normal: { color: "rgba(0, 0, 0, 0)" } },
|
||||
});
|
||||
const colorList = [
|
||||
"#FFE35F",
|
||||
"#0081FF",
|
||||
"#8ABEDB",
|
||||
"#25B9C8",
|
||||
"#30EB92",
|
||||
"rgba(69, 244, 245)",
|
||||
"rgba(7, 166, 255)",
|
||||
"rgba(255, 208, 118)",
|
||||
"rgba(109, 168, 198)",
|
||||
"rgba(255, 255, 255)",
|
||||
];
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
//你的代码
|
||||
color: [
|
||||
"#FFE35F",
|
||||
"#0081FF",
|
||||
"#8ABEDB",
|
||||
"#25B9C8",
|
||||
"#30EB92",
|
||||
"rgba(69, 244, 245)",
|
||||
],
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(18, 55, 85, 0.8);",
|
||||
borderColor: "transparent",
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params) {
|
||||
const num = data.list[params.seriesIndex].num;
|
||||
return (
|
||||
`<div style='color:#FFFFFF;'>` +
|
||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
||||
`${params.name}` +
|
||||
`<span >：${num}人</span>` +
|
||||
`</div>`
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// formatter: function (params) {
|
||||
// let value = "";
|
||||
// let num = "";
|
||||
// for (let i = 0; i < data.list.length; i++) {
|
||||
// if (data.list[i].name == params) {
|
||||
// value = data.list[i].value;
|
||||
// num=data.list[i].num;
|
||||
// }
|
||||
// }
|
||||
// if (params == "总数") {
|
||||
// return ''
|
||||
// } else if(params == "0-18岁"){
|
||||
// // return `${params} ${num}人 ${value}%`;
|
||||
// return params+' '+num+'人'+' '+value+'%'+' ';
|
||||
// }else if(params == "19-60岁"){
|
||||
// return params+' '+num+'人'+' '+value+'%';
|
||||
// }else{
|
||||
// return params+' '+num+'人'+' '+value+'%';
|
||||
// }
|
||||
// },
|
||||
height: "30%",
|
||||
//图例列表的布局朝向。
|
||||
orient: "vertical",
|
||||
left: "10%",
|
||||
bottom: 2,
|
||||
//图例文字每项之间的间隔
|
||||
itemGap: 2,
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemHeight: 12,
|
||||
itemWidth: 25,
|
||||
textStyle: {
|
||||
//图例字体大小
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF",
|
||||
lineHeight: 20,
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 添加
|
||||
|
||||
let value = "";
|
||||
let num = "";
|
||||
for (let i = 0; i < data.list.length; i++) {
|
||||
if (data.list[i].name == params) {
|
||||
value = data.list[i].value;
|
||||
num=data.list[i].num;
|
||||
}
|
||||
}
|
||||
var arr = [
|
||||
"{a|" + params + "}",
|
||||
"{b|" +num + "人}",
|
||||
"{c|" + value + "%}",
|
||||
];
|
||||
if (params == "总数") {
|
||||
return ''
|
||||
}else{
|
||||
return arr.join(" ");
|
||||
}
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
// 添加
|
||||
padding: [8, 15, 0, 10],
|
||||
rich: {
|
||||
a: {
|
||||
color: "#ffffff",
|
||||
fontSize: 15,
|
||||
width: 60,
|
||||
},
|
||||
b: {
|
||||
fontSize: 15,
|
||||
color: "#FFBE53",
|
||||
width:80,
|
||||
},
|
||||
c: {
|
||||
fontSize: 15,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "85%"],
|
||||
center: ["50%", "50%"],
|
||||
startAngle: 180,
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderColor: "#092958",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list[0].num = props.list.wfgz;
|
||||
data.list[1].num = props.list.xstp;
|
||||
data.list[2].num = props.list.skym;
|
||||
// data.list[3].num = props.list.xxdc;
|
||||
// data.list[4].num = props.list.dzzh;
|
||||
// data.list[5].num = props.list.zq;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
|
@ -16,9 +16,9 @@ var map = null;
|
|||
const initMap = () => {
|
||||
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
|
||||
map.enableScrollWheelZoom(true);
|
||||
map.setMapStyleV2({
|
||||
styleId: "d0acde891abd157741b71e12670ee2e6",
|
||||
});
|
||||
// map.setMapStyleV2({
|
||||
// styleId: "d0acde891abd157741b71e12670ee2e6",
|
||||
// });
|
||||
goMapCenter([119.178783, 29.034583], 15);
|
||||
// 开启交通流量图层
|
||||
// map.addTileLayer(new BMapGL.TrafficLayer());
|
||||
|
|
|
|||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 240px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const data = reactive({
|
||||
list: [
|
||||
{
|
||||
value: 2,
|
||||
name: "危房改造",
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: "下山脱贫",
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
name: "水库移民",
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
name: "小县大城",
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
name: "地质灾害",
|
||||
},
|
||||
{
|
||||
value: 22,
|
||||
name: "征迁",
|
||||
},
|
||||
],
|
||||
option: {},
|
||||
});
|
||||
let sum = 0;
|
||||
let legendData = [];
|
||||
data.list.forEach((item) => {
|
||||
sum += item.value * 1; // *1保证sum值为数值
|
||||
legendData.push(item.name);
|
||||
});
|
||||
data.list.push({
|
||||
name: "总数",
|
||||
value: sum,
|
||||
tooltip: { formatter: () => "" },
|
||||
itemStyle: { normal: { color: "rgba(0, 0, 0, 0)" } },
|
||||
});
|
||||
const colorList = [
|
||||
"#FFE35F",
|
||||
"#0081FF",
|
||||
"#8ABEDB",
|
||||
"#25B9C8",
|
||||
"#30EB92",
|
||||
"rgba(69, 244, 245)",
|
||||
"rgba(7, 166, 255)",
|
||||
"rgba(255, 208, 118)",
|
||||
"rgba(109, 168, 198)",
|
||||
"rgba(255, 255, 255)",
|
||||
];
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
//你的代码
|
||||
color: [
|
||||
"#FFE35F",
|
||||
"#0081FF",
|
||||
"#8ABEDB",
|
||||
"#25B9C8",
|
||||
"#30EB92",
|
||||
"rgba(69, 244, 245)",
|
||||
],
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(18, 55, 85, 0.8);",
|
||||
borderColor: "transparent",
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params) {
|
||||
return (
|
||||
`<div style='color:#FFFFFF;'>` +
|
||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
||||
`${params.name}` +
|
||||
`<span >；${params.value}%</span>` +
|
||||
`</div>`
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
formatter: function (params) {
|
||||
var value = "";
|
||||
for (let i = 0; i < data.list.length; i++) {
|
||||
if (data.list[i].name == params) {
|
||||
value = data.list[i].value;
|
||||
}
|
||||
}
|
||||
if (params == "总数") {
|
||||
} else {
|
||||
return `${params}；${value}%`;
|
||||
}
|
||||
},
|
||||
height: "30%",
|
||||
//图例列表的布局朝向。
|
||||
orient: "vertical",
|
||||
left: "5%",
|
||||
bottom: 2,
|
||||
//图例文字每项之间的间隔
|
||||
itemGap: 2,
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemHeight: 12,
|
||||
itemWidth: 25,
|
||||
textStyle: {
|
||||
//图例字体大小
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "85%"],
|
||||
center: ["50%", "50%"],
|
||||
startAngle: 180,
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderColor: "#092958",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list[0].num = props.list.wfgz;
|
||||
data.list[1].num = props.list.xstp;
|
||||
data.list[2].num = props.list.skym;
|
||||
data.list[3].num = props.list.xxdc;
|
||||
data.list[4].num = props.list.dzzh;
|
||||
data.list[5].num = props.list.zq;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
|
@ -140,7 +140,6 @@ const login = () => {
|
|||
.then((res) => {
|
||||
// let auth__code = env == "pc" ? res.auth_code : res.code;
|
||||
// console.log( 555,res, auth__code);
|
||||
a1.value = res.auth_code
|
||||
if (res.auth_code) {
|
||||
http
|
||||
.post(`/api/ggfwyth/ding/one_click_login?authCode=${res.auth_code}`)
|
||||
|
|
|
|||
|
|
@ -432,7 +432,6 @@ import Dialog from "./dialog/dialogMapDp.vue";
|
|||
import DialogCamera from "./dialog/dialogCameras.vue";
|
||||
import personDetail from "./person/index.vue";
|
||||
// import gcj02towgs84 from "@/utils/gcj02towgs84.js";
|
||||
// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
||||
import {
|
||||
DrawScene,
|
||||
PolygonDraw,
|
||||
|
|
|
|||
Loading…
Reference in New Issue