|
|
@@ -1,22 +1,779 @@
|
|
|
<template>
|
|
|
<Layout>
|
|
|
<template #left>
|
|
|
- <div>3333</div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="left-top">
|
|
|
+ <Box
|
|
|
+ v-for="(item, index) in leftContent.tCharts"
|
|
|
+ :key="index"
|
|
|
+ :width="680"
|
|
|
+ :height="406"
|
|
|
+ :name="item.name"
|
|
|
+ >
|
|
|
+ <Echart :option="item.option" />
|
|
|
+ </Box>
|
|
|
+ </div>
|
|
|
+ <Box
|
|
|
+ class="left-bottom"
|
|
|
+ :width="1370"
|
|
|
+ :height="818"
|
|
|
+ :name="'近期线路调整'"
|
|
|
+ >
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="title">
|
|
|
+ <div class="icon" />
|
|
|
+ <div>线路调整总览</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview">
|
|
|
+ <div
|
|
|
+ v-for="item in leftContent.bData.overview"
|
|
|
+ :key="item.name"
|
|
|
+ class="item"
|
|
|
+ >
|
|
|
+ <div class="icon" />
|
|
|
+ <div class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="num">
|
|
|
+ {{ item.value }}
|
|
|
+ </div>
|
|
|
+ 条
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bottom">
|
|
|
+ <div class="title">
|
|
|
+ <div class="icon" />
|
|
|
+ <div>线路调整详情</div>
|
|
|
+ </div>
|
|
|
+ <n-table
|
|
|
+ striped
|
|
|
+ size="large"
|
|
|
+ :bordered="false"
|
|
|
+ single-column
|
|
|
+ :bottom-bordered="false"
|
|
|
+ class="table"
|
|
|
+ >
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th> 序号 </th>
|
|
|
+ <th> 措施 </th>
|
|
|
+ <th> 区域 </th>
|
|
|
+ <th> 线路 </th>
|
|
|
+ <th> 线路类型 </th>
|
|
|
+ <th> 时间 </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr
|
|
|
+ v-for="item in 10"
|
|
|
+ :key="item"
|
|
|
+ >
|
|
|
+ <td> {{ item }} </td>
|
|
|
+ <td> 调整 </td>
|
|
|
+ <td> 雨城区 </td>
|
|
|
+ <td> 1路 </td>
|
|
|
+ <td> 常规 </td>
|
|
|
+ <td> 2023-01-01 </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </n-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Box>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<template #center>
|
|
|
<div>3333</div>
|
|
|
</template>
|
|
|
<template #right>
|
|
|
- <div>333</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right-top">
|
|
|
+ <Box
|
|
|
+ v-for="(item, index) in rightContent.tCharts"
|
|
|
+ :key="index"
|
|
|
+ :width="680"
|
|
|
+ :height="406"
|
|
|
+ :name="item.name"
|
|
|
+ >
|
|
|
+ <Echart :option="item.option" />
|
|
|
+ </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>
|
|
|
|
|
|
<script setup lang='ts'>
|
|
|
import Layout from '@/components/layout.vue'
|
|
|
+import Box from '@/components/box.vue'
|
|
|
+import Echart from '@/components/chart.vue'
|
|
|
+import { ref } from 'vue'
|
|
|
+import { graphic } from 'echarts'
|
|
|
+
|
|
|
+const leftContent = ref({
|
|
|
+ tCharts: [
|
|
|
+ {
|
|
|
+ name: '线路类型',
|
|
|
+ option: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // 图表图例
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
+ icon: 'circle', // 图例样式为圆形
|
|
|
+ itemWidth: 10, // 图例图形的宽度
|
|
|
+ itemHeight: 16, // 图例图形的高度
|
|
|
+ itemGap: 10, // 图例项之间的间隔
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
+ textStyle: {
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie', // 图表类型为饼图
|
|
|
+ radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
+ showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{b}： {c}条',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { key: 2, name: '常规', value: 130 },
|
|
|
+ { key: 2, name: '快线', value: 50 },
|
|
|
+ { key: 2, name: '特色线路', value: 50 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '区域里程',
|
|
|
+ option: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 20,
|
|
|
+ bottom: 20,
|
|
|
+ right: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#fff',
|
|
|
+ margin: 10,
|
|
|
+ rich: {
|
|
|
+ a1: {
|
|
|
+ backgroundColor: '#FFFF0050',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FFFF00',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
+ },
|
|
|
+ a2: {
|
|
|
+ backgroundColor: '#F2F2F250',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#F2F2F2',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
+ },
|
|
|
+ a3: {
|
|
|
+ backgroundColor: '#FAAD0E50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FAAD0E',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ backgroundColor: '#00FFFF50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
+ align: 'center',
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#00FFFF',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: (params: string, _id: number) => {
|
|
|
+ const id = _id + 1
|
|
|
+ if (_id < 3) {
|
|
|
+ return `{a${id}|${id}} ${params}`
|
|
|
+ }
|
|
|
+ return `{b|${id}} ${params}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ z: 2,
|
|
|
+ name: 'value',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 25,
|
|
|
+ zlevel: 1,
|
|
|
+ data: [ '80', '70', '60', '50', '40', '30', '20', '10' ],
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [ 0, 16, 16, 0 ],
|
|
|
+ color: new graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(20,167,250,0.3)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,255,209,1)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ position: 'inside',
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ bData: {
|
|
|
+ overview: [
|
|
|
+ {
|
|
|
+ name: '新辟线路',
|
|
|
+ value: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '撤销线路',
|
|
|
+ value: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '调整线路',
|
|
|
+ value: 10
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+})
|
|
|
+const rightContent = ref({
|
|
|
+ tCharts: [
|
|
|
+ {
|
|
|
+ name: '线路长度分布',
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ text: '总', // 图标内容文本
|
|
|
+ subtext: '200',
|
|
|
+ left: 'center', // 图标内容水平居中
|
|
|
+ top: 'center', // 图标内容垂直居中
|
|
|
+ // 文本样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // 图表图例
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
+ icon: 'circle', // 图例样式为圆形
|
|
|
+ itemWidth: 10, // 图例图形的宽度
|
|
|
+ itemHeight: 16, // 图例图形的高度
|
|
|
+ itemGap: 10, // 图例项之间的间隔
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
+ textStyle: {
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie', // 图表类型为饼图
|
|
|
+ radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
+ showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{b} : {d}%',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { key: 2, name: '5km', value: 180 },
|
|
|
+ { key: 2, name: '5-10km', value: 50 },
|
|
|
+ { key: 2, name: '10-15km', value: 30 },
|
|
|
+ { key: 2, name: '15-20km', value: 20 },
|
|
|
+ { key: 2, name: '20km', value: 10 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '线路占据分布',
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ text: '总', // 图标内容文本
|
|
|
+ subtext: '190',
|
|
|
+ left: 'center', // 图标内容水平居中
|
|
|
+ top: 'center', // 图标内容垂直居中
|
|
|
+ // 文本样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // 图表图例
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
+ icon: 'circle', // 图例样式为圆形
|
|
|
+ itemWidth: 10, // 图例图形的宽度
|
|
|
+ itemHeight: 16, // 图例图形的高度
|
|
|
+ itemGap: 10, // 图例项之间的间隔
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
+ textStyle: {
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie', // 图表类型为饼图
|
|
|
+ radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
+ showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{b} : {d}%',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { key: 2, name: '<300m', value: 180 },
|
|
|
+ { key: 2, name: '300-500m', value: 50 },
|
|
|
+ { key: 2, name: '300-1000m', value: 30 },
|
|
|
+ { key: 2, name: '>1000m', value: 20 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ center: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50,
|
|
|
+ bottom: '25%',
|
|
|
+ top: '20%'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ left: 'center',
|
|
|
+ bottom: '15%',
|
|
|
+ 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: 'km/h',
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: {}
|
|
|
+ },
|
|
|
+ bottom: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50,
|
|
|
+ bottom: 0
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ left: '50%',
|
|
|
+ itemWidth: 18,
|
|
|
+ itemHeight: 18,
|
|
|
+ itemGap: 30,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#C9D2FA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ // name: "班级",
|
|
|
+ triggerEvent: true,
|
|
|
+ data: [
|
|
|
+ '雨城区',
|
|
|
+ '芦山县',
|
|
|
+ '名山县',
|
|
|
+ '天全县',
|
|
|
+ '宝兴县',
|
|
|
+ '汉源县',
|
|
|
+ '雨城区',
|
|
|
+ '芦山县',
|
|
|
+ '名山县',
|
|
|
+ '天全县',
|
|
|
+ '宝兴县',
|
|
|
+ '汉源县'
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#C9D2FA'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ show: false,
|
|
|
+ color: '#F3F3F3',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: '人数',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameGap: 50,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ splitNumber: 2,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#C9D2FA'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#3E4A82'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '客流量',
|
|
|
+ type: 'bar',
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#FFD35D'// 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#7ec2f382'// 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#1890ff21' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barWidth: 30,
|
|
|
+ data: [ 200, 108, 200, 40, 210, 100, 200, 108, 200, 40, 210, 100 ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
- <style lang="scss" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.left {
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-bottom {
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 35px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.7);
|
|
|
+ font-size: 20px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview {
|
|
|
+ display: flex;
|
|
|
+ padding: 34px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 375px;
|
|
|
+ height: 65px;
|
|
|
+ background: rgba(27, 175, 255, 0.298);
|
|
|
+ border: 1px solid #00FFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 20px;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: #00FFFF;
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: Impact Normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table{
|
|
|
+ margin-top: 30px;
|
|
|
+ text-align: center;
|
|
|
+ th{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- </style>
|
|
|
+ }
|
|
|
+}
|
|
|
+.right{
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bls-dan