首页 前端知识 echarts 折线图设置基准线

echarts 折线图设置基准线

2024-03-10 11:03:00 前端知识 前端哥 574 399 我要收藏

 效果图:

实现: 

series: [
  {
    type: 'line',
    markLine: {
      symbol: 'none',
      data: [
        {
          yAxis: 30, // 自定义下限值
          // name: '最小值', // 基准线名称
          label: { // 不显示基准线名称
            show: false,
          },
          lineStyle: {
            type: 'dashed', // 基准线样式为虚线
            color: '#b17063',
          },
        },
        {
          yAxis: 50, // 上限值
          // name: '最大值',
          label: {
            show: false,
          },
          lineStyle: {
            type: 'dashed',
            color: '#b17063',
          },
        },
      ],
    },
  },
]

 注意:由于y轴坐标数值是根据series中的data动态生成的,当自定义的上限值超出data中的最大值很多时,代表上限的基准线不会显示。解决方法是给yAxis.max赋值(对比上限值和传入的data数据,取最大值),即手动设置y轴坐标的最大值,这样可确保基准线显示

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

jQuery之宽高

2024-04-05 09:04:19

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