echarts vue2 柱状图定时联动饼图

需求：

1.需前端做个鼠标悬浮自动切换的效果。每10秒钟自动切换一个柱子。

2.鼠标悬浮到哪个柱子，则饼图配合显示该柱子对应的饼图。

效果： 

 

展示效果

 

 备注：该图是给饼图另加了名称展示，数据是调过接口的真实数据，所以与上图不一致 

option配置：

option: {
  title: {
    show: false,
    text: '日常巡查异常记录',
  },
  legend: [{
    right: 'center',
    top: 'top',
    data: [
      {
        name: '日常巡查异常次数'
      },
      {
        name: '已解决',
        icon: 'circle',
      },
      {
        name: '未解决',
        icon: 'circle',
      },
    ],
  },
  // 给饼图加名称的地方
  {
    right: 140,
    top: 'top',
    data: [
      {
        name: '监测',
        icon: 'circle',
      },
      {
        name: '水体',
        icon: 'circle',
      },
      {
        name: '保护',
        icon: 'circle',
      },
    ],
  }],
  tooltip: {
    trigger: 'item',
    formatter: (params) => {
      if (typeof params === 'object' && !params.length) {
        return `${this.dateValue}

                ${params.marker} ${params.name}：${params.data[params.encode.value[0]]}

                ${params.marker} 占比：${params.percent}%`
      } else if (typeof params === 'object' && params.length) {
        return `${params[0].name}

                ${params[0].marker} ${params[0].seriesName}：${params[0].data[1]}

                ${params[1].marker} ${params[1].seriesName}：${params[1].data[2]}

                ${params[2].marker} ${params[2].seriesName}：${params[2].data[3]}
`
      }
    },
  },
  dataset: [
    { source: [
        ['2019', '2020', '2021', '2022'],
        [10, 30, 32, 44, 30],
        [60, 20, 42, 64, 20],
        [30, 40, 12, 34, 40],
        [17, 39, 22, 24, 80],
      ]
    },
    {
      source: [
        ['product', '2019', '2020', '2021', '2022'],
        ['监测', 10, 30, 32, 44, 30],
        ['水体', 23, 30, 22, 44, 50],
        ['保护', 30, 10, 32, 64, 30]
      ]
    }
  ],
  xAxis: [
    {
      type: 'category',
      gridIndex: 0,
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0, 0, 0, 0.1)',
          opacity: 0.3,
        },
        value: this.pillar,
      },
    },
  ],
  yAxis: [
    {
      gridIndex: 0,
      type: 'value',
      name: '单位：个',
      splitLine: {//保留网格线
        show: true,
        lineStyle: {//y轴网格线设置
          color: '#CDD8E0',
          width: 1,
          type: 'dashed'
        }
      },
    },
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    tooltip: {
      trigger: 'axis',
    }
  },
  series: [
    {
      name: '日常巡查异常次数',
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,//圆点大小
      showSymbol: false,
      itemStyle: {
        color: colors[0],
      },
      lineStyle: {
        color: colors[0]
      },
      seriesLayoutBy: 'row',
    },
    {
      name: '已解决',
      type: 'bar',
      barWidth: 8,
      barGap: '100%',
      itemStyle: {
        color: colors[1],
      },
      lineStyle: {
        color: colors[1]
      },
      seriesLayoutBy: 'row',
    },
    {
      name: '未解决',
      type: 'bar',
      barWidth: 8,
      itemStyle: {
        color: colors[2],
      },
      lineStyle: {
        color: colors[2]
      },
      seriesLayoutBy: 'row',
    },
    {
      name: '巡查类型占比分布',
      type: 'pie',
      id: 'pie',
      datasetIndex: 1,
      radius: ['30%', '36%'],
      center: ['93%', 68],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      zlevel: 2,
      label: {
        show: true,
        position: 'center',
        formatter: () => {
          return `{a|${this.dateValue}\n\n巡查类型\n\n占比分布}`
        },
        rich: {
          a: {
            color: '#112A3A',
            fontWeight: 900,
            fontSize: '13px',
          }
        },
      },
      encode: {
        itemName: 'product',
        value: 1,
      },
    }
  ],
  color: ['#1C64F2', '#43C4BC', '#F2C94C']
},

定时轮播的方法：

   setOptionData(){
      this.myChart.setOption({
        series: {
          id: 'pie',
          encode: {
            value: this.pillar,
          }
        }
      });
    },
    banner() {
      const totalPillar = this.option.dataset[1].source[0].length - 1
      this.interval = setInterval(() => {
        this.pillar = this.pillar * 1 === totalPillar ? 1 : this.pillar * 1 + 1
        this.dateValue = this.option.dataset[1].source[0][this.pillar];
        this.setOptionData()
      }, 5000);
    },
    /**
     * 初始化图表
     */
    initChart() {
      const { myChart } = this
      window.addEventListener('resize', myChart.resize)
      this.$nextTick(() => {
        setTimeout(() => {
          myChart.resize()
          myChart.setOption(this.option, true)
        });
      })
      myChart.on('updateAxisPointer', (event) => {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          this.pillar = xAxisInfo.value + 1;
          this.dateValue = this.option.dataset[1].source[0][this.pillar];
          this.setOptionData()
        }
      });
      clearInterval(this.interval);
    },

 总体代码：