diff --git a/src/assets/js/api/zhongjianFourth.js b/src/assets/js/api/zhongjianFourth.js
index f22d0888..8d00e2a5 100644
--- a/src/assets/js/api/zhongjianFourth.js
+++ b/src/assets/js/api/zhongjianFourth.js
@@ -68,10 +68,20 @@ export const getQualityAcceptanceApi = data => get('/xmgl/qualityInspectionRecor
 
 
 /* --------------双碳管理------------ */
-//获取本月、累计发电量以及节能减排量
+//光伏发电--获取本月、累计发电量以及节能减排量
 export const getPowerCurrentDataApi = data => get('xmgl/photovoltaicPowerCurrentData/thisMonthAndTotalData',data)
 
-//通过项目sn获取设备碳排放
+//设备碳排放排名TOP10--通过项目sn获取设备碳排放
 export const getPdoubleCarbonDevApi = data => get('xmgl/doubleCarbonDev/getDevCarbonEmission',data)
 
+//总碳排放分析--通过项目sn和类型获取碳排放分析数据
+export const getdoubleCarbonApi = data => get('xmgl/doubleCarbon/ceAnalysis',data)
+
+//用水用电碳排放情况统计--通过项目sn获取水电碳排放情况
+export const getweCarbonEmissionsApi = data => get('/xmgl/doubleCarbon/weCarbonEmissions',data)
+
+//主要碳排放占比统计--通过项目sn获取水电碳排放情况
+
+export const getgetCo2RatioApi = data => get('/xmgl/doubleCarbon/getCo2Ratio',data)
+
 
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue b/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
index 7f76e06f..2f895841 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
@@ -1,7 +1,7 @@
 <template>
   <Card title="总碳排放分析">
     <div class="carbonEmission">
-      <el-date-picker
+      <!-- <el-date-picker
           v-model="time1"
           type="daterange"
           range-separator="-"
@@ -9,13 +9,28 @@
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
           size="mini"
-        ></el-date-picker>
+        ></el-date-picker> -->
+      <el-select
+        style="margin-top: 20px"
+        v-model="date"
+        placeholder="请选择日期"
+        @change="credad"
+      >
+        <el-option
+          v-for="(item, index) in yearsList"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
     </div>
     <div class="chart" ref="carbonChart"></div>
   </Card>
 </template>
 
 <script>
+import { getdoubleCarbonApi } from "@/assets/js/api/zhongjianFourth";
 import echarts from "echarts4";
 import Card from "../components/Card.vue";
 
@@ -25,13 +40,58 @@ export default {
   },
   data() {
     return {
-      time1:'',
-    }
+      yearsList: [
+        {
+          value: "1",
+          label: "最近1年",
+        },
+        {
+          value: "2",
+          label: "最近14天",
+        },
+        {
+          value: "3",
+          label: "最近7天",
+        },
+      ],
+      date: "", //日期
+      projectSn: this.$store.state.projectSn, //项目sn
+      typeId: "", //日期类型
+      carbonListNum: [], //总数据
+      carbonList1: [], //碳排放
+      carbonList2: [], //减少碳排放
+      carbonList3: [], //净碳排放
+    };
+  },
+  created() {
+    this.credad();
   },
   mounted() {
     this.createCarbonChart();
   },
   methods: {
+    credad(val) {
+      this.carbonList1 = []
+      this.carbonList2 = []
+      this.carbonList3 = []
+
+      //获取总碳排放分析数据
+      getdoubleCarbonApi({
+        projectSn: this.projectSn,
+        typeId: val == null? 3 : val,
+      }).then((res) => {
+        console.log('res',res);
+        if (res.code == 200) {
+          this.carbonListNum = res.result;
+          this.carbonListNum.forEach((item) => {
+            this.carbonList1.push(item.carbonValue);
+            this.carbonList2.push(item.reduceValue);
+            this.carbonList3.push(item.cleanValue);
+          });
+          this.createCarbonChart();
+        }
+      });
+    },
     createCarbonChart() {
       let monitor = echarts.init(this.$refs.carbonChart);
       var colors = ["#3A85D3", "#5AD8A6", "#008000", "#5470c6", "#61a0a8"];
@@ -53,21 +113,16 @@ export default {
 
           formatter: function (params) {
             //params[0].marker,marker参数为提示语前面的小圆点
-            return (
-              params[0].name +
-              "<br>" +
-              // params[0].marker +
-              "碳排放：" +
-              params[0].value +
-              "<br>" +
-              // params[1].marker +
-              "减少碳排放：" +
-              -params[1].value +
-              "<br>" +
-              // params[1].marker +
-              "净碳排放：" +
-              params[2].value
-            );
+            let data = "";
+            if(params.length >= 1) {
+              data = params[0].name +  "<br>" 
+             }
+            params.forEach(res =>{
+              data =  data + res.seriesName +":"+
+              res.value +
+              "<br>"  ;
+            })
+            return ( data );
           },
         },
         legend: {
@@ -106,7 +161,7 @@ export default {
             axisLabel: {
               textStyle: {
                 color: "#fff", //坐标值得具体的颜色
-                fontSize: 16
+                fontSize: 16,
               },
             },
             axisLine: {
@@ -139,13 +194,12 @@ export default {
               //这是y轴文字颜色
               lineStyle: {
                 color: "#fff",
-                
               },
             },
             axisLabel: {
               textStyle: {
                 color: "#fff", //坐标值得具体的颜色
-                fontSize: 16
+                fontSize: 16,
               },
             },
           },
@@ -187,7 +241,7 @@ export default {
               color: "#fff",
             },
 
-            data: [320, 302, 341, 374, 390, 450, 420, 200, 220, 322, 245, 215],
+            data: this.carbonList1,
           },
 
           {
@@ -227,10 +281,7 @@ export default {
               //   return -params.value;
               // },
             },
-            data: [
-              -120, -132, -101, -134, -190, -230, -210, -210, -210, -210, -210,
-              -210,
-            ],
+            data: this.carbonList2,
           },
           {
             name: "净碳排放",
@@ -267,7 +318,7 @@ export default {
                 },
               },
             },
-            data: [220, 202, 241, 274, 190, 150, 120, 200, 220, 222, 145, 215],
+            data: this.carbonList3,
           },
         ],
       };
