页面报错调整

src/components/Echarts/carChart.vue

@@ -0,0 +1,179 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+  </template>
+  
+  <script>
+  import echarts from 'echarts'
+  
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+  
+  
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '290px'
+      },
+      chartData: {
+        type: Array,
+        required: true
+      },
+      legend: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+            right: 20,
+            top: 0,
+            itemWidth: 8, // 设置图例标记的宽度
+            itemHeight: 8, // 设置图例标记的高度
+            textStyle:{
+              color:'#FFF',
+            }
+          }
+        },
+      },
+      grid: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+            top: 30,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          }
+        },
+      },
+      xAxis: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+  
+          }
+        }
+      },
+  
+      yColor:{
+        type:String,
+        default:'#FFF'
+      },
+      lColor:{
+        type:String,
+        default:'#333'
+      },
+      showDataZoom:{
+        type:Boolean,
+        default:false
+      },
+      position: {
+        type: String,
+        default: "right",
+      },
+      yAxis: {
+        type: Array,
+        default(){
+          return {
+              type: 'value',
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                formatter: '{value}',
+                color:'#FFF'
+              },
+              axisLine: {
+                  show: false // 这里设置为false即可去掉Y轴线
+              },
+              splitLine:{
+                  show:false
+              },
+              splitArea:false
+            }
+        }
+      }, 
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.initChart(val)
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart(this.chartData)
+      })
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart(data) {
+        var that = this;
+        this.chart = echarts.init(this.$el, 'macarons')
+        this.chart.setOption({
+          title: {
+            text: '',
+            left: 'right',
+            top: 20
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+          },
+          grid: this.grid,
+          xAxis: this.xAxis,
+          yAxis: this.yAxis,
+          legend: this.legend,
+          dataZoom: [{
+            type: 'slider', // 滑动条
+            show: this.showDataZoom, // 开启
+            xAxisIndex: [0],
+            left: '50px', // 滑动条位置
+            bottom: '0px'
+          }, // X轴内置滑动
+          {
+            type: 'inside', // 内置滑动，随鼠标滚轮展示
+            xAxisIndex: [0],
+          }],
+          series: this.chartData
+        })
+        //点击事件
+        this.chart.on('click',function(params){
+          if (params.componentType === 'series') {
+            var dataIndex = params.dataIndex;
+            that.$emit('clickBar',dataIndex)
+            // 在这里处理点击事件
+            // 例如：弹出框显示更多信息等
+          }
+        })
+      }
+    }
+  }
+  </script>
+  

src/views/pad/building/cameraDataDialog.vue

@@ -211,7 +211,7 @@
                 </div>
              </div>
             <div class="charts-cont"> 
-              <bar-chart
+              <car-chart
               :chart-data="pedestrianFlowBarData"
               :x-axis="pedestrianFlowBarAxis"
               :y-axis="pedestrianFlowBarYaxis"
@@ -221,7 +221,7 @@
               height="70px"
                     />
               </div> 
-              <bar-chart
+              <car-chart
               :chart-data="waterFlowBarData"
               :x-axis="waterFlowBarAxis"
               :y-axis="waterFlowBarYaxis"
@@ -230,7 +230,7 @@
               width="515px"
               height="70px"
                     />
-              <bar-chart
+              <car-chart
               :chart-data="comprehensiveFlowBarData"
               :x-axis="comprehensiveFlowBarAxis"
               :y-axis="comprehensiveFlowBarYaxis"
@@ -239,7 +239,7 @@
               width="515px"
               height="70px"
                     /> 
-              <bar-chart
+              <car-chart
               :chart-data="perCapitaFlowBarData"
               :x-axis="perCapitaFlowBarAxis"
               :y-axis="perCapitaFlowBarYaxis"
@@ -248,7 +248,7 @@
               width="515px"
               height="70px"
                     />
-              <bar-chart
+              <car-chart
               :chart-data="powerFlowBarData"
               :x-axis="powerFlowBarAxis"
               :y-axis="powerFlowBarYaxis"
@@ -257,7 +257,7 @@
               width="515px"
               height="70px"
                     />                         
-               <bar-chart
+               <car-chart
               :chart-data="exhaustFlowBarData"
               :x-axis="exhaustFlowBarAxis"
               :y-axis="exhaustFlowBarYaxis"
@@ -563,6 +563,7 @@
 <script>
 import LineChart from "@/components/Echarts/LineChart";
 import PieChart from "@/components/Echarts/PieChart";
+import CarChart from "@/components/Echarts/carChart.vue";
 import BarChart from "@/components/Echarts/BarChart.vue";
 import StackedPieChart3D from '@/components/Echarts/StackedPieChart3D.vue';
 import echarts from "echarts";
