|
|
@@ -129,9 +129,30 @@
|
|
|
</div>
|
|
|
<div class="content-list-box boxMap">
|
|
|
<MapCharts id="box-map" :option="boxMap" />
|
|
|
+ <div class="boxMap-box flex-wrap">
|
|
|
+ <div class="boxMap-pie domestic">
|
|
|
+ <PieCharts id="domestic" :option="domesticOption" />
|
|
|
+ </div>
|
|
|
+ <div class="boxMap-pie international">
|
|
|
+ <PieCharts id="international" :option="internationalOption" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="content-list-box">
|
|
|
- <div class="content-list-box-bp-title">统计数据</div>
|
|
|
+ <div class="content-list-box-bp">
|
|
|
+ <div class="content-list-box-bp-title">航站运输排行</div>
|
|
|
+ <div class="terminal-transportation mt36">
|
|
|
+ <vue-seamless-scroll class="scrollTable" :class-option="defaultOption">
|
|
|
+ <div class="terminal-transportation-list flex-wrap" v-for="item in terminalData" :key="item.id">
|
|
|
+ <div class="name">{{item.name}}</div>
|
|
|
+ <div class="progress">
|
|
|
+ <el-progress :percentage="item.percentage" :color="customColor"></el-progress>
|
|
|
+ </div>
|
|
|
+ <div class="num">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </vue-seamless-scroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -143,6 +164,7 @@ import LineCharts from '@/layout/components/Echarts/commonChartsLine.vue'
|
|
|
import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
|
|
|
import PieCharts from '@/layout/components/Echarts/commonChartsPie.vue'
|
|
|
import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
|
|
|
+import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
const citydata = [{
|
|
|
name: "北京",
|
|
|
value: 974
|
|
|
@@ -283,13 +305,65 @@ const citydata = [{
|
|
|
name: "南海诸岛",
|
|
|
value: 53
|
|
|
}]
|
|
|
+let data = {
|
|
|
+ female: {
|
|
|
+ name: '中转数',
|
|
|
+ data: [{
|
|
|
+ value: 43,
|
|
|
+ label: '2022-01'
|
|
|
+ }, {
|
|
|
+ value: 34,
|
|
|
+ label: '2022-02'
|
|
|
+ }, {
|
|
|
+ value: 53,
|
|
|
+ label: '2022-03'
|
|
|
+ }, {
|
|
|
+ value: 12,
|
|
|
+ label: '2022-04'
|
|
|
+ }, {
|
|
|
+ value: 34,
|
|
|
+ label: '2022-05'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ male: {
|
|
|
+ name: '航班数',
|
|
|
+ data: [{
|
|
|
+ value: 43,
|
|
|
+ label: '2022-01'
|
|
|
+ }, {
|
|
|
+ value: 34,
|
|
|
+ label: '2022-02'
|
|
|
+ }, {
|
|
|
+ value: 53,
|
|
|
+ label: '2022-03'
|
|
|
+ }, {
|
|
|
+ value: 12,
|
|
|
+ label: '2022-04'
|
|
|
+ }, {
|
|
|
+ value: 34,
|
|
|
+ label: '2022-05'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+};
|
|
|
+let yAxisData = new Set();
|
|
|
+let legendData = [];
|
|
|
+_.forEach(data, (d) => {
|
|
|
+ legendData.push(d.name);
|
|
|
+ _.forEach(d.data, (item) => {
|
|
|
+ yAxisData.add(item.label);
|
|
|
+ });
|
|
|
+});
|
|
|
+let top = 0;
|
|
|
+let bottom = 0;
|
|
|
+yAxisData = [...yAxisData];
|
|
|
export default {
|
|
|
name: 'statisticalAnalysisContent',
|
|
|
components: {
|
|
|
LineCharts,
|
|
|
BarCharts,
|
|
|
PieCharts,
|
|
|
- MapCharts
|
|
|
+ MapCharts,
|
|
|
+ vueSeamlessScroll
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -436,7 +510,165 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- dataOption: {},
|
|
|
+ dataOption: {
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: [{
|
|
|
+ left: '10%',
|
|
|
+ width: '40%',
|
|
|
+ containLabel: true,
|
|
|
+ bottom
|
|
|
+ }, {
|
|
|
+ left: '8%',
|
|
|
+ width: '0%',
|
|
|
+ bottom: bottom + 16
|
|
|
+ }, {
|
|
|
+ right: '10%',
|
|
|
+ width: '40%',
|
|
|
+ containLabel: true,
|
|
|
+ bottom
|
|
|
+ }].map(item => _.merge({
|
|
|
+ top
|
|
|
+ }, item)),
|
|
|
+ xAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ gridIndex: 1,
|
|
|
+ show: true
|
|
|
+ }, {
|
|
|
+ gridIndex: 2,
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }].map((item) => _.merge(item, {
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ margin: 10
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E0E0E0',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })),
|
|
|
+ yAxis: [{
|
|
|
+ position: 'right',
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 1,
|
|
|
+ position: 'center',
|
|
|
+ axisLabel: {
|
|
|
+ align: 'center',
|
|
|
+ padding: [8, 0, 0, 0],
|
|
|
+ fontSize: 12,
|
|
|
+ color: `#fff`
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 2,
|
|
|
+ position: 'left',
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ].map((item) => {
|
|
|
+ return _.merge(item, {
|
|
|
+ type: 'category',
|
|
|
+ inverse: false,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E0E0E0'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: yAxisData
|
|
|
+ });
|
|
|
+ }),
|
|
|
+ series: [{
|
|
|
+ name: _.get(data, 'male.name'),
|
|
|
+ label: {
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2D67E3',
|
|
|
+ barBorderRadius: [4, 0, 0, 4]
|
|
|
+ },
|
|
|
+ data: _.map(_.get(data, 'male.data'), d => d.value)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ name: _.get(data, 'female.name'),
|
|
|
+ label: {
|
|
|
+
|
|
|
+ position: 'right'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#E9C042',
|
|
|
+ barBorderRadius: [0, 4, 4, 0]
|
|
|
+ },
|
|
|
+ data: _.map(_.get(data, 'female.data'), d => d.value)
|
|
|
+ }
|
|
|
+ ].map(item => _.merge(item, {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 11,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontFamily: 'Rubik-Medium',
|
|
|
+ fontSize: 14,
|
|
|
+ distance: 10
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ },
|
|
|
pieOption: {
|
|
|
color: ["#E5983E", "#8249C9 ", "#B03377"],
|
|
|
series: [
|
|
|
@@ -547,6 +779,261 @@ export default {
|
|
|
data: citydata
|
|
|
},
|
|
|
]
|
|
|
+ },
|
|
|
+ domesticOption: {
|
|
|
+ title: [{
|
|
|
+ text: '国内',
|
|
|
+ x: 'center',
|
|
|
+ top: '55%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFFFFF',
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: '100',
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '60%',
|
|
|
+ x: 'center',
|
|
|
+ top: '32%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '24',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ fontFamily: 'DINAlternate-Bold, DINAlternate',
|
|
|
+ foontWeight: '600',
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ polar: {
|
|
|
+ radius: ['50%', '100%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ max: 100,
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+ type: 'category',
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ roundCap: true,
|
|
|
+ barWidth: 8,
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: '#A4A3BF',
|
|
|
+ },
|
|
|
+ data: [60],
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ startAngle: 80,
|
|
|
+ radius: ['50%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(66, 66, 66, .1)',
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#fff',
|
|
|
+ },
|
|
|
+ data: [100],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ internationalOption: {
|
|
|
+ title: [{
|
|
|
+ text: '国际',
|
|
|
+ x: 'center',
|
|
|
+ top: '55%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFFFFF',
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: '100',
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '10%',
|
|
|
+ x: 'center',
|
|
|
+ top: '32%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '24',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ fontFamily: 'DINAlternate-Bold, DINAlternate',
|
|
|
+ foontWeight: '600',
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ polar: {
|
|
|
+ radius: ['50%', '100%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ max: 100,
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+ type: 'category',
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ roundCap: true,
|
|
|
+ barWidth: 8,
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: '#A4A3BF',
|
|
|
+ },
|
|
|
+ data: [10],
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ startAngle: 80,
|
|
|
+ radius: ['50%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(66, 66, 66, .1)',
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#fff',
|
|
|
+ },
|
|
|
+ data: [100],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ terminalData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: 'PEK',
|
|
|
+ num: 903133,
|
|
|
+ percentage: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: 'CTU',
|
|
|
+ num: 572570,
|
|
|
+ percentage: 25
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: 'TFU',
|
|
|
+ num: 263859,
|
|
|
+ percentage: 30
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: 'CKG',
|
|
|
+ num: 260811,
|
|
|
+ percentage: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: 'HGH',
|
|
|
+ num: 184195,
|
|
|
+ percentage: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: 'PVG',
|
|
|
+ num: 104716,
|
|
|
+ percentage: 70
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: 'SZX',
|
|
|
+ num: 104371,
|
|
|
+ percentage: 90
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: 'CKG',
|
|
|
+ num: 260811,
|
|
|
+ percentage: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ name: 'HGH',
|
|
|
+ num: 184195,
|
|
|
+ percentage: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ name: 'PVG',
|
|
|
+ num: 104716,
|
|
|
+ percentage: 70
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ name: 'SZX',
|
|
|
+ num: 104371,
|
|
|
+ percentage: 90
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ customColor: '#6EADE8'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ defaultOption () {
|
|
|
+ return {
|
|
|
+ step: 0.5, //数值越大速度滚动越快
|
|
|
+ limitMoveNum: 0, //开始无缝滚动的数据量 //this.fourDatata.length
|
|
|
+ hoverStop: true, //是否开启鼠标悬停stop
|
|
|
+ direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
+ openWatch: true, //开启数据实时监控刷新dom
|
|
|
+ singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
+ singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
+ waitTime: 1000 //单步运动停止的时间(默认值1000ms)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -749,7 +1236,7 @@ export default {
|
|
|
&-charts {
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
- min-height: 140px;
|
|
|
+ min-height: 200px;
|
|
|
}
|
|
|
}
|
|
|
.pie-data {
|
|
|
@@ -891,6 +1378,50 @@ export default {
|
|
|
.boxMap {
|
|
|
background-image: none;
|
|
|
position: relative;
|
|
|
+ &-box {
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &-pie {
|
|
|
+ position: relative;
|
|
|
+ width: 145px;
|
|
|
+ height: 145px;
|
|
|
+ margin-right: 55px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .terminal-transportation {
|
|
|
+ .scrollTable {
|
|
|
+ max-height: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &-list {
|
|
|
+ margin-top: 36px;
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ ::v-deep .progress {
|
|
|
+ min-width: 330px;
|
|
|
+ margin: 0 36px;
|
|
|
+ .el-progress-bar {
|
|
|
+ padding-right: 0;
|
|
|
+ .el-progress-bar__outer {
|
|
|
+ background-color: #534e75;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-progress__text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>>
|
