echarts之markArea分区域显示不同颜色

一、需求

如下图,项目中需要这样的效果,在不同的时间区域显示不同颜色。

二、步骤拆分

1、先画折线图

如果暂时忽略高亮不看的话,这个echart很容易实现,X轴xAxis,y轴yAxis,series三部曲:

js 复制代码
var option = {
    xAxis: {
        type: 'category',
        data: xAxisData
        //网格样式
        splitLine: {
            show: true,
            lineStyle:{
                color: ['rgb(229, 233, 242)'],
                width: 1,
                type: 'solid'
            }
        },
        axisLabel:{
            rotate:20,
            interval:0
        }
    },
    yAxis: { 
        type: 'value',
         //网格样式
         splitLine: {
            show: true,
            lineStyle:{
                color: ['rgb(229, 233, 242)'],
                width: 1,
                type: 'solid'
            }
        }
    },
    series: [{
        name: '发布时间',
        data: data,
        type: 'line',

    }]
}

2、再加高亮

①markArea介绍

通过查阅官方文档有一个属性markArea图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

②markArea常用属性方法
  • markArea.slient //boolean 图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  • markArea.label //Object 标域文本配置。
  • markArea.itemStyle //Object 该标域的样式。
  • markArea.emphasis //Object 高亮的标域样式。
  • markArea.blur //Object 淡出的标域样式。淡出的规则跟随所在系列。
  • markArea.data //any

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'
  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
  4. 如果是笛卡尔坐标系的话,也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight 当多个属性同时存在时,优先级按上述的顺序。
③markArea使用范围

markArea通常配合其他的图表类型或者组合图表使用,在不同的图表类型中,markArea的效果也是不一样的,可以用于突出主要数据、标识异常数据或者比较不同数据之间的差异。

比如在折线图中使用markArea,可以用来标记某个时间段内的数据变化,让用户更直观地看到数据的趋势。

3、示例

下面我们可以看到markArea的使用方法和一些参数说明。

js 复制代码
series: [{
    name: '发布时间',
    data: data,
    type: 'line',
    markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
       data: [
              [
                {
                  name: '间歇',
                  xAxis: '12:00-14:00',
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                },
                {
                  xAxis: '14:00-16:00'
                }
              ],
              [
                {
                  name: '睡前',
                  xAxis: '18:00-20:00',
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 1)'
                  },
                },
                {
                  xAxis: '22:00-24:00'
                }
              ]
            ]
      }
}]

以上参考了官方文档:echarts.apache.org/zh/option.h...

前端菜鸟,谨把自己遇到的问题整理出来方便以后查阅,望路过的大佬指点一二~

后续遇到问题再继续补充。

相关推荐
jojo是只猫5 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序