<template>
|
<Popup ref="pop" top="20px" :title="title" @close="close(true)" width="1000px" :maxHeight="'700px'"
|
@cancel="close(false)">
|
<div class="menuBox">
|
<div class="serachContent">
|
<el-select v-model="linesName" @change="setEchartChange" placeholder="请选择">
|
<el-option v-for="(item, key) in linesOption" :key="key" :label="item.line" :value="item.line">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="echartContent">
|
<div id="myEchart" class="myChart"> </div>
|
</div>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@/components/Tool/Popup.vue';
|
import { zhangzitou_selectInfos } from "@/api/mapView/map.js"
|
import mapData from '@/assets/js/mapSdk/mapData';
|
import * as echarts from 'echarts';
|
export default {
|
name: 'dataAnalysis',
|
components: { Popup },
|
data() {
|
return {
|
title: '数据统计',
|
allLines: [],
|
linesOption: [],
|
linesName: '',
|
myChart: null,
|
};
|
},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// removeLayer && this.removeImageLayer();
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
this.getAllLines();
|
},
|
getAllLines() {
|
zhangzitou_selectInfos().then(response => {
|
if (response.data.code != 200) {
|
return this.close();
|
}
|
this.setAllLinses(response.data.result)
|
})
|
},
|
setAllLinses(res) {
|
this.allLines = res;
|
this.linesOption = this.allLines.filter((item, index, self) =>
|
index === self.findIndex((t) => t.line === item.line)
|
);
|
this.linesName = this.linesOption[0].line;
|
this.setEchartChange();
|
},
|
setEchartChange() {
|
zhangzitou_selectInfos({
|
line: this.linesName
|
}).then(response => {
|
if (response.data.code != 200) return
|
const result = response.data.result;
|
|
const objData = []
|
result.filter(item => {
|
const type = mapData.dataStatistics[item.type];
|
if (type) {
|
item.type = type
|
}
|
objData.push({
|
value: item.count, name: item.type
|
})
|
})
|
this.setEchartShow(objData)
|
})
|
|
},
|
|
setEchartShow(res) {
|
|
let option = {
|
title: {
|
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [
|
{
|
name: this.linesName,
|
type: 'pie',
|
radius: '50%',
|
data: res,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
if (!this.myChart) {
|
|
this.myChart = echarts.init(document.getElementById("myEchart"));
|
}
|
|
|
this.myChart.setOption(option);
|
window.addEventListener("resize", () => {
|
this.myChart.resize();
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.menuBox {
|
position: relative;
|
height: 660px;
|
width: calc(100% - 0px);
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
|
.serachContent {
|
display: flex;
|
}
|
|
.echartContent {
|
flex: 1;
|
|
|
.myChart {
|
margin-top: 10px;
|
width: 100%;
|
height: calc(100% - 10px);
|
}
|
}
|
|
}
|
</style>
|
