EChartsecharts 折线配置项内容和展示

如何在点击竖线时直接标记折线图上的点

      var dataSource = [];
var xAxisFlag = "";
var index = 0;
var option = {
    title: {
        text: 'ECharts'
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        //              formatter: '{b}<br/>{a} : {c}<br/>{a1} : {c1}<br/>{a2} : {c2}' ,
        backgroundColor: ['skyblue'],
        textStyle: {
            color: ['#003']
        },
        // itemStyle : { normal: {label : {show: true}}},

    },
    legend: {
        data: ['销量']
    },
    dataZoom: [{
        show: true,
        realtime: true,
        start: 20,
        end: 80
    }, {
        type: 'inside',
        realtime: true,
        start: 20,
        end: 80
    }],
    xAxis: {
        data: ["0", "1", "2", "3", "4", "5"],
        boundaryGap: false,
    },
    yAxis: {

    },
    toolbox: {
        show: true,
        feature: {
            mark: true,
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        },

    },
    series: [{
            name: '折线A',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20],
            showSymbol: false,
            markLine: { // 设置警戒线（图表标线）
                silent: true, // 图形是否不响应和触发鼠标事件
                lineStyle: {
                    normal: {
                        type: 'solid'
                    }
                },
                data: [],
            }
        },

    ]
};

myChart.setOption(option);
// option.series[3].data[dataIndex]=40;
myChart.on('click', function(param) {
    dataIndex = param.dataIndex; //X轴的索引
    var data = param.data;
    var name = param.name;

    console.log('document.body.offsetWidth', document.body.offsetWidth);
    console.log('document.body.offsetHeight', document.body.offsetHeight);

    var xAxisValue = option.xAxis.data[dataIndex];
    if (option.series[0].markLine.data.length == 0) {
        var value = "";
        value += xAxisValue;
        for (var i = 0; i < option.series.length; i++) {
            value += '\n' + option.series[i].name + '：' + option.series[i].data[dataIndex];
        }
        //          console.log(value);                  
        var obj = {
            type: 'average',
            xAxis: xAxisValue, // 设定值
            label: {
                normal: {
                    formatter: value,
                    position: 'end',
                }
            }
        }
        dataSource.push(obj);
        option.series[0].markLine.data = dataSource;
        myChart.setOption(option);
        console.log('dataSource', dataSource.length);
    } else {
        for (var i = 0; i < option.series[0].markLine.data.length; i++) {
            var xAxisIndex = option.series[0].markLine.data[i].xAxis;
            console.log('[xAxisIndex]', xAxisIndex);
            console.log('[xAxisValue]', xAxisValue);
            if (xAxisIndex == xAxisValue) {
                index = i;
                console.log('值相等');
                break;
            } 
        }

        if (index == -1) {
            var value = "";
            var xAxisValue = option.xAxis.data[dataIndex];
            value += xAxisValue;
            for (var i = 0; i < option.series.length; i++) {
                value += '\n' + option.series[i].name + '：' + option.series[i].data[dataIndex];
            }

            var obj = {
                type: 'average',
                xAxis: xAxisValue, // 设定值
                label: {
                    normal: {
                        formatter: value,
                        position: 'end',
                    }
                }
            }
            dataSource.push(obj);
            option.series[0].markLine.data = dataSource;
            myChart.setOption(option);
        } else {
            console.log('剔除相等值');
            option.series[0].markLine.data.splice(index, 1);
            myChart.setOption(option);
        }
    }

})