echarts 折线图设置基准线

最新推荐文章于 2024-04-08 14:05:40 发布

羡与

最新推荐文章于 2024-04-08 14:05:40 发布

阅读量4.2k

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/hfhwfw161226/article/details/131220785

版权

前端专栏收录该内容

32 篇文章

订阅专栏

文章介绍了在ECharts图表中使用line类型系列，并配置markLine来创建自定义的下限和上限基准线，基准线样式为虚线。当上限值超过data中的最大值时，需要手动设置yAxis.max以确保基准线显示。这涉及到对ECharts配置项的深入理解和数据动态生成的处理策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现：

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轴坐标的最大值，这样可确保基准线显示