feat:基础信息高度分布统计

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

@@ -0,0 +1,170 @@
+<template>
+    <div>
+      <div>
+        <div ref="chart" class="item" style="width: 490px; height: 300px" />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    data() {
+      return {
+        chart: null,
+        timer: "",
+      }
+    },
+    mounted() {
+      // 初始化图表实例
+      const chartDom = this.$refs.chart;
+    //   // 初始化图表实例
+      this.chart = echarts.init(chartDom);
+      this.initChart();
+      
+    },
+    methods: {
+      initChart(data) {
+        const datalsit = [220, 182, 191, 234, 290, 330, 310]
+        const sideData = datalsit.map(item => item + 4.5)
+        const option = {
+            backgroundColor: "#041730",
+            tooltip: {
+        trigger: 'axis',
+        formatter: "{b} : {c}",
+        axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        },
+        
+         },
+         title:{
+            top:'5%',
+            right:'11%',
+            text:'单位(栋)',
+            textStyle: {
+            align: 'center',
+            color: '#4784e8',
+            fontSize: 12
+           
+        }
+        },
+    xAxis: {
+        data: ['30m以下', '30~50m', '50~80m', '80~100m', '100m以上'],
+        //坐标轴
+        axisLine: {
+            lineStyle: {
+                color: '#3eb2e8'
+            }
+        },
+        //坐标值标注
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#fff',
+            }
+        }
+    },
+    yAxis: {
+      
+        //坐标轴
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            //y轴刻度线
+            show: false
+          },
+          axisLine: {
+            //y轴
+            show: false
+          },
+        //坐标值标注
+        axisLabel: {
+            show: true,
+            textStyle: {
+                color: '#fff',
+            }
+        },
+        //分格线
+        splitLine: {
+            lineStyle: {
+                color: '#4784e8'
+            }
+        }
+    },
+  
+    series: [{
+       
+        tooltip: {
+            show: false
+            
+        },
+        type: 'bar',
+        barWidth:6,
+        itemStyle: {
+            normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: "#0B4EC3" // 0% 处的颜色
+                }, {
+                    offset: 0.6,
+                    color: "#138CEB" // 60% 处的颜色
+                }, {
+                    offset: 1,
+                    color: "#17AAFE" // 100% 处的颜色
+                }], false)
+            }
+        },
+        data: data,
+        barGap: 0
+    }, {
+        type: 'bar',
+        barWidth: 20,
+        itemStyle: {
+            normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: "#09337C" // 0% 处的颜色
+                }, {
+                    offset: 0.6,
+                    color: "#0761C0" // 60% 处的颜色
+                }, {
+                    offset: 1,
+                    color: "#0575DE" // 100% 处的颜色
+                }], false)
+            }
+        },
+        barGap: 0,
+        data: sideData
+    }, {
+        name: 'b',
+        tooltip: {
+            show: false
+        },
+        type: 'pictorialBar',
+        itemStyle: {
+            borderWidth: 1,
+            borderColor: '#0571D5',
+            color: '#1779E0'
+        },
+        symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+        symbolSize: ['30', '12'],
+        symbolOffset: ['0', '-11'],
+        //symbolRotate: -5,
+        symbolPosition: 'end',
+        data: data,
+        z: 3
+    }]
+        };
+  
+        this.chart.setOption(option);
+        //自适应图表
+        window.onresize = this.chart.resize;
+      },
+   
+    },
+  };
+  </script>
+  
+  <style scoped></style>
+  

app/src/views/Basic/index.vue

@@ -11,15 +11,14 @@
             <BuildNum/>
             </border-panel>
             <border-panel
-              height="350px"
+              height="320px"
               style="margin-bottom: 6px"
               title="年代分布统计"
             >
          
             </border-panel>
-            <border-panel height="280px" title="高度分布统计">
-              <!-- 风险等级 -->
-     
+            <border-panel height="310px" title="高度分布统计">
+            <HeightDistribution/>
             </border-panel>
           </div>
         <!-- <div style="display: flex; flex-direction: column;">
@@ -66,9 +65,10 @@
 import BuildNum from './components/BuildNum.vue';
 import Regional from './components/Regional.vue'
 import BuildingStatistics from './components/BuildingStatistics.vue';
+import HeightDistribution from './components/HeightDistribution.vue'
   export default {
     name: 'Basic',
-    components:{BuildNum,Regional,BuildingStatistics}
+    components:{BuildNum,Regional,BuildingStatistics,HeightDistribution}
   }
   </script>