如何在Echarts中添加注释和标记

在 ECharts 中，您可以使用 graphic 元素或者 markPoint、markLine 和 markArea 等功能来添加注释和标记。下面是一些示例：

示例 1：使用 graphic 元素添加注释

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',
        smooth: true
    }],
    graphic: {
        elements: [
            {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                    text: '这是一个注释',
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 14
                }
            }
        ]
    }
};

示例 2：使用 markPoint 添加数据标记

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',
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        }
    }]
};

示例 3：使用 markLine 添加辅助线

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',
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

示例 4：使用 markArea 添加区域标记

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',
        markArea: {
            data: [
                [{type: 'min'}, {type: 'max'}]
            ]
        }
    }]
};

您可以根据自己的需求选择合适的方法添加注释和标记。更多关于 ECharts 注释和标记的详细信息，请参考官方文档：

• graphic 元素：https://echarts.apache.org/zh/option.html#graphic
• markPoint：https://echarts.apache.org/zh/option.html#series-line.markPoint
• markLine：https://echarts.apache.org/zh/option.html#series-line.markLine
• markArea：https://echarts.apache.org/zh/option.html#series-line.markArea