echartsmarkarea详解

一、基本概述

echarts作为数据可视化领域中的顶尖级别的开源库，已经在行业内得到了广泛的应用。而其中的markArea作为一个比较基础但也很重要的功能，用于在图表上绘制区域标记，可以用于表示数据范围、标识重要事件等。在echarts的官方文档中，我们可以看到markArea的使用方法和一些参数说明。

option = {
    series: [{
        data: data,
        type: 'line',
        markArea: {
            silent: true,
            data: [[{
                xAxis: '2016-06-01'
            }, {
                xAxis: '2018-06-01'
            }]]
        }
    }]
}

二、区域的使用

markArea通常配合其他的图表类型或者组合图表使用，在不同的图表类型中，markArea的效果也是不一样的，可以用于突出主要数据、标识异常数据或者比较不同数据之间的差异。比如在折线图中使用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: [[{
                name: '周末',
                xAxis: 'Sat'
            }, {
                xAxis: 'Sun'
            }]]
        }
    }]
}

三、自定义样式

markArea作为一个基础功能，我们可以通过自定义样式来达到更好的效果，比如新增颜色、边框、提示信息等。在实际应用中，我们常常需要灵活定制区域内的元素样式，如标记点、标注线、提示框等。echarts提供了灵活的样式设置，可以大大提高图表界面的美观度和使用价值。

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: {
            silent: true,
            itemStyle: {
                color: 'rgba(255,255,255,0)',
                borderColor: 'rgba(255,255,255,0)',
                borderWidth: 0
            },
            label: {
                show: true,
                position: 'inside'
            },
            data: [[{
                name: '周末',
                xAxis: 'Sat'
            }, {
                xAxis: 'Sun'
            }]]
        }
    }]
}

四、多重区域

有时候，我们需要在一个图表中绘制多个不同的区域，比如在地图中绘制多个省份，或者在饼图中绘制多重数据。echarts中，我们可以使用markArea的数组来绘制多重区域，只需要在data中添加多组数据即可。

option = {
    series: [{
        type: 'bar',
        data: [142, 234, 245, 673, 214],
        markArea: {
            silent: true,
            data: [
                [{
                    name: '区域1',
                    xAxis: 0
                }, {
                    xAxis: 1
                }],
                [{
                    name: '区域2',
                    xAxis: 1
                }, {
                    xAxis: 2
                }],
                [{
                    name: '区域3',
                    xAxis: 2
                }, {
                    xAxis: 3
                }],
                [{
                    name: '区域4',
                    xAxis: 3
                }, {
                    xAxis: 4
                }]
            ]
        }
    }]
}

五、动态数据

除了上述的静态数据，我们还可以通过动态数据来改变markArea的显示效果，使得图表更具有可读性和实时性。常见的例子有通过数据的排名和变化来实现markArea的变化，或者通过特定的条件触发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: {
            silent: true,
            itemStyle: {
                color: '#fde8e8'
            },
            data: [
                [{
                    name: 'top3',
                    xAxis: 'Wed',
                    itemStyle: {
                        color: 'rgba(255,0,0,0.3)'
                    }
                }, {
                    xAxis: 'Fri'
                }],
                [{
                    name: 'top1',
                    xAxis: 'Thu',
                    itemStyle: {
                        color: 'rgba(255,0,0,0.3)'
                    }
                }, {
                    xAxis: 'Fri'
                }],
                [{
                    name: 'top2',
                    xAxis: 'Tue',
                    itemStyle: {
                        color: 'rgba(255,0,0,0.3)'
                    }
                }, {
                    xAxis: 'Wed'
                }]
            ]
        }
    }]
};