Echarts:如何在行上方和行尾设置markLine标签?

问题描述

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

In echarts-3.6.2, when I set position:'end' for markLine, the lable will display at the end of line

markLine: {

    data: [{
        symbol:"none",

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

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

    }]
},

但是，我想将其放置在行尾的行上方吗?怎么做?

However, I want to dislay it above the line at the end of the line? How to make it?

推荐答案

如果没有拐杖/变通办法，我将无济于事，因为它是非常旧的版本.您需要立即更新Echarts，这是正确的方法.或者，您可以尝试使用 graphic 组件模拟markLine，如下所示，但这是通往地狱的通道.

I can't help without a crutch/workaround because it's very old version. You need to update the Echarts immediately, it's only right way. Or you can try to simulate markLine with the graphic component, something like below but it's highway to hell.

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/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width:800px;height:600px;"></div>

这篇关于Echarts:如何在行上方和行尾设置markLine标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！