connect

Echarts.js目前已经提供了connect功能，只要图标的legend一样，那么就能实现联动。
例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var myChart1 = this.$echarts.init(document.getElementById('main1'));
var myChart2 = this.$echarts.init(document.getElementById('main2'));

var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart1.setOption(option);
myChart2.setOption(option);

// 控制联动的
this.$echarts.connect([myChart1,myChart2]);

效果如下面的示例图，当鼠标经过图1的时候，这个时候有提示，然后让图2的提示也显示出来

如何关联？

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

dataset

ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
dataset简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

效果图如下：

来源 http://echarts.baidu.com/examples/editor.html?c=dataset-link

在这个样例中，随着鼠标在坐标轴上的移动，饼图会不断的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
myChart.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart.setOption({
            series: {
                id: 'pie',
                label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                    value: dimension,
                    tooltip: dimension
                }
            }
        });
    }
});

本质上是通过鼠标事件，不断获取xAxisInfo，然后根据获取到的xAxisInfo.value(dimension)重新绘制饼图。这个可视化过程中数据是以数据集形式呈现的，所以用的encode，具体介绍可以在https://www.echartsjs.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE 看到。

通过事件

Echarts事件介绍

ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 dispatchAction 后触发的事件。

ECharts 中支持的图表行为，通过 dispatchAction 触发
action

在 ECharts 中主要通过 on 方法添加事件处理函数，该文档描述了所有 ECharts 的事件列表。
events

之所以可以使用这个实现多图联动，实质上是一个图上发生鼠标移动事件后，调用另一个图，使其产生动作。比如mychart1和mychart2，如果获取到了mychart1的params信息，通过这些信息可以对应到mychart2的dataIndex、SeriesIndex，那么，就可以用这样的形式实现联动。

点击事件

1
2
3
myChart.on('click',function(params){
    console.log(params);
});

但是这个方法有一个不友好的地方就是只有用户点击到图中如：点、线、柱状图等上才可以触发点击事件，点击那一列的其他位置是没有作用的，因此我找到了另外一种方法实现这个需求，通过点击所在值的这一列就会触发（区域点击事件），实现代码如下：

1
2
3
4
5
6
7
8
9
myChart.getZr().on('click',function(params){
    let point=[params.offsetX,params.offsetY];
    if(myChart.containPixel('gird',point)){
        let xIndex=myChart.convertFromPixel({seriesIndex:0},
              point)[1];
        let op=myChart.getOption();
        let name=op.xAxis[0].data[xIndex];
    }
})

myChart.setOption

重新绘制

myChart.dispatchAction

触发图表行为，例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等，更多见官方文档。

payload 参数可以通过batch属性同时触发多个行为。

注：在 ECharts 2.x 是通过 myChart.component.tooltip.showTip 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。因此在 ECharts 3 里统一改为 dispatchAction 的形式。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
myChart.dispatchAction({
    type: 'dataZoom',
    start: 20,
    end: 30
});
// 可以通过 batch 参数批量分发多个 action
myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{
        // 第一个 dataZoom 组件
        start: 20,
        end: 30
    }, {
        // 第二个 dataZoom 组件
        dataZoomIndex: 1,
        start: 10,
        end: 20
    }]
})