@@ -574,6 +575,7 @@ import {
 export default {
   name: "EnergyRateDialog",
   components: {
+    CarChart,
     BarChart,
     PieChart,
     LineChart,

src/views/pad/engineering/unitProjectDia.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
   </template>
-  
+
   <script>
   import {getFoodsList, planCheckList} from "@/api/screen/service";
   import pinyin from "../data/pinyin.js";
@@ -66,7 +66,7 @@
     },
   };
   </script>
-  
+
   <style lang="scss" scoped>
   .myDiaList {
     position: relative;
@@ -75,13 +75,13 @@
     background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
     background-size: cover;
   }
-  
+
   .title {
     color: #00FFFF;
     height: 40px;
     padding: 8px 0 8px 25px;
   }
-  
+
   .closeBtn{
     position: absolute;
     right: 10px;
@@ -90,32 +90,37 @@
     height: 25px;
     cursor: pointer;
   }
-  
+
   .flex-container {
     width: 100%;
     padding: 0 10px 0;
   }
-  
+
   .header{
     display: flex;  /* 每行使用 flexbox 布局 */
     position: relative;
     background-color: rgba(21, 105, 107, 0.5);
   }
-  
+
   .dataList{
     height: 400px;
     overflow: auto;
+    background: radial-gradient(
+        190% 71% at 50% 49%,
+        rgba(21, 105, 107, 0.54) 0%,
+        rgba(27, 95, 97, 0) 100%
+  )
   }
-  
+
   .dataList::-webkit-scrollbar {
     display: none;
   }
-  
+
   .flex-row {
     display: flex;  /* 每行使用 flexbox 布局 */
     position: relative;
   }
-  
+
   .flex-row::before{
     content: "";
     height: 15px;
@@ -124,18 +129,18 @@
     left: 0;
     top: 10px
   }
-  
+
   .flex-column {
     flex: 1;  /* 每列均分可用空间 */
     padding: 8px 12px;
     text-align: left;  /* 左对齐文本 */
     color: white;
   }
-  
+
   .header .flex-column {
     color: #00ffff;
   }
-  
+
   .el-scrollbar {
     background: #15696b;
     border: 1px solid #00ffff;
@@ -156,8 +161,7 @@
   .el-select .el-input .el-select__caret {
     display: none;
   }
-  
-  
+
+
   </style>
-  
-  
+

src/views/screen/building/cameraDataDialog.vue

@@ -211,7 +211,7 @@
                   </div>
                </div>
               <div class="charts-cont"> 
-                <bar-chart
+                <car-chart
                 :chart-data="pedestrianFlowBarData"
                 :x-axis="pedestrianFlowBarAxis"
                 :y-axis="pedestrianFlowBarYaxis"
@@ -221,7 +221,7 @@
                 height="70px"
                       />
                 </div> 
-                <bar-chart
+                <car-chart
                 :chart-data="waterFlowBarData"
                 :x-axis="waterFlowBarAxis"
                 :y-axis="waterFlowBarYaxis"
@@ -230,7 +230,7 @@
                 width="515px"
                 height="70px"
                       />
-                <bar-chart
+                <car-chart
                 :chart-data="comprehensiveFlowBarData"
                 :x-axis="comprehensiveFlowBarAxis"
                 :y-axis="comprehensiveFlowBarYaxis"
@@ -239,7 +239,7 @@
                 width="515px"
                 height="70px"
                       /> 
-                <bar-chart
+                <car-chart
                 :chart-data="perCapitaFlowBarData"
                 :x-axis="perCapitaFlowBarAxis"
                 :y-axis="perCapitaFlowBarYaxis"
@@ -248,7 +248,7 @@
                 width="515px"
                 height="70px"
                       />
-                <bar-chart
+                <car-chart
                 :chart-data="powerFlowBarData"
                 :x-axis="powerFlowBarAxis"
                 :y-axis="powerFlowBarYaxis"
@@ -257,7 +257,7 @@
                 width="515px"
                 height="70px"
                       />                         
-                 <bar-chart
+                 <car-chart
                 :chart-data="exhaustFlowBarData"
                 :x-axis="exhaustFlowBarAxis"
                 :y-axis="exhaustFlowBarYaxis"
@@ -563,6 +563,7 @@
   <script>
   import LineChart from "@/components/Echarts/LineChart";
   import PieChart from "@/components/Echarts/PieChart";
+  import CarChart from "@/components/Echarts/carChart.vue";
   import BarChart from "@/components/Echarts/BarChart.vue";
   import StackedPieChart3D from '@/components/Echarts/StackedPieChart3D.vue';
   import echarts from "echarts";
@@ -574,6 +575,7 @@
   export default {
     name: "EnergyRateDialog",
     components: {
+      CarChart,
       BarChart,
       PieChart,
       LineChart,

src/views/screen/engineering/unitProjectDia.vue

@@ -105,6 +105,11 @@ export default {
 .dataList{
   height: 400px;
   overflow: auto;
+  background: radial-gradient(
+        190% 71% at 50% 49%,
+        rgba(21, 105, 107, 0.54) 0%,
+        rgba(27, 95, 97, 0) 100%
+  )
 }
 
 .dataList::-webkit-scrollbar {