Merge branch 'master' of https://git.caner.top/Caner/busRoute

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

@@ -47,8 +47,8 @@
                 <div
                   v-for="(itm, index) in item.btns"
                   :key="index"
-                  :class="{active:index === item.checkId}"
-                  @click="changeFn(index,item)"
+                  :class="{ active: index === item.checkId }"
+                  @click="changeFn(index, item)"
                 >
                   {{ itm }}
                 </div>
@@ -336,7 +336,6 @@ const datas = [
     name: '系列a'
   }
 ]
-const colorList = [ 'rgba(211, 68, 53, 1)', 'rgba(228, 133, 48, 1)', 'rgba(231, 185, 44, 1)', 'rgba(23, 165, 213, 1)' ]
 
 const leftContent = ref({
   topCount: [
@@ -368,7 +367,9 @@ const leftContent = ref({
       name: '客运量',
       option: {
         grid: {
-          containLabel: true
+          containLabel: true,
+          top: 100,
+          bottom: 100
         },
         tooltip: {
           trigger: 'axis',
@@ -377,10 +378,8 @@ const leftContent = ref({
           }
         },
         legend: {
-          top: 10,
-          right: 10,
-          itemWidth: 18,
-          itemHeight: 18,
+          top: 45,
+          lett: 'center',
           itemGap: 30,
           textStyle: {
             fontSize: 18,
@@ -388,49 +387,28 @@ const leftContent = ref({
           }
         },
         xAxis: {
-          // name: "班级",
           triggerEvent: true,
           data: [
-            '一部一车间',
-            '一部二车间',
-            '二部一车间',
-            '二部三车间',
-            '新能源',
-            '四部一车间'
+            '1月',
+            '2月',
+            '3月',
+            '4月',
+            '5月',
+            '6月'
           ],
           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',
@@ -442,7 +420,6 @@ const leftContent = ref({
             splitNumber: 2,
             position: 'right', // 放在右边
             axisLabel: {
-              show: true,
               fontSize: 18,
               color: '#C9D2FA',
               formatter(value: number) {
@@ -450,12 +427,6 @@ const leftContent = ref({
                 return `${value}%`
               }
             },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
             splitLine: {
               lineStyle: {
                 type: 'dashed',
@@ -466,7 +437,7 @@ const leftContent = ref({
         ],
         series: [
           {
-            name: 'test1',
+            name: '客运量',
             type: 'bar',
             silent: true,
             itemStyle: {
@@ -474,19 +445,9 @@ const leftContent = ref({
             },
             barWidth: 30,
             data: [ 200, 108, 200, 40, 210, 100 ]
-            // label: {
-            //   show: true, // 显示标签
-            //   position: 'top', // 标签显示在柱状图的上方
-            //   fontSize: 14,
-            //   color: '#fff',
-            //   formatter: function (params) {
-            //     // 在标签文本后添加百分号
-            //     return params.value + '%';
-            //   },
-            // },
           },
           {
-            name: 'test2',
+            name: '同比增长率',
             type: 'line',
             yAxisIndex: 1, // 与第二个 y 轴关联
             itemStyle: {
@@ -518,7 +479,6 @@ const leftContent = ref({
         },
         // 图表图例
         legend: {
-          show: true,
           type: 'scroll',
           orient: 'horizontal', // 图例排列方向
           icon: 'circle', // 图例样式为圆形
@@ -532,8 +492,6 @@ const leftContent = ref({
             fontSize: 20
           }
         },
-
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -541,7 +499,6 @@ const leftContent = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              show: true,
               formatter: '{b}\n{d}%',
               color: 'white'
             },
@@ -566,101 +523,105 @@ const leftContent = ref({
       name: '客流排名',
       option: {
         tooltip: {
-          show: false,
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           }
         },
-        legend: {
-          show: false
-        },
         grid: {
-          left: 0,
-          right: 30,
+          top: 20,
+          left: 20,
+          bottom: 20,
+          right: 20,
           containLabel: true
         },
         xAxis: {
-          show: true,
           type: 'value',
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: [ 'rgba(62, 113, 157, 0.5)' ]
-            }
-          },
           splitLine: {
             lineStyle: {
-              color: 'rgba(62, 113, 157, 0.5)'
+              color: '#fff'
             }
           },
           axisLabel: {
-            color: 'rgba(62, 113, 157, 1)'
+            color: '#fff',
+            fontSize: 18
           }
         },
         yAxis: {
           type: 'category',
           inverse: true,
-          axisLine: {
-            show: false
-          },
           axisTick: {
-            show: true,
-            alignWithLabel: true
+            alignWithLabel: true,
+            lineStyle: {
+              color: '#fff'
+            }
           },
-          axisPointer: {
-            label: {
-              show: true,
-              margin: 30
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
             }
           },
-          data: datas.map((item) => item.name),
+          data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
           axisLabel: {
-            margin: 100,
-            fontSize: 14,
-            align: 'left',
+            fontSize: 18,
             color: '#fff',
+            margin: 10,
             rich: {
               a1: {
-                color: '#fff',
-                backgroundColor: colorList[0],
-                width: 20,
-                height: 20,
+                backgroundColor: '#FFFF0050',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#FFFF00',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               a2: {
-                color: '#fff',
-                backgroundColor: colorList[1],
-                width: 20,
-                height: 20,
+                backgroundColor: '#F2F2F250',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#F2F2F2',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               a3: {
-                color: '#fff',
-                backgroundColor: colorList[2],
-                width: 20,
-                height: 20,
+                backgroundColor: '#FAAD0E50',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#FAAD0E',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               b: {
-                color: '#fff',
-                backgroundColor: colorList[3],
-                width: 20,
-                height: 20,
+                backgroundColor: '#00FFFF50',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#00FFFF',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               }
             },
-            formatter: (params: string) => {
-              let index = datas.map((item) => item.name).indexOf(params) as number
-              index += 1
-              if (index - 1 < 3) {
-                return `{a${index}|${index}} ${params}`
+            formatter: (params: string, _id: number) => {
+              const id = _id + 1
+              if (_id < 3) {
+                return `{a${id}|${id}}  ${params}`
               }
-              return `{b|${index}} ${params}`
+              return `{b|${id}}  ${params}`
             }
           }
         },
@@ -669,7 +630,7 @@ const leftContent = ref({
             z: 2,
             name: 'value',
             type: 'bar',
-            barWidth: 8,
+            barWidth: 25,
             zlevel: 1,
             data: datas.map((item, i) => ({
               value: item.value,
@@ -681,16 +642,15 @@ const leftContent = ref({
                   },
                   {
                     offset: 1,
-                    color: colorList[3]
+                    color: 'rgba(231, 185, 44, 1)'
                   }
                 ])
               }
             })),
             label: {
-              show: true,
               position: 'inside',
               color: '#fff',
-              fontSize: 14
+              fontSize: 16
             },
             itemStyle: {
               borderRadius: [ 0, 15, 15, 0 ]
@@ -703,101 +663,105 @@ const leftContent = ref({
       name: '线路客流排名',
       option: {
         tooltip: {
-          show: false,
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           }
         },
-        legend: {
-          show: false
-        },
         grid: {
-          left: 0,
-          right: 30,
+          top: 20,
+          left: 20,
+          bottom: 20,
+          right: 20,
           containLabel: true
         },
         xAxis: {
-          show: true,
           type: 'value',
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: [ 'rgba(62, 113, 157, 0.5)' ]
-            }
-          },
           splitLine: {
             lineStyle: {
-              color: 'rgba(62, 113, 157, 0.5)'
+              color: '#fff'
             }
           },
           axisLabel: {
-            color: 'rgba(62, 113, 157, 1)'
+            color: '#fff',
+            fontSize: 18
           }
         },
         yAxis: {
           type: 'category',
           inverse: true,
-          axisLine: {
-            show: false
-          },
           axisTick: {
-            show: true,
-            alignWithLabel: true
+            alignWithLabel: true,
+            lineStyle: {
+              color: '#fff'
+            }
           },
-          axisPointer: {
-            label: {
-              show: true,
-              margin: 30
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
             }
           },
-          data: datas.map((item) => item.name),
+          data: [ '1路(45689)', '2路(45689)', '3路(45689)', '4路(45689)', '5路(45689)', '6路(45689)', '7路(45689)', '8路(45689)' ],
           axisLabel: {
-            margin: 100,
-            fontSize: 14,
-            align: 'left',
+            fontSize: 18,
             color: '#fff',
+            margin: 20,
             rich: {
               a1: {
-                color: '#fff',
-                backgroundColor: colorList[0],
-                width: 20,
-                height: 20,
+                backgroundColor: '#FFFF0050',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#FFFF00',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               a2: {
-                color: '#fff',
-                backgroundColor: colorList[1],
-                width: 20,
-                height: 20,
+                backgroundColor: '#F2F2F250',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#F2F2F2',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               a3: {
-                color: '#fff',
-                backgroundColor: colorList[2],
-                width: 20,
-                height: 20,
+                backgroundColor: '#FAAD0E50',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#FAAD0E',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               },
               b: {
-                color: '#fff',
-                backgroundColor: colorList[3],
-                width: 20,
-                height: 20,
+                backgroundColor: '#00FFFF50',
+                width: 30,
+                height: 28,
                 align: 'center',
-                borderRadius: 10
+                borderRadius: 15,
+                fontSize: 18,
+                borderColor: '#00FFFF',
+                borderType: 'solid',
+                borderWidth: 1,
+                padding: [ 2, 0, 0, 0 ]
               }
             },
-            formatter: (params: string) => {
-              let index = datas.map((item) => item.name).indexOf(params) as number
-              index += 1
-              if (index - 1 < 3) {
-                return `{a${index}|${index}} ${params}`
+            formatter: (params: string, _id: number) => {
+              const id = _id + 1
+              if (_id < 3) {
+                return `{a${id}|${id}}  ${params}`
               }
-              return `{b|${index}} ${params}`
+              return `{b|${id}}  ${params}`
             }
           }
         },
@@ -806,7 +770,7 @@ const leftContent = ref({
             z: 2,
             name: 'value',
             type: 'bar',
-            barWidth: 8,
+            barWidth: 25,
             zlevel: 1,
             data: datas.map((item, i) => ({
               value: item.value,
@@ -818,16 +782,15 @@ const leftContent = ref({
                   },
                   {
                     offset: 1,
-                    color: colorList[3]
+                    color: 'rgba(231, 185, 44, 1)'
                   }
                 ])
               }
             })),
             label: {
-              show: true,
               position: 'inside',
               color: '#fff',
-              fontSize: 14
+              fontSize: 16
             },
             itemStyle: {
               borderRadius: [ 0, 15, 15, 0 ]
@@ -955,7 +918,7 @@ const rightContent = ref([
   }
 ] as any)
 
-function changeFn(id:number, item:any) {
+function changeFn(id: number, item: any) {
   item.checkId = id
 }
 </script>
@@ -1015,22 +978,25 @@ function changeFn(id:number, item:any) {
         border-radius: 30px;
         border: solid 1px #2185E8;
         left: 50%;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         top: 10px;
         z-index: 2;
         display: flex;
-        &>div{
+
+        &>div {
           width: 90px;
           color: white;
           font-size: 16px;
           text-align: center;
           cursor: pointer;
           line-height: 30px;
-          &:not(:first-child){
+
+          &:not(:first-child) {
             border-left: solid 1px #2185E8;
           }
         }
-        .active{
+
+        .active {
           background: #2185e860;
         }
       }