echarts 点击事件

echarts 点击事件，官网中既有例子也有文档。但基本是关于，点击图形（不包括空地）上的位置的点击事件。

而点击图形的点击事件，参考echarts 文档，使用click 事件即可。如下。

myChart.on('click', function (params) {
    console.log(params);
});

但是，当我们有tooltip 时，鼠标即使放在空地上，页面上看起来也会选中附近的相应坐标轴中的点时，如下图，鼠标的位置是Loading的左上角。此时，点击鼠标的触发事件就不是上面的click 那样简单了。

此时，得使用zrender。获取zrender 的点击事件，再判断点击坐标是否在坐标范围内，即可。

附上完整代码。

<script>
	var myChart = echarts.init(document.getElementById("echarts-div"));
	
	option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params, ticket, callback) {
        	console.log("formatter params ",params);
        	console.log("formatter ticket ",ticket);
		    return 'Loading';
		}
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
	};
	
	var zr = myChart.getZr();
	myChart.setOption(option);

	zr.on('click', function (params) {
	    var pointInPixel = [params.offsetX, params.offsetY];
	    var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);

	    if (myChart.containPixel('grid', pointInPixel)) {
	        console.log("point in grid ", pointInGrid);
	        console.log(params)
	        console.log(myChart.getOption().xAxis[0].data[pointInGrid[0]]);
	    }
	});

	zr.on('mousemove', function (params) {
	    var pointInPixel = [params.offsetX, params.offsetY];
	    zr.setCursorStyle(myChart.containPixel('grid', pointInPixel) ? 'copy' : 'default');
	});

</script>