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'
          }
        ]

      ]
    }
  }]
};