echarts的图表区域（markArea）

最新推荐文章于 2025-04-22 16:19:43 发布

原创最新推荐文章于 2025-04-22 16:19:43 发布 · 6.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 ECharts 的 markArea 功能，通过一段代码示例展示如何在折线图中标记特定区域，实现 x 轴 14:00 到 16:00，y 轴 500 到 1000 的区域高亮显示，颜色设置为 rgba(190,76,89,0.5)。

echarts的图表区域（markArea）

- 代码片段

代码片段

series: [
              {
                name: '基线负荷',
                type: 'line',
                smooth: true,
                data: ['', '', '', '', 800, 800, 800, 800, 800, 800, 800, 800, 800],
                markArea: {
                  // label: {
                  //   color: 'red'
                  // },
                  data: [
                    [{
                      // name: '事件执行时段',
                      itemStyle: {
                        color: 'rgba(190,76,89,0.5)'
                      }, //颜色设置
                      xAxis: '14:00',
                      yAxis: '500'
                    }, {
                      xAxis: '16:00',
                      yAxis: '1000'
                    }]
                  ]
                }
              }]