调整图表

src/assets/naive-theme.ts

@@ -39,12 +39,6 @@ const themeOverrides: GlobalThemeOverrides = {
     fontSizeLarge: '15px',
     fontSizeHuge: '16px'
   },
-  Tree: {
-    nodeTextColor: '#fff',
-    nodeColorHover: 'transparent',
-    nodeColorPressed: 'transparent',
-    nodeColorActive: 'transparent'
-  },
   DatePicker: {
     panelColor: 'rgba(3,20,26,0.95)',
     panelTextColor: 'rgba(255,255,255,0.8)',

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

@@ -40,6 +40,19 @@
               :height="455"
               :name="item.name"
             >
+              <div
+                v-if="index === 0"
+                class="dateChange"
+              >
+                <div
+                  v-for="(itm, index) in item.btns"
+                  :key="index"
+                  :class="{active:index === item.checkId}"
+                  @click="changeFn(index,item)"
+                >
+                  {{ itm }}
+                </div>
+              </div>
               <Echart :option="item.option" />
             </Box>
           </template>
@@ -61,7 +74,7 @@
             :name="itemd.name"
           >
             <div
-              v-if="indexd ===0"
+              v-if="indexd === 0"
               class="statistics"
             >
               <div class="statistics-top">
@@ -355,11 +368,7 @@ const leftContent = ref({
       name: '客运量',
       option: {
         grid: {
-          containLabel: true,
-          bottom: '10%',
-          top: '20%',
-          left: '5%',
-          right: '5%'
+          containLabel: true
         },
         tooltip: {
           trigger: 'axis',
@@ -367,19 +376,17 @@ const leftContent = ref({
             type: 'shadow'
           }
         },
-        // legend: {
-        //   top: 10,
-        //   right: 10,
-        //   data: ['负荷情况'],
-        //   itemWidth: 18,
-        //   itemHeight: 18,
-        //   itemGap: 30,
-        //   textStyle: {
-        //     fontSize: 18,
-        //     color: '#C9D2FA',
-        //     padding: [0, 0, 0, 10)],
-        //   },
-        // },
+        legend: {
+          top: 10,
+          right: 10,
+          itemWidth: 18,
+          itemHeight: 18,
+          itemGap: 30,
+          textStyle: {
+            fontSize: 18,
+            color: '#C9D2FA'
+          }
+        },
         xAxis: {
           // name: "班级",
           triggerEvent: true,
@@ -412,20 +419,11 @@ const leftContent = ref({
         },
         yAxis: [
           {
-            // name: '单位:万',
-            // type: 'value',
-            // nameTextStyle: {
-            //   color: '#444444',
-            // },
             splitNumber: 2,
             axisLabel: {
               show: true,
               fontSize: 18,
               color: '#C9D2FA'
-              // formatter: function (value) {
-              //   // 在标签后面添加百分号
-              //   return value + '%';
-              // },
             },
             axisLine: {
               show: false
@@ -447,7 +445,7 @@ const leftContent = ref({
               show: true,
               fontSize: 18,
               color: '#C9D2FA',
-              formatter(value:number) {
+              formatter(value: number) {
                 // 在标签后面添加百分号
                 return `${value}%`
               }
@@ -468,7 +466,7 @@ const leftContent = ref({
         ],
         series: [
           {
-            name: '负荷情况',
+            name: 'test1',
             type: 'bar',
             silent: true,
             itemStyle: {
@@ -488,7 +486,7 @@ const leftContent = ref({
             // },
           },
           {
-            name: '折线图名称',
+            name: 'test2',
             type: 'line',
             yAxisIndex: 1, // 与第二个 y 轴关联
             itemStyle: {
@@ -497,7 +495,9 @@ const leftContent = ref({
             data: [ 100, 80, 120, 60, 90, 70 ] // 折线图的数据
           }
         ]
-      }
+      },
+      btns: [ '总', '年', '月', '日' ],
+      checkId: 0
     },
     {
       name: '消费占比',
@@ -513,38 +513,50 @@ const leftContent = ref({
             fontWeight: 'normal'
           }
         },
+        grid: {
+          containLabel: true
+        },
         // 图表图例
         legend: {
           show: true,
-          orient: 'vertical', // 图例排列方向
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
           icon: 'circle', // 图例样式为圆形
           itemWidth: 10, // 图例图形的宽度
           itemHeight: 16, // 图例图形的高度
           itemGap: 10, // 图例项之间的间隔
-          right: '6%', // 图例距离容器右侧的距离
-          top: 'center', // 图例垂直居中
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 0, // 图例垂直居中
           textStyle: {
-            color: '#00ddff' // 图例文字颜色
+            color: 'white', // 图例文字颜色
+            fontSize: 20
           }
         },
-        color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d' ],
+
+        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '18%', '26%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
               show: true,
               formatter: '{b}\n{d}%',
-              color: '#b3c9d5'
+              color: 'white'
             },
             data: [
               { key: 2, name: '0次', value: 30619 },
               { key: 2, name: '1次', value: 5921 },
               { key: 2, name: '2次', value: 1153 },
               { key: 2, name: '3次', value: 266 },
-              { key: 2, name: '大于3次', value: 87 }
+              { key: 2, name: '大于3次', value: 87 },
+              { key: 2, name: '大于4次', value: 999 },
+              { key: 2, name: '12次', value: 5921 },
+              { key: 2, name: '22次', value: 1153 },
+              { key: 2, name: '32次', value: 266 },
+              { key: 2, name: '大于32次', value: 87 },
+              { key: 2, name: '大于42次', value: 999 }
             ]
           }
         ]
@@ -942,6 +954,10 @@ const rightContent = ref([
     ]
   }
 ] as any)
+
+function changeFn(id:number, item:any) {
+  item.checkId = id
+}
 </script>
 
 <style lang="scss" scoped>
@@ -988,6 +1004,38 @@ const rightContent = ref([
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
+
+    :deep(.box-content) {
+      position: relative;
+
+      .dateChange {
+        position: absolute;
+        width: 360px;
+        height: 30px;
+        border-radius: 30px;
+        border: solid 1px #2185E8;
+        left: 50%;
+        transform: translate(-50%,0);
+        top: 10px;
+        z-index: 2;
+        display: flex;
+        &>div{
+          width: 90px;
+          color: white;
+          font-size: 16px;
+          text-align: center;
+          cursor: pointer;
+          line-height: 30px;
+          &:not(:first-child){
+            border-left: solid 1px #2185E8;
+          }
+        }
+        .active{
+          background: #2185e860;
+        }
+      }
+    }
+
   }
 }