首页 前端知识 echarts之markLine(可以设置特定阈值线(警戒线))

echarts之markLine(可以设置特定阈值线(警戒线))

2024-02-09 20:02:39 前端知识 前端哥 897 410 我要收藏

echarts之markLine(可以设置特定阈值线(警戒线))

这个markLine在之前的自定义不等分y轴文章中说到了,这里又用到了,就顺便说下。


简单粗暴,用它可以设置自定义阈值线(警戒线),或者是点(将宽度设为0),然后区分数据是否超出,超出部分处理(这需要自己循环,或者用echarts的返回函数),虽然简单,但好用:
示例:
在这里插入图片描述

代码如下(示例):

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip:{
    show:true
  },
  series: [
    {
      name:'数据1',
      data: [150, 230, 224, 218, 135, 147, 260].map(item => {
      if (item > 200) {
        return {
          value: item,
          itemStyle: {
            color: '#F33'
          }
        }
      }
      return item
    }),
      type: 'bar',
    markLine: {
      symbol: ['none', 'none'], // 去掉箭头
      label: {
        show: false,
        position: 'start',
        formatter: '{b}'
      },
      data: [
        {
          name: '阈值',
          yAxis: 200
        }
      ],
      lineStyle: {
        color: '#f00'
      }
    } 
    }
  ]
};

自己笔记,仅供参考,互相探讨,共同进步。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1632.html
标签
ecmascript
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!