feat: 年份统计

app/src/views/Basic/components/BuildingStatistics.vue

@@ -30,7 +30,7 @@
     <script>
     import VueSeamlessScroll from "vue-seamless-scroll";
     export default {
-      name: "Regional",
+      name: "BuildingStatistics",
       components: {
         VueSeamlessScroll,
       },
@@ -88,20 +88,10 @@
       computed: {
         classOption() {
           return {
-            singleHeight: 26,
+            singleHeight: 51,
           };
         },
-      },
-      methods: {
-        levelText(text) {
-          return {
-            高风险: "#ff4f4f",
-            较高风险: "#ff833d",
-            一般风险: "#fbff3d",
-            低风险: "#44F1FF",
-          }[text];
-        },
-      },
+      }
     };
     </script>
     <style scoped lang='less'>
@@ -134,22 +124,6 @@
     font-size: 14x;
     position: relative;
     display: inline-block;
-  //   &::before {
-  //     position: absolute;
-  //     content: "";
-  //     left: 0;
-  //     top: 50%;
-  //     transform: translateY(-50%);
-  //     background-color: #1d525f;
-  //     height: 14px;
-  //     width: 1px;
-  //   }
-  //   &:nth-child(1) {
-  //     &::before {
-  //       height: 0px;
-  //       width: 0px;
-  //     }
-  //   }
   }
   
   li.row {
@@ -173,8 +147,7 @@
     .time,
     .type,
     .count,
-    .unit,
-    .is_notice {
+    .unit {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -192,9 +165,6 @@
     .unit {
       flex: 0.35;
     }
-    .is_notice {
-      flex: 0.15;
-    }
   
   }
     </style>

app/src/views/Basic/components/ChronologicDistributionStatistics.vue

@@ -0,0 +1,167 @@
+<template >
+  <div style="height: 260px;" ref="chronologicDistributionChart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "ChronologicDistributionStatistics",
+  mounted() {
+    const chart = echarts.init(this.$refs.chronologicDistributionChart)
+    let data = [
+      [new Date(`1990-01-01 00:00:00`), 801],
+      [new Date(`1991-01-01 00:00:00`), 756],
+      [new Date(`1992-01-01 00:00:00`), 712],
+      [new Date(`1993-01-01 00:00:00`), 687],
+      [new Date(`1994-01-01 00:00:00`), 623],
+      [new Date(`1995-01-01 00:00:00`), 598],
+      [new Date(`1996-01-01 00:00:00`), 598],
+      [new Date(`1997-01-01 00:00:00`), 598],
+      [new Date(`1998-01-01 00:00:00`), 598],
+      [new Date(`1999-01-01 00:00:00`), 780],
+      [new Date(`2000-01-01 00:00:00`), 598],
+      [new Date(`2001-01-01 00:00:00`), 598],
+      [new Date(`2002-01-01 00:00:00`), 690],
+      [new Date(`2003-01-01 00:00:00`), 598],
+      [new Date(`2004-01-01 00:00:00`), 598],
+      [new Date(`2005-01-01 00:00:00`), 598],
+      [new Date(`2006-01-01 00:00:00`), 598],
+      [new Date(`2007-01-01 00:00:00`), 598],
+      [new Date(`2008-01-01 00:00:00`), 598],
+      [new Date(`2009-01-01 00:00:00`), 598],
+      [new Date(`2010-01-01 00:00:00`), 598],
+      [new Date(`2011-01-01 00:00:00`), 598],
+      [new Date(`2012-01-01 00:00:00`), 598],
+      [new Date(`2013-01-01 00:00:00`), 598],
+      [new Date(`2014-01-01 00:00:00`), 598],
+      [new Date(`2015-01-01 00:00:00`), 598],
+      [new Date(`2016-01-01 00:00:00`), 598],
+      [new Date(`2017-01-01 00:00:00`), 598],
+      [new Date(`2018-01-01 00:00:00`), 598],
+      [new Date(`2019-01-01 00:00:00`), 598],
+      [new Date(`2020-01-01 00:00:00`), 598],
+      [new Date(`2021-01-01 00:00:00`), 598],
+      [new Date(`2022-01-01 00:00:00`), 598],
+      [new Date(`2023-01-01 00:00:00`), 598],
+      [new Date(`2025-01-01 00:00:00`), 598],
+      [new Date(`2026-01-01 00:00:00`), 598],
+      [new Date(`2027-01-01 00:00:00`), 598],
+      [new Date(`2028-01-01 00:00:00`), 598],
+      [new Date(`2029-01-01 00:00:00`), 598],
+      [new Date(`2030-01-01 00:00:00`), 598],
+    ];
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        position: function (pt) {
+          return [pt[0], '30%'];
+        },
+        formatter(value) {
+          console.log(value)
+          return `<span style="color:#fff;">${new Date(value[0].axisValueLabel).getFullYear()}年<br/>
+          ${value[0].marker} ${value[0].seriesName} <span style='color:#FAFF12;font-size:18px;font-weight:bold;'>${value[0].data[1]}</span> 栋<span>`
+        },
+        backgroundColor: 'rgba(0,224,255,0.46)',
+        borderColor: 'rgba(0,213,255, .6)',
+        extraCssText: 'z-index: 1000;',
+        confine: true
+      },
+      grid: {
+        right: '10px',
+        // top: '10px',
+        bottom: '20px'
+      },
+      
+      title:{
+          top:'5%',
+          right:'2%',
+          text:'单位：栋',
+          textStyle: {
+          align: 'center',
+          color: '#fff',
+          fontSize: 12
+      },
+    },
+      xAxis: [
+        {
+          type: 'time',
+          gridIndex: 0,
+          splitNumber: data.length / 10,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#35709caa'
+            }
+          },
+          axisLabel: {
+            color: '#fff',
+            show: true,
+            formatter: function (value) {
+                return new Date(value).getFullYear() + '年';
+            },
+            interval: 9
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#35709caa'
+            }
+          }
+        }
+      ],
+      yAxis: {
+        type: 'value',
+        boundaryGap:[0,'20%'],
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#35709caa',
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#fff'
+        }
+      },
+      series: [
+        {
+          name: '高层建筑数量',
+          type: 'line',
+          // smooth: true,
+          symbol: 'circle',
+          itemStyle: {
+            color: '#0770FF'
+          },
+          stack: 'a',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(58,77,233,0.8)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(58,77,233,0.3)'
+              }
+            ])
+          },
+          data: data
+        }
+      ]
+    })
+  }
+}
+</script>
+
+
+<style scoped lang='less'>
+.unit {
+  padding: 10px;
+  font-size: 12px;
+  display: flex;
+  justify-content: end;
+}
+</style>