@@ -281,40 +332,12 @@ export default {
 .chart {
   width: 100%;
   height: calc(100% - 37px);
-  margin-top: 23px
+  margin-top: 23px;
 }
 .carbonEmission {
-    cursor:pointer;
-    margin-left: 79%;
-    width: 210;
-    height: 17px;
-  }
-  ::v-deep .el-date-editor--daterange.el-input__inner {
-    cursor:pointer;
-    width: 235px;
-    height: 30px;
-    background-color: #182337;
-    border: 1px solid #264b5e;
-    margin-top: 20px
-  }
-  ::v-deep .el-range-input {
-    cursor:pointer;
-    background-color: #182337;
-    color: #6ee4f0;
-  }
-  ::v-deep .el-date-editor {
-    cursor:pointer;
-    .el-range__icon {
-      line-height: 23px;
-      color: #6ee4f0;
-    }
-    .el-range-separator {
-      line-height: 23px;
-      color: #757d88;
-    }
-    .el-range__close-icon {
-      color: #757d88;
-      line-height: 23px;
-    }
-  }
+  cursor: pointer;
+  margin-left: 81%;
+  width: 210;
+  height: 17px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftTopL.vue b/src/views/projectAdmin/fourEngin/carbon/leftTopL.vue
index df08f0d3..2ac83d87 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftTopL.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftTopL.vue
@@ -2,7 +2,8 @@
   <Card title="主要碳排放占比统计">
     <div class="chart">
       <JNestedRingChart
-        :title="{ text: '99.99kg', subTitle: '二氧化碳总排放量' }"
+      v-if="isShow"
+        :title="{ text: totalNum, subTitle: '二氧化碳总排放量' }"
         :series="series"
         :legend="{ show: false }"
       />
@@ -16,6 +17,7 @@
 </template>
   
   <script>
+import { getgetCo2RatioApi } from "@/assets/js/api/zhongjianFourth";
 import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
 import Card from "../components/Card.vue";
 export default {
@@ -30,19 +32,19 @@ export default {
           roseType: "area",
           radius: ["58%", "52%"],
           color: ["#182337", "#4A8C9C"],
-          data: [50, 40, 30, 40],
+          data: [0, 0, 0, 0],
           startAngle: 90,
         },
         {
           radius: ["65%", "82%"],
           startAngle: 90,
-          color: ["#E86129", "#FFC303", "#6EE4F0"],
+          color: [ "#6EE4F0", "#E86129","#FFC303",],
           itemStyle: {
             normal: {
               label: {
                 //饼图图形上的文本标签
                 show: true,
-                formatter: " {d}% \n {b} "
+                formatter: " {d}% \n {b} ",
               },
 
               labelLine: {
@@ -51,14 +53,35 @@ export default {
             },
           },
           data: [
-            { value: 20, name: "用水" },
-            { value: 11, name: "用电" },
-            { value: 11, name: "设备" },
+            // { value: 20, name: "用水" },
+            // { value: 11, name: "用电" },
+            // { value: 11, name: "设备" },
           ],
         },
       ],
+      totalNum:0,
+      isShow:false
     };
   },
+  created(){
+   this.getData()
+  },
+  methods: {
+    getData() {
+      getgetCo2RatioApi({ projectSn: this.$store.state.projectSn }).then(res => {
+      let totals = res.result
+      console.log('总量',totals );
+
+      this.series[1].data = [
+            { value: totals.waterCo2, name: '用水' },
+            { value: totals.ammeterCo2, name: '用电' },
+            { value: totals.devCo2, name: '设备' }
+          ]
+      this.totalNum = totals.sumCo2
+      this.isShow=true
+    })
+    },
+  },
 };
 </script>
   
