Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wymstar opened this issue Feb 9, 2017 · 5 comments
Closed

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

wymstar opened this issue Feb 9, 2017 · 5 comments

Comments

@wymstar
Copy link

wymstar commented Feb 9, 2017

One-line summary [问题简述]

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

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
Copy link
Member

100pah commented Feb 9, 2017

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

@pissang pissang closed this as completed Mar 24, 2017
@100pah
Copy link
Member

100pah commented Apr 5, 2017

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

@dongsir
Copy link

dongsir commented Sep 17, 2017

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

@surplus-cat
Copy link

surplus-cat commented Apr 13, 2020

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

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

@wu1005690803
Copy link

wu1005690803 commented Sep 28, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants