客运分析左侧页面

src/assets/css/globalStyle.scss

@@ -0,0 +1,120 @@
+* {
+  box-sizing: border-box;
+//   user-select: none;
+}
+
+/* 去除标签自带的margin和padding */
+body,
+ol,
+ul,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+th,
+td,
+dl,
+dd,
+form,
+fieldset,
+legend,
+input,
+textarea,
+select,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+/* 设置页面的统一的样式 */
+body {
+  word-wrap: break-word;
+}
+
+/* 去除a标签默认样式 */
+a {
+  text-decoration: none;
+}
+
+/* i使斜体的文字正常 em使强调的内容正常 */
+em,
+i {
+  font-style: normal;
+}
+
+strong,
+b {
+  font-weight: 100;
+}
+
+/* 去除li元素默认的小圆点 */
+li {
+  list-style: none;
+}
+
+/* 去除图片的margin和padding */
+img {
+  display: block;
+}
+
+/* 设置单元格为单线样式 */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 首行缩进连两个单位 */
+.indent {
+  text-indent: 2em;
+}
+
+.noborder {
+  border: 0;
+}
+
+/* 省略号 */
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+*:focus-visible {
+  outline: none !important;
+}
+
+*:focus-visible {
+  outline: none !important;
+}
+
+/* 设置滚动条的宽度和背景色 */
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+/* 设置滚动条轨道的样式 */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+/* 设置滚动条滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #57a3f3;
+  border-radius: 10px;
+}
+
+/* 设置滚动条角落的样式 */
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+tbody::-webkit-scrollbar {
+  width:0;
+  height: 0;
+}
+

src/pages/main.ts

@@ -4,6 +4,7 @@ import { createPinia } from 'pinia'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import piniaPersist from 'pinia-plugin-persist'
 import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
+import '@/assets/css/globalStyle.scss'
 import '@vuemap/vue-amap/dist/style.css'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'

src/pages/views/home/components/PassengerFlow.vue

@@ -1,7 +1,60 @@
 <template>
   <Layout>
     <template #left>
-      <div>777</div>
+      <div class="left">
+        <Box
+          :width="1370"
+          :height="406"
+          :name="'区域流量'"
+          class="left-top"
+        >
+          <Echart
+            v-for="(item, index) in leftContent.tCharts"
+            :key="index"
+            :option="item.option"
+          />
+        </Box>
+        <div class="left-bottom">
+          <template
+            v-for="(item, index) in leftContent.bCharts"
+            :key="index"
+          >
+            <Box
+              :width="450"
+              :height="400"
+              :name="item.name"
+            >
+              <Echart
+                v-if="!item.isList"
+                :option="item.option"
+              />
+              <div
+                v-else
+                class="lineList"
+              >
+                <div
+                  v-for="line, i in item.list"
+                  :key="i"
+                  class="line"
+                >
+                  <div
+                    :class="'index'+ i"
+                    class="index"
+                  >
+                    {{ i + 1 }}
+                  </div>
+                  <div class="name">
+                    {{ line.name }}
+                  </div>
+                  <div class="content">
+                    {{ line.startStation }} → {{ line.endStation }}
+                  </div>
+                </div>
+              </div>
+            </Box>
+          </template>
+        </div>
+      </div>
     </template>
     <template #center>
       <div>777</div>
