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

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

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

相关推荐
Mike_jia37 分钟前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao1 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo2 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽2 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679182 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖2 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮2 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_741412242 小时前
大文件上传与文件下载
前端