@@ -83,13 +106,13 @@ export default {
       height: 10px;
       // border-radius: 50%;
     }
-    &:nth-child(1)::before {
+    &:nth-child(2)::before {
       background-color: #e86129;
     }
-    &:nth-child(2)::before {
+    &:nth-child(3)::before {
       background-color: #ffc303;
     }
-    &:nth-child(3)::before {
+    &:nth-child(1)::before {
       background-color: #6ee4f0;
     }
   }
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftTopR.vue b/src/views/projectAdmin/fourEngin/carbon/leftTopR.vue
index 2284f0a8..a8435ebe 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftTopR.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftTopR.vue
@@ -1,63 +1,108 @@
 <template>
   <Card title="用水用电碳排放情况统计">
     <div class="topTitle">
-    <div class="waterCumulative">
-      <div><img src="../assets/images/carbon/hydropower.png" alt=""></div>
-      <div class="textBox">
-        <p style="font-size:20px;color:#5CE2F6 ">5551kg</p>
-         <p style="font-size:16px">用水用电累计碳排放</p>
+      <div class="waterCumulative">
+        <div><img src="../assets/images/carbon/hydropower.png" alt="" /></div>
+        <div class="textBox">
+          <p style="font-size: 20px; color: #5ce2f6">
+            {{ statisticsCount.totalWaterAndElectricCarbonEmissions }}kg
+          </p>
+          <p style="font-size: 16px">用水用电累计碳排放</p>
+        </div>
       </div>
-    </div>
-    <div class="waterCumulative" style="margin-left:60px">
-      <div><img src="../assets/images/carbon/carbonEm.png" alt=""></div>
-      <div class="textBox">
-        <p style="font-size:20px;color:#5CE2F6 ">255kg</p>
-         <p style="font-size:16px">累计减少碳排放</p>
+      <div class="waterCumulative" style="margin-left: 60px">
+        <div><img src="../assets/images/carbon/carbonEm.png" alt="" /></div>
+        <div class="textBox">
+          <p style="font-size: 20px; color: #5ce2f6">
+            {{ statisticsCount.totalReduceCarbonEmissions }}kg
+          </p>
+          <p style="font-size: 16px">累计减少碳排放</p>
+        </div>
       </div>
-    </div>
-    <!-- <div class="cOCumulative">累计减少碳排放</div> -->
+      <!-- <div class="cOCumulative">累计减少碳排放</div> -->
     </div>
     <div class="mychart">
-      <JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
+      <JBarChart
+        v-if="isShow"
+        :xData="xData"
+        :series="series"
+        :color="color"
+        :grid="grid"
+      />
     </div>
   </Card>
 </template>
   
-  <script>
+<script>
 import Card from "../components/Card.vue";
-// import JBarChart from "../jChart/bar/JBarChart.vue";
-import JBarChart from "@/views/projectAdmin/jlw/jChart/bar/JBarChart.vue";
+import { getweCarbonEmissionsApi } from "@/assets/js/api/zhongjianFourth";
+import JBarChart from "../../jlw/jChart/bar/JBarChart.vue";
 export default {
-  components: {Card,JBarChart,},
-  data(){
-    return{
-      xData: ["办公区", "生活区", "施工现场", "大门口",'其他'],
-      series: [{ data: [22, 43, 32, 33,52] }, { data: [32, 22, 32, 15,11]},
-    ],
-      color: ["#E7622A ", "#6EE4F0 "],
-      grid: ["15%", "0%", "30%", "0%"],         
-    }
+  components: { Card, JBarChart },
+
+  data() {
+    return {
+      xData: ["办公区", "生活区", "施工现场", "大门口", "其他"],
+      series: [{ data: [] }, { data: [] }],
+      color: ["#E7622A", "#6EE4F0"],
+      grid: ["15%", "0%", "30%", "0%"],
+      statisticsCount: {
+        totalReduceCarbonEmissions: 0, //累计减少碳排放量
+        totalWaterAndElectricCarbonEmissions: 0, //水电累计碳排放量
+      },
+      // iShow:false,
+      electricArry: [], //电碳排放
+      location: 0, //位置
+      waterArry: [], //水碳排放
+      workercount: [],
+      isShow: false,
+    };
+  },
+
+  mounted() {
+    getweCarbonEmissionsApi({
+      projectSn: this.$store.state.projectSn,
+    }).then((res) => {
+      console.log("看数据0", res);
+      this.statisticsCount = res.result;
+      this.workercount = res.result.locationDataList;
+      console.log("看数据1", this.workercount);
+        this.workercount.forEach((item) => {
+          this.series[0].data.push(item.electric);
+
+          this.series[1].data.push(item.water);
+        });
+  
+        this.isShow = true;
+    });
+  },
+
+  methods: {
   },
 };
 </script>
   
-  <style lang="less" scoped>
-  .topTitle{
- display: flex;
- margin-left: 50px;
-.waterCumulative{
+<style lang="less" scoped>
+.topTitle {
   display: flex;
-  margin-top: 20px;
-  .textBox{
-    margin-top: 30px;
-  }
-  img{
+  margin-left: 50px;
+
+  .waterCumulative {
+    display: flex;
     margin-top: 20px;
-    margin-right: 15px;
+
+    .textBox {
+      margin-top: 30px;
+    }
+
+    img {
+      margin-top: 20px;
+      margin-right: 15px;
+    }
   }
 }
-  }
-  .mychart {
+
+.mychart {
   width: 100%;
   height: calc(100% - 50px);
 }
diff --git a/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue b/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
index e601a1e5..fc4400dc 100644
--- a/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
@@ -1,56 +1,81 @@
 <template>
   <Card title="设备碳排放排名TOP10">
     <div class="car-countBox">
-      <div class="car-count">设备累计碳排放<span>{{list.total}}</span>千克</div>
-      <div class="car-count">累计减少碳排放<span>{{list.reduce}}</span>千克</div>
+      <div class="car-count">
+        设备累计碳排放<span>{{ list.total }}</span
+        >千克
+      </div>
+      <div class="car-count">
+        累计减少碳排放<span>{{ list.reduce }}</span
+        >千克
+      </div>
     </div>
-
-    <div class="chart" ref="carbonChart"></div>
+    <vue-scroll>
+      <div class="chart" ref="carbonChart"></div>
+    </vue-scroll>
   </Card>
 </template>
   
   <script>
-  import {getPdoubleCarbonDevApi} from '@/assets/js/api/zhongjianFourth'
-  import echarts from 'echarts4';
+import { getPdoubleCarbonDevApi } from "@/assets/js/api/zhongjianFourth";
+import echarts from "echarts4";
 import Card from "../components/Card.vue";
 
 export default {
   components: {
     Card,
   },
-  data(){
-   return{
-    list:{
-      reduce:0,//累计减少碳排放/kg
-      total:0,//设备累计碳排放/kg
-    }
-
-   }
+  data() {
+    return {
+      list: {
+        reduce: 0, //累计减少碳排放/kg
+        total: 0, //设备累计碳排放/kg
+      },
+      rankingList: [], //碳排放排名
+    };
   },
-  mounted(){
-    this.createCarbonChart()
+  mounted() {
+    // this.createCarbonChart();
   },
-  created(){
-    this.getPdoubleCarbonDevData()
+  created() {
+    this.getPdoubleCarbonDevData();
   },
   methods: {
-    //echarts图形
-    createCarbonChart() {
+    //获取累计发电量及碳排量
+    getPdoubleCarbonDevData() {
+      getPdoubleCarbonDevApi({ projectSn: this.$store.state.projectSn }).then(
+        (res) => {
+          this.list = res.result;
+          this.rankingList = res.result.devList;
+          console.log("碳排放统计数据-----2222", this.list);
+          let dataName = [];
+          let dataCo2Value = [];
+          this.rankingList.forEach((res) => {
+            dataName.push(res.name);
+            dataCo2Value.push(res.co2Value);
+          });
+
+          this.createCarbonChart(dataName, dataCo2Value);
+        }
+      );
+    },
+    //设备碳排放排名图表
+    createCarbonChart(dataName, dataCo2Value) {
+      // console.log("测试-----555", dataName);
       let monitor = echarts.init(this.$refs.carbonChart);
       var charts = {
         // 按顺序排列从大到小
-        cityList: ["塔吊1号", "塔吊2号", "塔吊3号", "塔吊4号", "塔吊5号"],
-        cityData: [1500, 1200, 800, 700, 600],
-        
+        cityList: dataName,
+        cityData: dataCo2Value,
       };
+
       var top10CityList = charts.cityList;
       var top10CityData = charts.cityData;
       var color = ["#F56C35", "#02d8f9", "#FFC303", "#F5F5F5,", "#fff"];
       var color1 = ["#F56C35", "#02d8f9", "#FFC303", "#F5F5F5", "#fff"];
-
       let lineY = [];
       let lineT = [];
-      for (var i = 0; i < charts.cityList.length; i++) {
+      for (var i = 0; i < top10CityList.length; i++) {
         var x = i;
         if (x > 1) {
           x = 2;
@@ -89,7 +114,6 @@ export default {
           },
         };
         var data1 = {
-          
           value: top10CityData[0],
           itemStyle: {
             color: "#001235",
@@ -140,6 +164,7 @@ export default {
           },
           {
             type: "category",
+            inverse: true,
             axisLine: {
               show: false,
             },
@@ -231,17 +256,17 @@ export default {
                 rich: {
                   color1: {
                     color: "#ff9500",
-                    fontSize:16,
+                    fontSize: 16,
                     fontWeight: 700,
                   },
                   color2: {
                     color: "#02d8f9",
-                    fontSize:16,
+                    fontSize: 16,
                     fontWeight: 700,
                   },
                   color3: {
                     color: "#027fff",
-                    fontSize:16,
+                    fontSize: 16,
                     fontWeight: 700,
                   },
                   color4: {
@@ -252,17 +277,41 @@ export default {
             },
           },
         ],
+        // dataZoom: [
+        //     {
+        //        start:0,//默认为0
+        //        end: 100,//默认为100
+        //        type: 'slider',
+        //        maxValueSpan:9,//显示数据的条数(默认显示10个)
+        //        show: true,
+        //        yAxisIndex: [0],
+        //        handleSize: 0,//滑动条的 左右2个滑动条的大小
+        //        height: '80%',//组件高度
+        //     //   left: 600, //左边的距离
+        //     //   right: 8,//右边的距离
+        //     //   top: 50,//上边边的距离
+        //        borderColor: "rgba(43,48,67,0.8)",
+        //        fillerColor: '#33384b',//滑动块的颜色
+        //        backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
+        //        showDataShadow: false,//是否显示数据阴影 默认auto
+        //        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+        //        realtime:true, //是否实时更新
+        //        filterMode: 'filter',
+        //        yAxisIndex: [0,1],//控制的y轴
+        //     },
+        //     //滑块的属性
+        //     {
+        //        type: 'inside',
+        //        show: true,
+        //        yAxisIndex: [0,1],
+        //        start: 1,//默认为1
+        //        end: 9,//默认为100
+        //     },
+        // ],
       };
       monitor.setOption(charts);
     },
-    //获取累计发电量及碳排量
-    getPdoubleCarbonDevData(){
-      getPdoubleCarbonDevApi({projectSn: this.$store.state.projectSn}).then(res=>{
-        this.list=res.result
-        console.log('碳排放统计数据-----', this.list)
-      })
-    }
-  }
+  },
 };
 </script>
   
@@ -291,9 +340,8 @@ export default {
     margin-left: 10px;
   }
 }
-.chart{
+.chart {
   width: 100%;
   height: calc(100% - 37px);
-
 }
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/progress/index.vue b/src/views/projectAdmin/fourEngin/progress/index.vue
index 1e214c7f..a40058b0 100644
--- a/src/views/projectAdmin/fourEngin/progress/index.vue
+++ b/src/views/projectAdmin/fourEngin/progress/index.vue
@@ -108,10 +108,7 @@ export default {
 
       // console.log("点击的", val);
       this.currentIndex = val;
-      // if(val==2) {
-      //   window.location.href =
-      //   "https://fjvsaps.jqmkj.com:20020/api/main/index?ak=ZJ4J0001&ts=1670286176897&token=%2BpldKJhzmMj5GUhAwJqEpYTsrQ4%3D&proId=2201-440106-04-01-829828-2001&proIdtoken=202212060821";
-      // }
+     
     },
     getDataDateils() {
       let data = { projectSn: this.$store.state.projectSn };
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue
index 79b530f1..aa710db0 100644
--- a/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue
@@ -3,7 +3,7 @@
     <div class="device" v-for="i in list" :key="i">
       <div class="device-name">{{ i.videoName }}</div>
       <div class="info">
-        <img class="image" :src="i.coverUrl" />
+        <img class="image" :src="$store.state.FILEURL +i.coverUrl" />
         <div class="detail">
 
           <div class="detail-item green">状态：{{ i.deviceState == 1 ? '在线' : '离线' }}</div>
diff --git a/src/views/projectAdmin/jlw/jChart/bar/JBarChart.vue b/src/views/projectAdmin/jlw/jChart/bar/JBarChart.vue
index a140b222..816107fa 100644
--- a/src/views/projectAdmin/jlw/jChart/bar/JBarChart.vue
+++ b/src/views/projectAdmin/jlw/jChart/bar/JBarChart.vue
@@ -5,6 +5,9 @@
 <script>
 import echarts from 'echarts4'
 export default {
+  data() {
+    return { jBarChart: null }
+  },
   props: {
     title: {
       type: Object,
@@ -39,13 +42,22 @@ export default {
     }
   },
   mounted() {
-    this.jBarChart = echarts.init(this.$refs.jBarChart)
+    this.jBarChart = echarts.init(this.$refs.jBarChart);
+    console.log(this.jBarChart)
+   this.$nextTick(()=>{
     this.createChart()
+   })
   },
-  data() {
-    return { jBarChart: null }
-  },
+
   watch:{
+    series:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createChart();
+         }
+       },
+       deep:true,
+    },
     xData:{
       handler(newVal,oldVal){
          if(newVal != oldVal){
@@ -65,8 +77,10 @@ export default {
   },
   methods: {
     createChart() {
+
       const { title, tooltip, grid, color, xData, yData, series } = this
       const configSeries = (series => {
+        
         if (series.length) {
           return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
         } else {
@@ -138,9 +152,12 @@ export default {
             show: false
           }
         },
-        series: configSeries
+        series:configSeries
       }
+    
+      console.log('series',option);
       this.jBarChart.setOption(option)
+      this.$forceUpdate();
     }
   }
 }