@@ -14,9 +67,533 @@
 
 <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: {
+        title: {
+          text: '客流总数/万人', // 图标内容文本
+          subtext: '10',
+          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: 'vertical', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 10, // 图例距离容器右侧的距离
+          top: 'center', // 图例垂直居中
+          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: '{d}%',
+              color: 'white'
+            },
+            data: [
+              { key: 2, name: '雨城区', value: 30619 },
+              { key: 2, name: '芦山县', value: 5921 },
+              { key: 2, name: '名山县', value: 1153 },
+              { key: 2, name: '天全县', value: 266 },
+              { key: 2, name: '宝兴县', value: 87 },
+              { key: 2, name: '汉源县', value: 999 },
+              { key: 2, name: '石棉县', value: 5921 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      name: '客流线路分布',
+      option: {
+        grid: {
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: 10,
+          right: '40%',
+          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: [
+          {
+            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,
+                  1,
+                  0,
+                  0,
+                  [ {
+                    offset: 0,
+                    color: 'rgba(96, 132, 255, 0)'// 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(96, 132, 255, 1)' // 100% 处的颜色
+                  }
+                  ],
+                  false
+                )
+              }
+            },
+            barWidth: 30,
+            data: [ 200, 108, 200, 40, 210, 100 ]
+          }
+        ]
+      }
+    }
+  ],
+  bCharts: [
+    {
+      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: {
+        title: {
+          text: '客流总数/万人', // 图标内容文本
+          subtext: '10',
+          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: '{d}%',
+              color: 'white'
+            },
+            data: [
+              { key: 2, name: '老年卡', value: 180 },
+              { key: 2, name: '电子钱包', value: 50 },
+              { key: 2, name: '现金', value: 30 },
+              { key: 2, name: '学生卡', value: 20 },
+              { key: 2, name: '免费', value: 10 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      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: '2km', value: 5 },
+              { key: 2, name: '2-5km', value: 3 },
+              { key: 2, name: '5-10km', value: 2 },
+              { key: 2, name: '>10km', value: 1 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      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: '<30分钟', value: 130 },
+              { key: 2, name: '30-60分钟', value: 50 },
+              { key: 2, name: '60-70分钟', value: 50 },
+              { key: 2, name: '>90分钟', value: 50 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      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
+          }
+        },
+
+        series: [
+          {
+            type: 'pie', // 图表类型为饼图
+            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+            label: {
+              show: true,
+              formatter: '{b}： {c}人次',
+              color: 'white'
+            },
+            data: [
+              { key: 2, name: '0次', value: 130 },
+              { key: 2, name: '1次', value: 30 },
+              { key: 2, name: '2次', value: 20 },
+              { key: 2, name: '3次以上', value: 10 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      name: '热门出行线路排名',
+      isList: true,
+      list: [
+        {
+          name: '1号',
+          startStation: '北京',
+          endStation: '上海'
+        },
+        {
+          name: '2号',
+          startStation: '北京',
+          endStation: '上海'
+        },
+        {
+          name: '3号',
+          startStation: '北京',
+          endStation: '上海'
+        },
+        {
+          name: '4号',
+          startStation: '北京',
+          endStation: '上海'
+        },
+        {
+          name: '5号',
+          startStation: '北京',
+          endStation: '上海'
+        }
+      ]
+    }
+  ]
+})
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+.left {
+  &-top {
+    :deep(.box-content) {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-bottom {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    :deep(.box-content) {
+      position: relative;
+    }
+
+    .lineList {
+      padding: 25px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px;
+      height: 335px;
+      overflow: scroll;
+
+      .line {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        font-size: 24px;
+        color: #fff;
+
+        .index {
+          width: 45px;
+          height: 45px;
+          line-height: 45px;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #00FFFF;
+          background-color: rgba(0, 191, 191, 0.3);
+
+          &.index0 {
+            border: 1px solid #FFFF00;
+            background-color: rgba(255, 255, 0, 0.3);
+          }
+
+          &.index1 {
+            border: 1px solid #F2F2F2;
+            background: rgba(242, 242, 242, 0.298);
+          }
+
+          &.index2 {
+            border: 1px solid #FAAD0E;
+            background: rgba(250, 173, 14, 0.298);
+          }
+        }
+
+        .name {
+          margin: 0 50px 0 15px;
+          text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.8);
+        }
+
+        .content {
+          color: #80FFFF;
+          font-size: 20px;
+        }
+      }
+    }
 
-  </style>
+  }
+}
+</style>