Echarts图表联动实现

基本情况使用

// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);

基于vue 和 v-charts 封装了单图实现

 <ve-chart 
    :data="data"
    :height="height + 'px'"
    :width="width && (width + 'px')"
    v-bind="realChartProps"
    :after-set-option-once="afterSet">
  <div class="data-empty" v-show="isEmpty">暂无数据</div>
 </ve-chart>

通过after-set-option-once获取echart实例，

在afterSet方法里：

 afterSet(option) {
    this.chart = option;
    if (this.group) {
      this.chart.group = this.group;
      ECharts.connect(this.group);
    }
 }

ECharts需要import ECharts from 'echarts'; this.group 则是父类通过prop传进来。