echarts实现点击高亮当前点

Question

这个是官网很简单的一个例子。，LineChart

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

我想要实现的效果是，当点击Tue这个点时，显示一个以当前serie颜色为背景的实心圆，官网给的这个例子鼠标hover上去后会显示一个空心圆，点击的话没有任何反应。谢谢。

Answer 1

series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    symbol: 'circle'
}]

Answer 2

这样写可以，点击某一个点将那个点背景变红

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {
                value: 820,
            },
            {
                value: 932,
            },
            {
                value: 901,
            },
            {
                value: 934,
            },
            {
                value: 1290,
            },
            {
                value: 1330,
            },
            {
                value: 1320,
            },
        ],
        type: 'line',
    }]
};

var zr = myChart.getZr();

zr.on('click', function (params) {
    if(params.target){
        let index = params.target.dataIndex
        let data = option.series[0].data
        data[index].symbol = 'circle'
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }
});