diff --git a/package.json b/package.json
index a5799659c65570660975c3c73437352cd5f43663..de622f2c45bd5095dd284eb85f7ec9bfc21db56f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "autoprefixer": "^10.3.1",
     "d3": "^7.1.1",
     "dplayer": "^1.26.0",
+    "echarts": "^5.2.2",
     "postcss": "^8.3.6",
     "tailwindcss": "^2.2.7",
     "typescript": "^4.3.5",
diff --git a/public/images/ctives/bgImg.png b/public/images/ctives/bgImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5a369035569e1eb4c8c39e838768bef4b0d50da
Binary files /dev/null and b/public/images/ctives/bgImg.png differ
diff --git a/public/images/ctives/showbox.png b/public/images/ctives/showbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..35701115186f6390ba2e0142864a468ec4f167f9
Binary files /dev/null and b/public/images/ctives/showbox.png differ
diff --git "a/public/images/ctives/\345\274\271\346\241\206\346\213\267\350\264\235.png" "b/public/images/ctives/\345\274\271\346\241\206\346\213\267\350\264\235.png"
deleted file mode 100644
index 5e98886f343b1136dfbc7e8449367c60daf96912..0000000000000000000000000000000000000000
Binary files "a/public/images/ctives/\345\274\271\346\241\206\346\213\267\350\264\235.png" and /dev/null differ
diff --git a/src/views/target/carousel/carousel-3d/Carousel3d.vue b/src/views/target/carousel/carousel-3d/Carousel3d.vue
index 626d9d7b598b2ed63ee08af372cde8b6b385b284..6d10d2d4b12de9675f88b63a06c395ee32811d66 100644
--- a/src/views/target/carousel/carousel-3d/Carousel3d.vue
+++ b/src/views/target/carousel/carousel-3d/Carousel3d.vue
@@ -518,7 +518,7 @@ export default {
 
 .carousel-3d-slider {
   position: relative;
-  margin: 30px 0 0 315px;
+  margin: 0 0 0 315px;
   transform-style: preserve-3d;
   -webkit-perspective: 2000px;
   -moz-perspective: 2000px;
diff --git a/src/views/target/carousel/index.vue b/src/views/target/carousel/index.vue
index 9024f95837ab2268e7baf7ed16dfbe1f0a92064e..57cb7fd52c719feb8e3b50c942f0857d78afb8a9 100644
--- a/src/views/target/carousel/index.vue
+++ b/src/views/target/carousel/index.vue
@@ -128,6 +128,15 @@ export default defineComponent({
   width: 100%;
 }
 
+.select > option {
+  background-color: #05104d;
+  border: none;
+}
+
+.select1 > option {
+  background-color: #05104d;
+  border: none;
+}
 .opshwo {
   top: 0;
   right: 200px;
@@ -158,6 +167,7 @@ export default defineComponent({
 }
 
 .baenr_img {
+  height: 570px;
   opacity: 0.7;
   width: 700px;
   left: 11.5%;
@@ -168,7 +178,7 @@ export default defineComponent({
 .baenr_img1 {
   left: 17%;
   width: 21%;
-  top: 120px;
+  top: 85px;
   position: absolute;
 }
 
diff --git a/src/views/target/histogram/index.vue b/src/views/target/histogram/index.vue
index 87dd230109a9cde28fd6d8479c16a73bf351fab3..34b27424791fde2f52636df10cd29ad6666fb0b9 100644
--- a/src/views/target/histogram/index.vue
+++ b/src/views/target/histogram/index.vue
@@ -1,24 +1,187 @@
 <template>
   <div>
-    <div class="eachs_box"></div>
+    <div class="eachs_box" ref="draw"></div>
   </div>
 </template>
-
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+export default defineComponent({
   data() {
     return {};
   },
-};
+  mounted() {
+    this.draw();
+  },
+  created() {},
+  methods: {
+    draw() {
+      let box = echarts.init(this.$refs.draw);
+      let option = {
+        title: {},
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            let res =
+              "<br>" +
+              `<p class='title_vlaue'>${params[0].axisValue}</P>` +
+              "<br>" +
+              `<p class='title_vlaue1'>目标值：<span class="maleg">${params[0].data}万</span></P>` +
+              "<br>" +
+              `<p class='title_vlaue2'>实际值：<span class="maleg">122%</span></P>` +
+              "<br>" +
+              `<p class='title_vlaue2'>完成率：<span class="maleg">122%</span></P>` +
+              "<br>" +
+              `<p class='title_vlaue2'>同比：<span class="maleg">${params[0].data}</span></P>` +
+              "<br>" +
+              `<p class='title_vlaue2'>环比：<span class="maleg"></span></P>`;
+
+            return res;
+          },
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#283b56",
+            },
+          },
+        },
+        legend: {},
+        dataZoom: {
+          show: false,
+          start: 10,
+          end: 100,
+        },
+        xAxis: [
+          {
+            splitLine: {
+              show: false,
+            },
+            type: "category",
+            boundaryGap: true,
+            data: ["Q1", "Q2", "Q3", "Q4"],
+            axisLabel: {
+              color: "#fff",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "#fff",
+            },
+            splitLine: {
+              show: false,
+            },
+            nameTextStyle: {
+              color: "#fff",
+            },
+            scale: true,
+            name: "(百万)",
+            max: 200,
+            min: 0,
+            boundaryGap: [0.2, 0.2, 0.2, 0.2],
+          },
+        ],
+        // 柱状渲染
+        series: [
+          {
+            name: "",
+            type: "bar",
+            max: 200,
+            min: 0,
+            barWidth: 50,
+            data: [60, 80, 190, 160],
+
+            itemStyle: {
+              normal: {
+                //颜色渐变
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0.3,
+                    color: "#5A91E1",
+                  },
+                  {
+                    offset: 1,
+                    color: "#5DB6F3",
+                  },
+                ]),
+              },
+            },
+          },
+          {
+            name: "",
+            type: "line",
+            data: [60, 80, 190, 160],
+            itemStyle: {
+              normal: {
+                color: "#5470C6", //折点颜色
+                lineStyle: {
+                  color: "#5470C6", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      };
+      box.setOption(option);
+    },
+  },
+});
 </script>
+<style>
+.show_w {
+  background-color: transparent;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
 
-<style lang="cess" scoped>
-.eachs_box{
-  width: 75% !important;
-  margin-left: 100px;
+.eachs_box > div:nth-child(2) {
+  font-size: 20px !important;
+  color: #fff !important;
+  width: 260px;
+  height: 230px;
+  background-image: url("/images/ctives/showbox.png");
+  background-color: transparent !important;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border: none !important;
+  box-shadow: none !important;
+}
+.eachs_box {
   margin-top: 20px;
+  width: 90%;
+  height: 300px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.title_pasrs {
+  height: 20px;
   border: 1px solid #fff;
-  width: 100%;
-  height: 270px;
+}
+.title_vlaue {
+  font-size: 18px;
+  text-shadow: 5px 5px 5px #1a61b0;
+  margin-left: 30px;
+  margin-top: 10px;
+}
+
+.title_vlaue1 {
+  margin-left: 30px;
+  font-size: 14px;
+  margin-top: -10px;
+  text-shadow: 5px 5px 5px #1a61b0;
+}
+
+.maleg {
+  margin-left: 10px !important;
+}
+
+.title_vlaue2 {
+  margin-top: -20px;
+  margin-left: 30px;
+  font-size: 14px;
+  text-shadow: 5px 5px 5px #1a61b0;
 }
 </style>