diff --git a/src/views/dataV/img/leftTitle.png b/src/views/dataV/img/leftTitle.png
index 3f37e6d..1daade8 100644
Binary files a/src/views/dataV/img/leftTitle.png and b/src/views/dataV/img/leftTitle.png differ
diff --git a/src/views/dataV/pageOne/AreaCount copy.vue b/src/views/dataV/pageOne/AreaCount copy.vue
new file mode 100644
index 0000000..e62d777
--- /dev/null
+++ b/src/views/dataV/pageOne/AreaCount copy.vue	
@@ -0,0 +1,134 @@
+<template>
+  <div class="w100 h100">
+    <div class="echart" id="mychart" style="height: 100%"></div>
+  </div>
+</template>
+
+<script>
+import { autoHover } from '../echartsOption';
+export default {
+  name: '',
+  mixins: [],
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.initEcharts();
+  },
+  destroyed() {},
+  methods: {
+    initEcharts() {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: '10%',
+          right: '3%',
+          left: '5%',
+          bottom: '10%',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+                '产业园规划',
+                '标准农田',
+                '种植业',
+                '标注养殖',
+                '养殖业',
+                '高标准农田',
+            ],
+            axisLine: {
+              lineStyle: {
+                color: '#FFFFFF',
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: '#e2e9ff',
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            axisLabel: {
+              formatter: '{value}',
+              color: '#e2e9ff',
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(0,186,255,.6)',
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.12)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: 'bar',
+            data: [80, 80, 97, 53, 95, 26],
+            barWidth: '14px',
+            itemStyle: {
+              normal: {
+                color: this.$echarts.graphic.LinearGradient(0,0,0,1,[
+                    {
+                      offset: 0,
+                      color: 'rgba(0,244,255,1)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(0,77,167,1)', // 100% 处的颜色
+                    },
+                  ],false
+                ),
+                shadowColor: 'rgba(0,160,221,1)',
+                shadowBlur: 4,
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 30,
+                formatter: '{c}',
+                position: 'top',
+                textStyle: {
+                  color: '#00D6F9',
+                  fontSize: 16,
+                },
+              },
+            },
+          },
+        ],
+      };
+      const myChart = this.$echarts.init(document.getElementById('mychart'));
+      myChart.setOption(option);
+      autoHover(myChart,option,1500);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/dataV/pageOne/HomeCount copy.vue b/src/views/dataV/pageOne/HomeCount copy.vue
new file mode 100644
index 0000000..948cf03
--- /dev/null
+++ b/src/views/dataV/pageOne/HomeCount copy.vue	
@@ -0,0 +1,114 @@
+<template>
+  <div class="w100 h100">
+      <div class="topBox">
+              <div class="topLft">
+                <p>6%</p>
+                <p>家庭农场</p>
+              </div>
+              <div class="topRit">
+                <div class="topList" v-for="(item,index) in dataList" :key="index">
+                  <p>
+                    <img :src="item.imgs" alt="">
+                    <span>{{item.nums}}</span>
+                  </p>
+                  <p>
+                    <span>{{item.name}}</span>
+                    <span>{{item.homer}}</span>
+                  </p>
+                </div>
+              </div>
+            </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  mixins: [],
+  components: {},
+  props: {},
+  data() {
+    return{
+        dataList:[
+            {name:'龙头企业',nums:10,imgs:require('../img/5.png'),homer:'（家）'},
+            {name:'入园参与',nums:28,imgs:require('../img/6.png'),homer:'（家）'},
+            {name:'家庭农场',nums:56,imgs:require('../img/7.png'),homer:'（家）'},
+            {name:'合作社',nums:811,imgs:require('../img/8.png'),homer:'（家）'}
+          ]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  destroyed() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.topBox{
+  display: flex;
+  .topLft{
+    padding:20px 0 0 30px;
+    width:40%;
+    text-align: center;
+    p:nth-child(1){
+      background: url('../img/4.png');
+      background-size: 100% 100%;
+      width:144px;
+      height: 112px;
+      text-align: center;
+      line-height: 112px;
+      color:#ccefff ;
+      font-size: 24px;
+    }
+    p:nth-child(2){
+      background: url('../img/9.png');
+      background-size: 100% 100%;
+      width:125px;
+      height: 38px;
+      text-align: center;
+      line-height: 38px;
+      color:#ccefff ;
+      font-size: 18px;
+      margin-left:10px
+    }
+  }
+  .topRit{
+    width:56%;
+    display: flex;
+    padding:50px 0 0 30px;
+    flex-wrap: wrap;
+    .topList{
+      width:50%;
+      p:nth-child(1){
+        display: flex;
+        margin:0;
+        align-items: center;
+        img{
+          width:24px;
+          height: 24px;
+          margin-right:8px
+        }
+        span{
+          font-size: 22px;
+          color: #ccefff;
+        }
+      }
+      p:nth-child(2){
+        display: flex;
+        margin:0;
+        align-items: center;
+        padding-top:10px;
+        color:#ccc
+      }
+    }
+    .topList:nth-child(3){
+      margin-top:30px
+    }
+    .topList:nth-child(4){
+      margin-top:30px
+    }
+  }
+}
+</style>
diff --git a/src/views/dataV/pageOne/MapChart copy.vue b/src/views/dataV/pageOne/MapChart copy.vue
new file mode 100644
index 0000000..a26218a
--- /dev/null
+++ b/src/views/dataV/pageOne/MapChart copy.vue	
@@ -0,0 +1,100 @@
+<template>
+  <div class="w100 h100 flex aic">
+    <div class="topLeft">
+
+      <div>
+        <el-date-picker v-model="value1" type="year" placeholder="选择年">
+        </el-date-picker>
+      </div>
+      <ul>
+        <li>
+          <img src="../img/output.png" alt="" />
+          <div class="topRit">
+            <p>农业总产值（亿元）</p>
+            <p style="color: #2effb7">1,000.00</p>
+          </div>
+        </li>
+        <li>
+          <img src="../img/level.png" alt="" />
+          <div class="topRit">
+            <p>产业园总产值（亿元）</p>
+            <p style="color: #ff6e6f">27.51</p>
+          </div>
+        </li>
+        <li>
+          <img src="../img/production.png" alt="" />
+          <div class="topRit">
+            <p>主导鸡肉产量（吨）</p>
+            <p style="color: #fcde1f">30,656.00</p>
+          </div>
+        </li>
+        <li>
+          <img src="../img/123.png" alt="" />
+          <div class="topRit">
+            <p>主导小麦产量（吨）</p>
+            <p style="color: #00f6ff">44,120.00</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="topRight">
+      <img src="../img/3.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Map',
+  mixins: [],
+  components: {},
+  props: {},
+  data() {
+    return {
+          value1:'',
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  destroyed() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.topLeft{
+  width: 30%;
+  height: 100%;
+  ::v-deep .el-input__inner{
+    background: #203c4966!important;
+    border: none;
+    color: #fff
+  }
+  ul{
+    padding-left:0px
+  }
+  ul li{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    margin:20px 0;
+    img{
+      width:112px;
+      height: 118px;
+    }
+    .topRit{
+      margin-left:10px;
+      p:nth-child(1){
+        color:#fff;
+         font-size: 16px;
+         margin-top:20px
+      }
+      p:nth-child(2){
+        font-size: 30px;
+        margin-top:10px
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dataV/pageOne/greenIndustry copy.vue b/src/views/dataV/pageOne/greenIndustry copy.vue
new file mode 100644
index 0000000..d56284b
--- /dev/null
+++ b/src/views/dataV/pageOne/greenIndustry copy.vue	
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="bom">
+      <div class="bomList" v-for="(item,index) in list" :key="index">
+        <div class="bomLeft">
+          <img :src="item.img" alt="">
+        </div>
+        <div class="bomRigtht">
+          <p>{{item.name}}</p>
+          <p>
+            <span class="span1">{{item.num}}</span>
+            <span class="span2">{{item.percent}}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default{
+  data(){
+    return{
+      list:[
+        {name:'农产品认证',num:40.2,percent:'%',img:require('../img/10.png')},
+        {name:'农产品面积',num:5475,percent:'亩',img:require('../img/11.png')},
+        {name:'综合利用率',num:93.9,percent:'%',img:require('../img/12.png')},
+        {name:'化肥利用率',num:40.2,percent:'%',img:require('../img/13.png')},
+        {name:'农药利用率',num:40.7,percent:'%',img:require('../img/14.png')},
+        {name:'监测合格率',num:99.9,percent:'%',img:require('../img/15.png')},
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bom{
+  display: flex;
+  flex-wrap: wrap;
+  margin-top:10px;
+  .bomList{
+    width:33%;
+    display: flex;
+    margin-top: 28px;
+    .bomLeft{
+      img{
+        width:80px;
+        height: 80px;
+        margin-right:10px
+      }
+    }
+    .bomRigtht{
+     p:nth-child(1){
+      font-size: 18px;
+      color:#ccc;
+      margin:0;
+      margin-top:10px
+     }
+      p:nth-child(2){
+      font-size: 16px;
+      color:#ccc;
+      margin:0;
+      margin-top:5px
+     }
+      .span1{
+        font-size: 20px;
+        color:#ccefff
+      }
+      .span2{
+        font-size: 10px;
+        color:#99afbf;margin-left:10px
+      }
+    }
+  }
+  .bomList:nth-child(4),.bomList:nth-child(5),.bomList:nth-child(6){
+    margin-top:32px
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataV/pageOne/index copy.vue b/src/views/dataV/pageOne/index copy.vue
new file mode 100644
index 0000000..55dff32
--- /dev/null
+++ b/src/views/dataV/pageOne/index copy.vue	
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <LayOut :bg="bg" :title="title">
+      <template #one>
+        <map-chart></map-chart>
+      </template>
+      <template #two>
+        <home-count></home-count>
+      </template>
+      <template #three>
+        <area-count></area-count>
+      </template>
+      <template #four>
+        <green-industry></green-industry>
+      </template>
+      <template #five>
+        <money-industry></money-industry>
+      </template>
+      <template #six>
+        <industry-percent></industry-percent>
+      </template>
+    </LayOut>
+  </div>
+</template>
+
+<script>
+import LayOut from '../layOut.vue';
+import MapChart from './MapChart.vue';
+import HomeCount from './HomeCount.vue';
+import AreaCount from './AreaCount.vue';
+import greenIndustry from './greenIndustry.vue';
+import moneyIndustry from './moneyIndustry.vue';
+import industryPercent from './industrypercent.vue';
+
+export default {
+  props: {
+      baseId:Number
+  },
+  components: {
+    LayOut,
+    MapChart,
+    HomeCount,
+    AreaCount,
+    greenIndustry,
+    moneyIndustry,
+    industryPercent,
+  },
+  data() {
+    return {
+      bg: require('../img/bg.png'),
+      title: [
+        '集约经营主体',
+        '主导产业面积',
+        '产业绿色发展',
+        '主导产业产值',
+        '主导产业占比',
+      ],
+    };
+  },
+    watch:{
+      baseId(n){
+        console.log('page1',n)
+      }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/dataV/pageOne/industrypercent copy.vue b/src/views/dataV/pageOne/industrypercent copy.vue
new file mode 100644
index 0000000..03e799a
--- /dev/null
+++ b/src/views/dataV/pageOne/industrypercent copy.vue	
@@ -0,0 +1,329 @@
+<template>
+  <div class="box">
+    <div>
+      <div class="echart" id="mychart3" ref="chart"></div>
+    </div>
+    <div>
+      <div class="echart" id="mychart4"></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../echartsOption.js"; //工具类js，页面路径自己修改
+
+const color = ["#3cd6b7", "#fe9326", "#124fb7", "#383893"];
+export default {
+  data () {
+    return {
+      optionData: [
+        {
+          name: "三产产值",
+          value: 13,
+        },
+        {
+          name: "二产产值",
+          value: 8,
+        },
+        {
+          name: "一产产值",
+          value: 3,
+        },
+        {
+          name: "产圈总产产值",
+          value: 17,
+        },
+      ],
+      statusChart: null,
+      option: {},
+    }
+  },
+  mounted () {
+    this.initChart();
+    this.initChart2()
+    const that = this;
+    window.onresize = function () {
+      that.changeSize();
+    };
+  },
+  methods: {
+    // 图表初始化
+    initChart () {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0.6, 200, 28, 22, 40);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        startAngle: -90, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen (myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+    // 自适应宽高
+    changeSize () {
+      this.statusChart.resize();
+    },
+    initChart2 () {
+      let data = ['三产产值', '二产产值', '一产产值', '产园总产值']
+      let option = {
+        grid: {
+          top: '8%',
+          left: '10%',
+          right: '20%',
+          bottom: '20%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: "{b0}: {c0}亿元"
+        },
+
+        xAxis: {
+          show: false,                //是否显示x轴
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          inverse: true,               //让y轴数据逆向
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666'       //y轴字体颜色
+            },
+            formatter: function (value, index) {
+              return [
+                '{title|' + value + '} '
+              ].join('\n');
+            },
+            //定义富文本标签
+            rich: {
+              lg: {
+                fontWeight: 'bold',
+                fontSize: 12,       //字体默认12
+                color: '#08C',
+                padding: [0, 5, 0, 0]
+              },
+              title: {
+                color: '#fff',
+                fontWeight: 'lighter',
+
+              }
+            }
+          },
+          splitLine: { show: false },   //横向的线
+          axisTick: { show: false },    //y轴的端点
+          axisLine: { show: false },    //y轴的线
+          data: data
+        },
+        series: [
+          {
+            name: '数据内框',
+            type: 'bar',
+            label: {
+              normal: {
+                show: true,
+                position: 'right', // top, right, inside, insideTop,...
+                textStyle: {
+                  color: 'white',
+                  fontSize: 12
+                },
+                formatter: '{c}' + "亿元"
+              }
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 30,
+                color: function (params) { // 颜色定制显示（按顺序）
+                  var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0',];
+                  return colorList[params.dataIndex]
+                },
+              }
+            },
+            barWidth: 10,
+            data: [40, 63, 20, 100,]
+          },
+          {
+            name: '外框',
+            type: 'bar',
+
+            itemStyle: {
+              normal: {
+                barBorderRadius: 30,
+                color: '#285079',
+              }
+            },
+            barGap: '-100%',
+            z: 0,
+            barWidth: 10,
+            data: [100, 100, 100, 100,],
+          }
+        ]
+      }
+      const myChart = this.$echarts.init(document.getElementById("mychart4"));
+      myChart.setOption(option);
+      clearInterval(this.toolTipTimer)
+       let index = 0
+      this.toolTipTimer = setInterval(() => {
+      myChart.dispatchAction({
+        type: 'showTip', // 提示框
+        seriesIndex: 0,
+        dataIndex: index // 第几行柱子高亮
+      })
+      if (index == data.length - 1) index = 0 //展示到最后一个的时候 从0开始 
+        else index++
+      }, 3000)
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  display: flex;
+}
+#mychart3 {
+  width: 260px;
+  height: 260px;
+}
+#mychart4 {
+  width: 360px;
+  height: 330px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataV/pageOne/moneyIndustry copy.vue b/src/views/dataV/pageOne/moneyIndustry copy.vue
new file mode 100644
index 0000000..8c27361
--- /dev/null
+++ b/src/views/dataV/pageOne/moneyIndustry copy.vue	
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <div class="echart" id="mychart2" style="height:260px"></div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      chartData: [
+        {
+          name: '三产产值',
+          value: 50,
+          test: '备注1'
+        },
+        {
+          name: '二产产值',
+          value: 60,
+          test: '备注2'
+        },
+        {
+          name: '二产产值',
+          value: 66,
+          test: '备注3'
+        },
+        {
+          name: '一产产值',
+          value: 72,
+          test: '备注4'
+        },
+        {
+          name: '产园总产值',
+          value: 80,
+          test: '备注5'
+        },
+      ]
+    }
+  },
+  mounted () {
+    this.initEcharts();
+  },
+  methods: {
+    initEcharts () {
+      var itemValue = [], bgData = []; //声明背景数据
+      // 取出所有数据最大值,作为柱形图背景数据
+      this.chartData.forEach(function (items, index) {
+        itemValue.push(items.value);
+      });
+      let maxdata = Math.max.apply(null, itemValue); ///applay方法★取得最大值
+      for (var i = 0; i < this.chartData.length; i++) {
+        bgData.push(maxdata); //取得最大值
+      }
+      let $colorList = this.$colorList
+      const option = {
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: "{b0}: {c0}亿元",
+        },
+        legend: {
+          show: false
+        },
+        toolbox: {
+          show: false
+        },
+        grid: {
+          top: '8%',
+          left: '2%',
+          right: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'value',
+          position: 'bottom',
+          boundaryGap: true, // 边界间隙
+          min: 0,
+          axisLabel: {
+            show: false,
+            textStyle: {
+              color: '#fff',
+              fontSize: 16
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(255, 255, 255, .5)'
+            }
+          },
+          axisTick: {
+            show: false // 坐标轴小标记
+          },
+          splitLine: {
+            show: false, // 是否显示分割线
+            lineStyle: {
+              color: 'rgba(255, 255, 9255, 0)', // 纵向向网格线颜色
+              type: 'dashed',
+              width: 1
+            }
+          }
+        }],
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLabel: {
+            textStyle: {
+              color: '#8aa5ab',
+              fontSize: 15
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, .5)',
+              width: 1
+            }
+          },
+          axisTick: {
+            show: false // 坐标轴小标记
+          },
+          splitLine: {
+            show: false
+          },
+          data: (function (data) {
+            var arr = [];
+            data.forEach(function (items) {
+              arr.push(items.name);
+            });
+            return arr;
+          })(this.chartData) // 载入y轴数据
+        },
+        series: [{
+          type: 'bar',
+          barGap: "-130%",
+          label: {
+            normal: {
+              show: false
+            }
+          },
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: '#1a2859' ,// 图表颜色
+            },
+          },
+          data: bgData, // 载入背景数据
+          z: 0
+        }, {
+          type: 'bar',
+          label: {
+            normal: {
+              show: true,
+              position: 'right', // top, right, inside, insideTop,...
+              textStyle: {
+                color: 'white',
+                fontSize: 16
+              },
+              formatter: '{c}' + "亿元"
+            }
+          },
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: function (params) { // 颜色定制显示（按顺序）
+                var colorList = $colorList;
+                return colorList[params.dataIndex]
+              },
+               barBorderRadius: [0, 17, 17, 0]  //圆角
+            }
+          },
+          data: this.chartData, // 载入数据(内含自定义参数)
+          z: 1
+        }]
+      }
+     const myChart = this.$echarts.init(document.getElementById("mychart2"));
+      myChart.setOption(option); 
+      clearInterval(this.toolTipTimer)
+      let index = 0
+      this.toolTipTimer = setInterval(() => {
+      myChart.dispatchAction({
+        type: 'showTip', // 提示框
+        seriesIndex: 0,
+        dataIndex: index // 第几行柱子高亮
+      })
+      if (index == this.chartData.length - 1) index = 0 //展示到最后一个的时候 从0开始 
+        else index++
+      }, 3000)
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
\ No newline at end of file