ECharts 联动效果

来源：互联网发布：大数据存储方案编辑：程序博客网时间：2024/06/05 19:54

在使用ECharts 时候要用到联动的，比如下面的示例图，当鼠标经过A的图的时候，这个时候有提示，然后让B的提示也显示出来。这样一个效果。

官方文档给的配置项， http://echarts.baidu.com/api.html#echarts.connect

        var myChart1 = echarts.init(document.getElementById('main1'));        var myChart2 = 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);                // 控制联动的        myChart1.connect([myChart2]);        myChart2.connect([myChart1]);

阅读全文

0 0