echarts折线图拐点发光效果

在Echarts 3.0中，可以通过以下步骤实现折线图拐点发光效果：

1. 在series中添加markPoint数据，并设置symbol为'circle'，symbolSize为10，label为normal，formatter为null，emphasis为label和itemStyle，其中itemStyle的color为'rgba(0,0,0,0)'，borderColor为'#FFFF00'，borderWidth为2，如下所示：

series: [{
    name: '示例数据',
    type: 'line',
    data: [10, 20, 30, 40, 50, 60, 70],
    markPoint: {
        symbol: 'circle',
        symbolSize: 10,
        label: {
            normal: {
                formatter: null
            },
            emphasis: {
                formatter: null
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(0,0,0,0)',
                borderColor: '#FFFF00',
                borderWidth: 2
            },
            emphasis: {
                color: 'rgba(0,0,0,0)',
                borderColor: '#FFFF00',
                borderWidth: 2
            }
        },
        data: [{
            type: 'max',
            name: '最大值'
        }, {
            type: 'min',
            name: '最小值'
        }]
    }
}]

2. 在tooltip中添加extraCssText，设置markPoint的样式，如下所示：

tooltip: {
    trigger: 'axis',
    extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);padding: 10px;',
    axisPointer: {
        type: 'cross'
    },
    formatter: function(params) {
        var res = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
        }
        return res;
    }
}

3. 在legend中添加click事件，设置markPoint的显示和隐藏，如下所示：

legend: {
    data: ['示例数据'],
    selected: {
        '示例数据': true
    },
    textStyle: {
        color: '#333'
    },
    orient: 'horizontal',
    x: 'center',
    y: 'bottom',
    padding: [10, 0, 0, 0],
    itemGap: 20,
    backgroundColor: '#eee',
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    formatter: function(name) {
        return name;
    }
},

legend: {
    ...
    // 添加click事件
    selectedMode: 'single',
    selected: {
        '示例数据': true
    },
    ...
    // 重写click事件
    click: function(params) {
        var selected = params.selected;
        var series = chart.getOption().series;
        var markPoints = [];
        for (var i = 0, l = series.length; i < l; i++) {
            if (series[i].type === 'line') {
                markPoints = markPoints.concat(series[i].markPoint.data);
            }
        }
        for (var i = 0, l = markPoints.length; i < l; i++) {
            var name = markPoints[i].name;
            if (selected[name] === false) {
                markPoints[i].itemStyle.normal.opacity = 0;
                markPoints[i].itemStyle.emphasis.opacity = 0;
            } else {
                markPoints[i].itemStyle.normal.opacity = 1;
                markPoints[i].itemStyle.emphasis.opacity = 1;
            }
        }
        chart.setOption({
            series: series
        });
    }
}

完整代码如下所示：

var chart = echarts.init(document.getElementById('chart'));

var option = {
    tooltip: {
        trigger: 'axis',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);padding: 10px;',
        axisPointer: {
            type: 'cross'
        },
        formatter: function(params) {
            var res = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
            }
            return res;
        }
    },
    legend: {
        data: ['示例数据'],
        selected: {
            '示例数据': true
        },
        textStyle: {
            color: '#333'
        },
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        padding: [10, 0, 0, 0],
        itemGap: 20,
        backgroundColor: '#eee',
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 5,
        formatter: function(name) {
            return name;
        }
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#333'
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#333'
            }
        }
    },
    series: [{
        name: '示例数据',
        type: 'line',
        data: [10, 20, 30, 40, 50, 60, 70],
        markPoint: {
            symbol: 'circle',
            symbolSize: 10,
            label: {
                normal: {
                    formatter: null
                },
                emphasis: {
                    formatter: null
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)',
                    borderColor: '#FFFF00',
                    borderWidth: 2
                },
                emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderColor: '#FFFF00',
                    borderWidth: 2
                }
            },
            data: [{
                type: 'max',
                name: '最大值'
            }, {
                type: 'min',
                name: '最小值'
            }]
        }
    }],
    // 添加click事件
    legend: {
        selectedMode: 'single',
        selected: {
            '示例数据': true
        },
        click: function(params) {
            var selected = params.selected;
            var series = chart.getOption().series;
            var markPoints = [];
            for (var i = 0, l = series.length; i < l; i++) {
                if (series[i].type === 'line') {
                    markPoints = markPoints.concat(series[i].markPoint.data);
                }
            }
            for (var i = 0, l = markPoints.length; i < l; i++) {
                var name = markPoints[i].name;
                if (selected[name] === false) {
                    markPoints[i].itemStyle.normal.opacity = 0;
                    markPoints[i].itemStyle.emphasis.opacity = 0;
                } else {
                    markPoints[i].itemStyle.normal.opacity = 1;
                    markPoints[i].itemStyle.emphasis.opacity = 1;
                }
            }
            chart.setOption({
                series: series
            });
        }
    }
};

chart.setOption(option);