Vue使用echarts做两个数据对比

需求:

有时候我们需要数据对比或者数据宏观展示的时候比如去年的气温和今年的气温可视化对比，今年的销售额和去年的销售额对比，当我们滑动到某个图表的时候另一个图表也展示相应的位置

具体代码:

dispatchAction

<template>
<div>
  <!-- 柱状图 -->
  <div id="main" style="height: 290px; width: 550px;"></div>
    <div id="main1" style="height: 290px; width: 550px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
  export default {

    mounted() {
      this.initCharts()
    },
    methods: {
        // 柱状图
        initCharts(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
 var myChart1 = echarts.init(document.getElementById('main1'));

     // 指定图表的配置项和数据
     var option = {
         title: {
         text: '月销量'
         },
         // 提示框
         tooltip: {},
         // 图例
         legend: {
         data: ['销量']
         },
         // 表示x轴坐标
         xAxis: {
         data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
         },
         // 表示y轴坐标
         yAxis: {},
         //
         series: [
         {
             name: '销量',
             type: 'bar',
             data: [3500, 2200, 4500, 6500, 200, 3000]
         }
         ]
     };
    myChart.setOption(option);
    myChart1.setOption(option);
    myChart.on('mouseover', function (params) {
       myChart1.dispatchAction({
        type:'showTip',
        seriesIndex:0,
        dataIndex:params.dataIndex
    });
    myChart1.dispatchAction({
                    type:'highlight',
                    seriesIndex:0,
                    dataIndex:params.dataIndex
                });
     });


 },
}
}
</script>

解析，我们可以通过echarts 的原生监听事件获取到目前点击或者滑动到的参数通过参数去触发指定的另一个图表位置，

效果图