echarts 折线图设置基准线

 效果图:

echarts 折线图设置基准线_第1张图片

实现: 

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

你可能感兴趣的:(前端,echarts,前端,javascript)