console 命令行工具 X clear

console

window.onload = function () {
    var myChart = echarts.init(document.getElementById('root'));
    option = {
        color: ['#D53A35'],
        tooltip: {
            trigger: 'axis',
            //formatter: "{b} <br> 合格率: {c}%"
        },
        grid: {
            top: '6%',
            bottom: '6%',
            left: '3%',
            right: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            name: '',
            boundaryGap: false,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#525252'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#525252'
            },
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10']
        },
        yAxis: {
            type: 'value',
            name: '',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#525252'
            },
            splitLine: {
                lineStyle: {
                    type: 'dotted',
                    color: '#AAA' //F3F3F3	
                }
            }
        },
        series: [{
            name: '24小时质污染趋势图',
            type: 'line',
            symbol: 'circle',
            data: [100, 120, 132, 101, 134, 90, 230, 210, 80, 20]
        }]
    };
    myChart.setOption(option);

    myChart.getZr().on('click', params => {
        const pointInPixel = [params.offsetX, params.offsetY]
        // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引值，借助于索引值的获取到其它的信息
        let pointInGrid = myChart.convertFromPixel({
            seriesIndex: 0
        }, pointInPixel)


        // // x轴数据的索引值
        let xIndex = pointInGrid[0]
        console.log(xIndex)

        // 使用getOption() 获取图表的option
        let op = myChart.getOption()

        // 获取当前点击位置相近点位数据
        var xData = op.series[0].data[xIndex]
        alert(xData)
        console.log(xData)
    })
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>echarts点击任意位置获取临近点数据</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

#root{
    width: 600px;
    height: 450px;
    background-color: #eee;
}

本项目引用的自定义外部资源

echarts.min.js