VUE实现DataV轮播表和Echarts仪表盘联动，仪表盘的值随轮播图的变化而变化

前提

如果安装了datav的依赖，先找到轮播表的源码，大概位置在这：node-modules 下的如图位置，把scrollBoard复制出来放到自己的项目文件夹里，修改的话只修改这个就好，不动源码，


注：怕混淆的话可以自己改个名字，改的时候把main.vue中的name和index.js中的名字改了就行

第一步，改代码，在复制出来的文件中的main.vue中找到animation()方法，在该方法的结尾处添加以下代码：

		let numVal = 0;
        let tempLength = mergedConfig.data.length;
        let tempIndex = animationIndex;
        if (animationIndex > tempLength) {
          tempIndex = animationIndex - tempLength;
        }
        if (tempIndex == 0 || tempIndex == tempLength) {
          numVal = mergedConfig.val[1];
        } else if (tempIndex == rowsData.length - 1 || tempIndex == tempLength - 1) {
          numVal = mergedConfig.val[0];
        } else {
          numVal = mergedConfig.val[tempIndex + 1];
        }
        this.$emit("gaugeVal", numVal);

第二步，在创建仪表盘的页面里引入该组件，并定义两个事件用来接收仪表盘的参数；

<!--    vue页面-->
 <div id="main" style="width:600px;height="400px"></div>
 <dv-scroll-board-change
      :config="configGu"
      style="width: 100%;height: 100px;z-index:1;position: relative;"
      @gaugeVal="receive" @yzData="getYzData"
    />

import * as echarts from 'echarts';
export default {
 data() {
      return {
      gaugeVal: 0,
      configGu: {//比datav提供的组件多传了一个val数组值
          data: [['张三',50],['李四',80],['王五',90]],//轮播表对应的轮播字段
          val:[50,80,90],//轮播表对应的轮播字段应该在仪表盘上显示的值
          rowNum: 3
          oddRowBGC: 'transparent',
          evenRowBGC: 'transparent',
          align: ['center'],
          waitTime: 5000
        },
      }
    },
  mounted() {
      this.myEcharts();
    },
 methods: {
 	myEcharts() {
 		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		let option;
       	 option = {
          series: [
            {
              type: 'gauge',
              startAngle: 180,
              endAngle: 0,
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [0.5, '#3680b5'],
                    [1, '#c71c1c']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: [
                    [0.5, '#3680b5'],
                    [1, '#c71c1c']
                  ]
                },
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -20,
                length: 5,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 30,
                fontSize: 12
              },
              detail: {
                valueAnimation: true,
                offsetCenter: [0, '12%'],
                formatter: '{value}分',
                color: 'auto',
                fontSize: 16,
              },
              data: [
                {
                  value: this.gaugeVal
                }
              ]
            }
          ]
        };
        option && myChart.setOption(option);
	},
	 receive(gaugeVal) {
        if (new RegExp(/^\d+$/).test(this.gaugeVal)) {
          this.gaugeVal = gaugeVal;
          this.myEcharts();
        }
      },
  }
}