app/src/views/Basic/components/HeightDistribution.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
       <div>
-        <div ref="chart" class="item" style="width: 490px; height: 300px" />
+        <div ref="chart" class="item" style="height: 300px" />
       </div>
     </div>
   </template>
@@ -39,15 +39,18 @@
          },
          title:{
             top:'5%',
-            right:'11%',
-            text:'单位(栋)',
+            right:'2%',
+            text:'单位：栋',
             textStyle: {
             align: 'center',
-            color: '#4784e8',
+            color: '#fff',
             fontSize: 12
-           
         }
         },
+        
+      grid: {
+        right: '10px',
+      },
     xAxis: {
         data: ['30m以下', '30~50m', '50~80m', '80~100m', '100m以上'],
         //坐标轴

app/src/views/Basic/components/Regional.vue

@@ -28,7 +28,7 @@
   <script>
   import VueSeamlessScroll from "vue-seamless-scroll";
   export default {
-    name: "Regional",
+    name: "RegionalComp",
     components: {
       VueSeamlessScroll,
     },
@@ -95,20 +95,10 @@
     computed: {
       classOption() {
         return {
-          singleHeight: 26,
+          singleHeight: 51,
         };
       },
     },
-    methods: {
-      levelText(text) {
-        return {
-          高风险: "#ff4f4f",
-          较高风险: "#ff833d",
-          一般风险: "#fbff3d",
-          低风险: "#44F1FF",
-        }[text];
-      },
-    },
   };
   </script>
   <style scoped lang='less'>
@@ -141,22 +131,6 @@ li.row > span {
   font-size: 14x;
   position: relative;
   display: inline-block;
-//   &::before {
-//     position: absolute;
-//     content: "";
-//     left: 0;
-//     top: 50%;
-//     transform: translateY(-50%);
-//     background-color: #1d525f;
-//     height: 14px;
-//     width: 1px;
-//   }
-//   &:nth-child(1) {
-//     &::before {
-//       height: 0px;
-//       width: 0px;
-//     }
-//   }
 }
 
 li.row {

app/src/views/Basic/index.vue

@@ -15,34 +15,12 @@
               style="margin-bottom: 6px"
               title="年代分布统计"
             >
-         
+            <ChronologicDistributionStatistics />
             </border-panel>
             <border-panel height="310px" title="高度分布统计">
             <HeightDistribution/>
             </border-panel>
           </div>
-        <!-- <div style="display: flex; flex-direction: column;">
-          <div style="height: 682px;"></div>
-          <div style="display: flex; justify-content: space-between;">
-            <border-panel
-              height="270px"
-              width="468px"
-              title="高度分布统计"
-              :headerType="2"
-              style="margin-right: 8px;"
-            >
-       
-            </border-panel>
-            <border-panel
-              height="270px"
-              width="468px"
-              title="隐患"
-              :headerType="2"
-            >
-     
-            </border-panel>
-          </div>
-        </div> -->
         <div>
           <border-panel
               height="521px"
@@ -65,10 +43,11 @@
 import BuildNum from './components/BuildNum.vue';
 import Regional from './components/Regional.vue'
 import BuildingStatistics from './components/BuildingStatistics.vue';
-import HeightDistribution from './components/HeightDistribution.vue'
+import HeightDistribution from './components/HeightDistribution.vue';
+import ChronologicDistributionStatistics from './components/ChronologicDistributionStatistics.vue';
   export default {
-    name: 'Basic',
-    components:{BuildNum,Regional,BuildingStatistics,HeightDistribution}
+    name: 'BasicPage',
+    components:{BuildNum,Regional,BuildingStatistics,HeightDistribution,ChronologicDistributionStatistics}
   }
   </script>