[echarts] 动态markArea 分区域显示不同颜色

533_

已于 2023-03-22 13:19:30 修改

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-03-22 13:19:21 首次发布

本文链接：https://blog.csdn.net/qq_14993591/article/details/129707578

echarts 专栏收录该内容

74 篇文章

订阅专栏

文章展示了如何在ECharts的line图表中使用动态markArea，通过遍历颜色列表并设置itemStyle，使markArea的每个区域显示不同的颜色，从而增强数据可视化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

markArea 是动态的

series : [{
    name:'请求量',
    type:'line',
    markArea : {
        data:markData
    }
}]

let markData = [];
const colorList = ['red', 'blue','pink'];
colorList.forEach((x, index) => {
    var data = [{
        xAxis: index,
        yAxis: 0,
        itemStyle: {
            color: x
        }
    }, {
        xAxis: index + 1
    }];
    markData.push(data);
})