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...

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

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

相关推荐
excel7 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着7 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友8 小时前
什么是API签名?
前端·后端·安全
会豪10 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子10 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶10 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子10 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233311 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin11 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js