Echarts中如何添加注释和标记

在 ECharts 中，可以通过使用 graphic 元素或者 tooltip、label 等属性来添加注释和标记。下面是两种方法的详细说明：

方法一：使用 graphic 元素

graphic 元素允许你在图表中添加自定义的图形，包括注释和标记。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    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'
    }],
    graphic: {
        elements: [
            {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                    text: '这是一个注释',
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 16
                }
            },
            {
                type: 'circle',
                shape: {
                    cx: 3,
                    cy: 3,
                    r: 3
                },
                style: {
                    fill: 'red'
                },
                position: [3, 3]
            }
        ]
    }
});

方法二：使用 tooltip 和 label

tooltip 是鼠标悬停时显示的信息框，label 是数据标签。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {value: 820, label: {show: true, position: 'top', content: '标记A'}},
            {value: 932, label: {show: true, position: 'top', content: '标记B'}},
            {value: 901, label: {show: true, position: 'top', content: '标记C'}},
            {value: 934, label: {show: true, position: 'top', content: '标记D'}},
            {value: 1290, label: {show: true, position: 'top', content: '标记E'}},
            {value: 1330, label: {show: true, position: 'top', content: '标记F'}},
            {value: 1320, label: {show: true, position: 'top', content: '标记G'}}
        ],
        type: 'line',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var res = params[0].axisValueLabel + '<br/>';
                params.forEach(function (item) {
                    res += item.marker + item.seriesName + ': ' + item.value + '<br/>';
                });
                return res;
            }
        }
    }]
});

这两种方法可以根据需要选择使用，graphic 元素更加灵活，可以添加任意图形；而 tooltip 和 label 更适用于显示数据相关的注释和标记。