var symbolSize = 20;
var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
var points = [];

option = {
    title: {
        text: 'Click to Add Points'
    },
    tooltip: {
        formatter: function (params) {
            var data = params.data || [0, 0];
            return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        min: -60,
        max: 20,
        type: 'value',
        axisLine: {onZero: false}
    },
    yAxis: {
        min: 0,
        max: 40,
        type: 'value',
        axisLine: {onZero: false}
    },
    series: [
        {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
        }
    ]
};

var zr = myChart.getZr();


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

    if (myChart.containPixel('grid', pointInPixel)) {
        data.push(pointInGrid);

        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });
    }
});

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