diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
new file mode 100644
index 0000000..6ab1b7d
--- /dev/null
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -0,0 +1,288 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+
+      var shadowYData = [100, 100];
+      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barBottomColor = [
+        'RGBA(154, 102, 125, 0.6)',
+        'RGBA(17, 109, 182, 0.6)',
+        'RGBA(27, 152, 136, 0.6)',
+        'RGBA(126, 138, 92, 0.6)',
+        'RGBA(10, 162, 178, 0.6)',
+      ];
+      var barWidth = 20;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+        tooltip: {
+          trigger: 'axis',
+
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '数量' ? '起' : '个';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 20,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 12,
+              fontFamily: 'AlibabaPuHuiTi',
+              formatter: function (params) {
+                var str = ''; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ''; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + '\n';
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '数量(起)',
+            type: 'value',
+            axisLabel: {
+              color: '#3FFFC2',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#3FFFC2',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#3FFFC2',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'pictorialBar',
+            symbolSize: [barWidth, 10],
+            symbolOffset: [0, -6],
+            symbolPosition: 'end',
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barTopColor[params.dataIndex];
+                },
+              },
+            },
+            data: props.data.yAxis,
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 10, 15],
+            symbolOffset: [0, 8],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: barTopColor,
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 20, 20],
+            symbolOffset: [0, 12],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: barTopColor,
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+            stack: 'check',
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 25, 20],
+            symbolOffset: [0, 12],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: '#3ACDC5',
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+            stack: 'check',
+          },
+          {
+            name: '',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 1,
+                      color: barTopColor[params.dataIndex],
+                    },
+                    {
+                      offset: 0,
+                      color: barBottomColor[params.dataIndex],
+                    },
+                  ]);
+                },
+                opacity: 0.8,
+              },
+            },
+            data: props.data.yAxis,
+          },
+          // {
+          //   // smooth: true, //变为曲线 默认false折线
+          //   name: "个数",
+          //   type: "line",
+          //   data: props.data.yAxis2,
+          //   color: "#FFF21C",
+          // },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, 'propspropsprops');
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
new file mode 100644
index 0000000..6ab1b7d
--- /dev/null
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -0,0 +1,288 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+
+      var shadowYData = [100, 100];
+      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barBottomColor = [
+        'RGBA(154, 102, 125, 0.6)',
+        'RGBA(17, 109, 182, 0.6)',
+        'RGBA(27, 152, 136, 0.6)',
+        'RGBA(126, 138, 92, 0.6)',
+        'RGBA(10, 162, 178, 0.6)',
+      ];
+      var barWidth = 20;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+        tooltip: {
+          trigger: 'axis',
+
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '数量' ? '起' : '个';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 20,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 12,
+              fontFamily: 'AlibabaPuHuiTi',
+              formatter: function (params) {
+                var str = ''; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ''; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + '\n';
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '数量(起)',
+            type: 'value',
+            axisLabel: {
+              color: '#3FFFC2',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#3FFFC2',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#3FFFC2',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'pictorialBar',
+            symbolSize: [barWidth, 10],
+            symbolOffset: [0, -6],
+            symbolPosition: 'end',
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barTopColor[params.dataIndex];
+                },
+              },
+            },
+            data: props.data.yAxis,
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 10, 15],
+            symbolOffset: [0, 8],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: barTopColor,
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 20, 20],
+            symbolOffset: [0, 12],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: barTopColor,
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+            stack: 'check',
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [barWidth + 25, 20],
+            symbolOffset: [0, 12],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: '#3ACDC5',
+                borderType: 'solid',
+                borderWidth: 10,
+              },
+            },
+            data: props.data.yAxis,
+            stack: 'check',
+          },
+          {
+            name: '',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 1,
+                      color: barTopColor[params.dataIndex],
+                    },
+                    {
+                      offset: 0,
+                      color: barBottomColor[params.dataIndex],
+                    },
+                  ]);
+                },
+                opacity: 0.8,
+              },
+            },
+            data: props.data.yAxis,
+          },
+          // {
+          //   // smooth: true, //变为曲线 默认false折线
+          //   name: "个数",
+          //   type: "line",
+          //   data: props.data.yAxis2,
+          //   color: "#FFF21C",
+          // },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, 'propspropsprops');
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 185b53c..1a47767 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -72,7 +72,9 @@
           </div>
         </div>
       </div>
-      <div class="yxjcEcharts"></div>
+      <div class="yxjcEcharts">
+        <publicEch :data="chartData2" :refresh="refresh" />
+      </div>
     </div>
   </div>
   <!-- 实时监测 -->
@@ -97,11 +99,15 @@
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import publicEch from '@/views/oneMap/Echarts/publicEch.vue';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
 import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
 import sd_icon from '@/assets/newImgs/sd.png'; //隧道
 import ps_icon from '@/assets/newImgs/ps.png'; //排水
+
+const chartData2 = ref({ xAxis: [], yAxis: [], yAxis2: [] });
+const refresh = ref('');
 const categoryList = ref([
   { name: '燃气', value: 1 },
   { name: '排水', value: 2 },
@@ -213,6 +219,19 @@
     ];
   }
 }
+
+function GetgetFacilities() {
+  let obj = {
+    x: ['燃气', '排水', '桥梁', '隧道', '其他'],
+    y: ['870', '568', '700', '600', '276'],
+  };
+  chartData2.value.xAxis = obj.x;
+  chartData2.value.yAxis = obj.y;
+  refresh.value = Math.random();
+}
+onMounted(() => {
+  GetgetFacilities();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -395,8 +414,9 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      background-size: 100% 100%;
+      // background: red;
+      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
+      // background-size: 100% 100%;
     }
   }
 }