echarts 折线图设置标记线自定义值

锅里游的鱼吖

已于 2023-11-10 09:22:54 修改

阅读量1k

点赞数

文章标签： echarts 前端 javascript

于 2023-11-09 09:19:54 首次发布

本文链接：https://blog.csdn.net/qq_36702286/article/details/134303294

版权

基准线配置在markLine上

 markLine: {
        data: [                  
          {
            yAxis: 11, // 自定义值
            label: { // 显示基准线名称
              show: true,
            },
            lineStyle: {
              type: 'dashed', // 基准线样式为虚线
              color: '#b17063',
            },
          }
        ]
      }

完整的

option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markLine: {
        data: [                  
          {
            yAxis: 11, // 自定义值
            label: { // 不显示基准线名称
              show: true,
            },
            lineStyle: {
              type: 'dashed', // 基准线样式为虚线
              color: '#b17063',
            },
          }
        ]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0]
    }
  ]
};