echarts的散点图怎么设置由x轴触发气泡的hover事件?

图片描述
如图,这个是我鼠标挪到气泡上才能显示tooltip的信息,例子http://echarts.baidu.com/demo...,我现在想在这个代码的基础上实现鼠标移到任意位置,就把当前x坐标上所有符合我条件的tooltip显示出来 例子http://echarts.baidu.com/demo...
我需要改那个代码呢?

const option = {
    grid: {
        top: 20,
        left: '3%',
        right: '60px',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        padding: 10,
        formatter: (params) => {
            let str = `<div class="map-tips">
                <h1><i style="background:` + params.color + `" class="tag"></i>${params.value[3]}</h1>
                <p><span>信息1</span><span>${params.value[0]}</span></p>
                <p><span>信息2</span><span>${params.value[1]}</span></p>
                <p><span>信息3</span><span>${params.value[2]}</span></p>
            </div>`;
            return str;
        }
    },
    visualMap: [{
        show: false,
        left: 'right',
        top: '10%',
        dimension: 2,
        calculable: true,
        precision: 0.1,
        textGap: 30,
        textStyle: {
            color: '#fff'
        },
        inRange: {
            symbolSize: [10, 70],
            color: ['#ffd800', '#ff5400']
        },
        outOfRange: {
            symbolSize: [10, 70],
            color: ['rgba(255,255,255,.2)']
        },
        controller: {
            inRange: {
                color: ['#ffd800']
            },
            outOfRange: {
                color: ['#ff5400']
            }
        }
    }],
    legend: {
        show: false,
        right: 10,
        data: ['1990', '2015']
    },
    xAxis: {
        axisLine: {
            lineStyle: {
                color: '#e4e4e4'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#666'
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    yAxis: {
        axisLine: { show: false },
        axisTick: { length: 0 },
        axisLabel: {
            textStyle: {
                color: '#666'
            }
        },
        splitLine: {
            lineStyle: {
                color: ['#f0f0f0']
            }
        },
        scale: true
    },
    series: [{
        name: '1990',
        data: [],
        type: 'scatter',
        itemStyle: {
            normal: {
                shadowBlur: 2,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 1,
                opacity: 0.2
            }
        }
    }]
};

图片描述

阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题