怎么实现单容器多图表联动

[wymstar]

One-line summary [问题简述]

实现单容器多图表的tooltip联动

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:3.4
• Browser version [浏览器类型和版本]:Chrome 56.0.2924.87
• OS Version [操作系统类型和版本]:Win10

Expected behaviour [期望结果]

提示线能贯穿折线图和柱状图

ECharts option [ECharts配置项]

function splitData(rawData) {
    var categoryData = [];
    var values = [];
    var volumns = [];
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumns.push(rawData[i][4]);
    }
    return {
        categoryData: categoryData,
        values: values,
        volumns: volumns
    };
}

function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
    }
    return result;
}

$.get('data/asset/data/stock-DJI.json', function (rawData) {

    var data = splitData(rawData);

    myChart.setOption(option = {
        backgroundColor: '#eee',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        brush: {
            xAxisIndex: 'all',
            brushLink: 'all',
            outOfBrush: {
                colorAlpha: 0.1
            }
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            }
        ],
        series: [
            {
                name: 'Dow-Jones index',
                type: 'candlestick',
                data: data.values,
                itemStyle: {
                    normal: {
                        borderColor: null,
                        borderColor0: null
                    }
                },
                tooltip: {
                    formatter: function (param) {
                        var param = param[0];
                        return [
                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                            'Open: ' + param.data[0] + '<br/>',
                            'Close: ' + param.data[1] + '<br/>',
                            'Lowest: ' + param.data[2] + '<br/>',
                            'Highest: ' + param.data[3] + '<br/>'
                        ].join('');
                    }
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.volumns
            }
        ]
    }, true);

    // myChart.on('brushSelected', renderBrushed);

    // function renderBrushed(params) {
    //     var sum = 0;
    //     var min = Infinity;
    //     var max = -Infinity;
    //     var countBySeries = [];
    //     var brushComponent = params.brushComponents[0];

    //     var rawIndices = brushComponent.series[0].rawIndices;
    //     for (var i = 0; i < rawIndices.length; i++) {
    //         var val = data.values[rawIndices[i]][1];
    //         sum += val;
    //         min = Math.min(val, min);
    //         max = Math.max(val, max);
    //     }

    //     panel.innerHTML = [
    //         '<h3>STATISTICS:</h3>',
    //         'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
    //         'MIN of open: ' + min.toFixed(4) + '<br>',
    //         'MAX of open: ' + max.toFixed(4) + '<br>'
    //     ].join(' ');
    // }

    myChart.dispatchAction({
        type: 'brush',
        areas: [
            {
                brushType: 'lineX',
                coordRange: ['2016-06-02', '2016-06-20'],
                xAxisIndex: 0
            }
        ]
    });
});

Other comments [其他信息]

[100pah]

这个现在版本还不支持，近期要去加上。

[100pah]

v3.5 对这个功能已支持。

[dongsir]

@100pah
你好，能大致讲解一下 单容器多图表联动 用的是什么方法吗？谢谢！
http://gallery.echartsjs.com/editor.html?c=xSJpN0Ztig 此demo中是不联动的。

[surplus-cat]

@100pah
你好，能大致讲解一下 单容器多图表联动 用的是什么方法吗？谢谢！
http://gallery.echartsjs.com/editor.html?c=xSJpN0Ztig 此demo中是不联动的。

请问联动的方法实现了吗，本人目前的需求也是单容器要实现多图表 鼠标悬浮联动的效果

[wu1005690803]

大佬们 你们搞定了么。怎么就关闭了