Echarts:how 在行的上方和行尾设置 markLine 标签？

Question

在echarts-3.6.2中，当我为markLine设置position:'end'时，标签会显示在行尾

markLine: {
  
    data: [{
        symbol:"none",            
     
        name: 'GOAL',
        yAxis: 3.12 , 
        label:{
            normal:{
                show:true, 
                position:'end'
                
            }
        },      
        lineStyle: {
            normal: {
                color: '#5C57FF', 
                width: 2 
            }
        },
        
    }]
},

但是，我想把它显示在行尾的行上方？怎么做到的？

Answer 1

将位置值更改为 insideEndTop（参见 docs）：

markLine: {

  data: [{
    symbol: "none",

    name: 'GOAL',
    yAxis: 3.12,
    label: {
      normal: {
        show: true,
        position: 'insideEndTop'

      }
    },
    lineStyle: {
      normal: {
        color: '#5C57FF',
        width: 2
      }
    },

  }]
},

Answer 2

hello,do you have any ideas for not using position: 'insideEndTop', I could not upgrade the echarts plugin

没有 crutch/workaround 就帮不上忙了，因为它是非常旧的版本。您需要立即更新 Echarts，这是唯一正确的方法。或者您可以尝试使用 graphic 组件模拟 markLine，如下所示，但它是通往地狱的高速公路。

var myChart = echarts.init(document.getElementById('main'));
  var option = {
    color: ['rgba(92, 87, 255, 0.3)'],
    grid: {
      left: 50,
      bottom: 50,
    },
    graphic: [{
      type: 'group',
      id: 'markLine',
      bounding: 'raw',
      children: [{
        id: 'lineShape',
        $action: 'replace',
        type: 'line',
        invisible: true,
        shape: {
          x1: 50,
          y1: 300,
          x2: 120,
          y2: 300,
        },
        style: {
          stroke: '#5C57FF',
          lineWidth: 2,
        },
        zlevel: 10,
      }, {
        type: 'polygon',
        $action: 'replace',
        id: 'arrowShape',
        invisible: true,
        scale: [0.5, 0.3],
        position: [90, 292.5],
        shape: {
          points: [
            [16, 5],
            [16, 47],
            [38, 26]
          ]
        },
        style: {
          fill: '#5C57FF',
        }
      }, {
        type: 'text',
        $action: 'replace',
        id: 'labelShape',
        invisible: true,
        style: {
          text: 'GOAL: 3.12',
          x: -100,
          y: 290,
          fill: '#5C57FF',
          font: 'bolder 12px sans-serif',
        },
        zlevel: 10,
      }],
    }],
    xAxis: {
      data: ["1", "2", "3", "4", "5", "6"]
    },
    yAxis: {
      type: 'value',
      max: 50
    },
    series: [{
      name: 'Series',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
    }]
  };

  myChart.setOption(option);

  function renderMarkLine({ instance, yAxisValue, text, speed }){
    var currentStep = 0;

    var arrowShape = (val) => {
      return {
        stopCoord: 710, // 525
        opts: {
          invisible: false,
          id: 'arrowShape',
          position: [5 + val, yAxisValue - 7.5] // yAxisValue + 7.5
        }
      }
    };

    var lineShape = (val) => {
      return {
        stopCoord: 680, //540
        opts: {
          id: 'lineShape',
          invisible: false,
          shape: {
            x1: 50,
            y1: yAxisValue,  // +0
            x2: 50 + val,
            y2: yAxisValue
          }
        }
      }
    };

    var labelShape = (val) => {
      return {
        stopCoord: 660, // 460
        opts: {
          id: 'labelShape',
          invisible: false,
          style: {
            x: -10 + val,
            y: yAxisValue - 10, // 10
            fill: '#5C57FF',
            font: 'bolder 12px sans-serif'
          }
        }
      }
    };

    var interval = setInterval(function(){
      var graphicData = [];

      [arrowShape, lineShape, labelShape].forEach(el => {
        if (el(null).stopCoord > currentStep){
          graphicData.push(el(currentStep).opts);
        }
      });

      if (graphicData.length === 0) clearInterval(interval);
      instance.setOption({ graphic: graphicData });
      currentStep += 10;
    }, speed);

  };

  renderMarkLine({ instance: myChart, yAxisValue: 500, speed: 0 });

<script src="https://cdn.jsdelivr.net/npm/echarts@3.6.2/dist/echarts.min.js"></script>
<div id="main" style="width:800px;height:600px;"></div>

Echarts:how 在行的上方和行尾设置 markLine 标签？

Echarts:how to set markLine lable above the line and at the end of the line?

charts

echarts