Echarts 使用markLine时,标签重叠或文本重叠

情况如图:
在这里插入图片描述

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [120, 232, 301, 434, 590, 730, 820],
    type: "line"
  },{
    data: [620, 732, 501, 134, 220, 590, 920],
    type: "line"
  },{
    type: "line",
    markLine: {
      symbol: 'none',
      label: {
        position: 'end',
        formatter: '{b}:{c}(ug/m³)'
      },
      data: [
        {
          name: '名称a',
          yAxis: 400,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        },
        {
          name: '名称c',
          yAxis: 410,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        },
        {
          name: '名称b',
          yAxis: 420,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        }

      ]
    }
  }]
};

1, markLine: series.markLine.label. position
可以通过设置position的值’start’, ‘middle’, ‘end’, 改变标签位置
在这里插入图片描述

标线超过3条便不能这样解决。 markLine: series.markLine.label. distance, 这个属性能调整标签与线之间的间距里, 但是这有个坑:position的值’start’, ‘middle’, 'end’时, 标签不能进行上下位置的调整

position的值为’insideStartTop’, ‘insideStartBottom’, ‘insideMiddleTop’, ‘insideMiddleBottom’, ‘insideEndTop’, 'insideEndBottom’时, 可以进行上下位置的调整。

在这里插入图片描述

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [120, 232, 301, 434, 590, 730, 820],
    type: "line"
  },{
    data: [620, 732, 501, 134, 220, 590, 920],
    type: "line"
  },{
    type: "line",
    markLine: {
      symbol: 'none',
      label: {
        position: 'end',
        formatter: '{b}:{c}(ug/m³)'
      },
      data: [
        {
          name: '名称a',
          yAxis: 400,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            position: 'insideEndTop',
            distance: [-125, 20],
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        },
        {
          name: '名称c',
          yAxis: 410,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            position: 'end',
            distance: [0, 30],
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        },
        {
          name: '名称b',
          yAxis: 420,
          lineStyle: {
            color: 'red',
            type: 'dashed', // 线的类型
            width: 3
          },
          label: {
            position: 'insideEndBottom',
            distance: [-125, 20],
            color: 'red',
            formatter: '{b}:{c}(ug/m³)'
          }
        }

      ]
    }
  }]
};

2, markArea: series.markArea.label. position

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line"
  },{
    data: [320, 432, 101, 634, 1290, 830, 1120],
    type: "line"
  },{
    type: "line",
    markArea: {
     // silent: false,
      data: [
        [
          {
            yAxis: 400,
          },
          {
            yAxis: 400,
            name: '预警值',
            itemStyle: {
              borderColor: 'red',
              borderType: 'dashed',
              borderWidth: 3
            },
            label: {
              position: 'right',
              offset: [10, 20],
              color: 'red',
              formatter: '{b}:{c}(ug/m³)'
            },
            value: '400'
          }
        ],
        [
          {
            yAxis: 810,
          },
          {
            yAxis: 810,
            name: '预警值',
            itemStyle: {
              borderColor: 'red',
              borderType: 'solid',
              borderWidth: 3
            },
            label: {
              show: true,
              position: ['100%', '10'],
              color: 'red',
              formatter: '{b}:{c}(ug/m³)'
            },
            value: '800'
          }
        ]

      ]
    }
  }]
};

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值