Merge branch 'master' of bls-dan/busRoute into master

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

@@ -1,22 +1,1206 @@
 <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>
     </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>
 
 <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: '上海'
+        }
+      ]
+    }
+  ]
+})
+
+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>
+<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>
+.right {
+  &-top {
+    display: flex;
+    gap: 10px;
+    // justify-content: space-between;
+  }
+}
+</style>

src/pages/views/home/index.vue

@@ -12,12 +12,12 @@ import passengerFlow from './components/PassengerFlow.vue'
 const weatherService = new WeatherService()
 const menus = [
   { name: '主页', component: markRaw(homePage) },
-  { name: '车辆运营', component: markRaw(cehicleOperation) },
-  { name: '线路分析', component: markRaw(lineAnalysis) },
+  { name: '线路运营', component: markRaw(cehicleOperation) },
+  { name: '客流分析', component: markRaw(passengerFlow) },
   { name: '维保动态', component: markRaw(maintenanceDynamics) },
   { name: '设施管理', component: markRaw(facilityManagement) },
   { name: '场站管理', component: markRaw(stationManagement) },
-  { name: '客流分析', component: markRaw(passengerFlow) }
+  { name: '线路分析', component: markRaw(lineAnalysis) }
 ]
 const active = ref(0)
 const currentComponent = ref(menus[active.value].component)
@@ -33,7 +33,7 @@ weatherService.getWeather().then((res) => { weather.value = res })
 <template>
   <div class="home">
     <div class="home-top">
-      <img src="../../../assets/img/6.svg">
+      <!-- <img src="../../../assets/img/6.svg"> -->
       <div class="home-top-user">
         <div>安全运营<span>100</span>天</div>
         <div v-if="weather">
@@ -68,7 +68,8 @@ weatherService.getWeather().then((res) => { weather.value = res })
       <component :is="currentComponent" />
     </div>
     <div class="home-bottom">
-      雅安市公共交通集团有限公司
+      xxxx
+      <!-- 雅安市公共交通集团有限公司 -->
     </div>
   </div>
 </template>