|
|
@@ -38,7 +38,7 @@
|
|
|
class="line"
|
|
|
>
|
|
|
<div
|
|
|
- :class="'index'+ i"
|
|
|
+ :class="'index' + i"
|
|
|
class="index"
|
|
|
>
|
|
|
{{ i + 1 }}
|
|
|
@@ -60,7 +60,40 @@
|
|
|
<div>777</div>
|
|
|
</template>
|
|
|
<template #right>
|
|
|
- <div>777</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right-top">
|
|
|
+ <Box
|
|
|
+ :width="460"
|
|
|
+ :height="406"
|
|
|
+ :name="'客运量排名'"
|
|
|
+ >
|
|
|
+ <Echart :option="rightContent.top1" />
|
|
|
+ </Box>
|
|
|
+ <Box
|
|
|
+ :width="900"
|
|
|
+ :height="406"
|
|
|
+ :name="'运能分析'"
|
|
|
+ >
|
|
|
+ <Echart :option="rightContent.top2" />
|
|
|
+ </Box>
|
|
|
+ </div>
|
|
|
+ <Box
|
|
|
+ class="right-center"
|
|
|
+ :width="1370"
|
|
|
+ :height="406"
|
|
|
+ :name="'今日客流'"
|
|
|
+ >
|
|
|
+ <Echart :option="rightContent.center" />
|
|
|
+ </Box>
|
|
|
+ <Box
|
|
|
+ class="right-bottom"
|
|
|
+ :width="1370"
|
|
|
+ :height="406"
|
|
|
+ :name="'本月客流'"
|
|
|
+ >
|
|
|
+ <Echart :option="rightContent.bottom" />
|
|
|
+ </Box>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</Layout>
|
|
|
</template>
|
|
|
@@ -521,6 +554,572 @@ const leftContent = ref({
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
+
|
|
|
+const rightContent = ref({
|
|
|
+ top1: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ bottom: '0'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ right: '40%',
|
|
|
+ itemWidth: 18,
|
|
|
+ itemHeight: 18,
|
|
|
+ itemGap: 30,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#C9D2FA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#232e32'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ '1路', '2路', '3路', '4路', '5路' ],
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [ {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ data: [ '1路', '2路', '3路', '4路', '5路' ],
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // "margin": 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } ],
|
|
|
+ series: [ { // 内
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 30,
|
|
|
+ barGap: 0.5,
|
|
|
+ name: '客流量',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16,
|
|
|
+ padding: [ 0, 10 ],
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 36
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legendHoverLink: false,
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: new graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 1,
|
|
|
+ [ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#0f224066'// 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#625fdf' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ )
|
|
|
+ },
|
|
|
+ data: [ '80', '70', '60', '50', '40' ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ top2: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ left: 'center',
|
|
|
+ top: '10',
|
|
|
+ icon: 'stack',
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#646464',
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [ {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ // formatter: (value: number) => format( 1'时')
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
|
|
|
+ } ],
|
|
|
+ yAxis: [ {
|
|
|
+ name: '人数/人',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameGap: 50,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ // max: 1000,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#A1A7B3'
|
|
|
+ // type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [ {
|
|
|
+ name: '客流',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(19, 95, 172, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(112, 154, 195, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '运能',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50, 216, 205, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35, 208, 196, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: {}
|
|
|
+ },
|
|
|
+ center: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ left: 'center',
|
|
|
+ top: '10',
|
|
|
+ icon: 'stack',
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#646464',
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [ {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ // formatter: (value: number) => format( 1'时')
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
|
|
|
+ } ],
|
|
|
+ yAxis: [ {
|
|
|
+ name: '人数/人',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameGap: 50,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ // max: 1000,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#A1A7B3'
|
|
|
+ // type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [ {
|
|
|
+ name: '当前',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(19, 95, 172, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(112, 154, 195, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '环比',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50, 216, 205, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35, 208, 196, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '同比',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50, 216, 205, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35, 208, 196, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: {}
|
|
|
+ },
|
|
|
+ bottom: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ left: 'center',
|
|
|
+ top: '10',
|
|
|
+ icon: 'stack',
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#646464',
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [ {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ // formatter: (value: number) => format( 1'时')
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
|
|
|
+ } ],
|
|
|
+ yAxis: [ {
|
|
|
+ name: '人数/人',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameGap: 50,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ // max: 1000,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#A1A7B3'
|
|
|
+ // type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [ {
|
|
|
+ name: '当前',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(19, 95, 172, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(112, 154, 195, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '环比',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50, 216, 205, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35, 208, 196, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '同比',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#23D0C4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50, 216, 205, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35, 208, 196, 0.4)'
|
|
|
+ }
|
|
|
+ ], false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: {}
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -596,4 +1195,12 @@ const leftContent = ref({
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.right {
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ // justify-content: space-between;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
bls-dan