Whether can echart set height and width for label in markline, or add html tag and css attributes in formatter?

问题

I want to custom height, width for markline info. Now, I find label attribute which can be used to color and font attriubtes. But for height and width, it don't work in my test.

I also want to add some html tags and css attributes in my formatter function. But it don't work too.

Any one can tell me whether echart current support these options?(echat is version 4.9.0)

Thanks

My info label for markline:

                label: {
                        show:true,
                        align:'left',
                        position: 'end',
                        distance: [0,-90],
                        color: 'blue',
                        // backgroundColor: 'green',
                        backgroundColor: {
                            image: 'icon/no_disturb.png'
                        },

                        padding: 15,

                        **
                        width:600,
                        height:900,
                         **
                        // borderRadius: 5,
                        formatter: function(value) {
                            return `2012年-10月-21日 5点43分24秒`;
                         }
                    }

my formatter function:

     formatter: function (param) {  
        var text = '';
        text += '<div style="display:flex;flex-direction:row;">'+
                    '<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>'+
                    '<div style="display:flex;flex-direction:column;">'+
                        '<span>'333'</span>'+
                        '<span>'333'</span>'
                    '</div>'
                '</div>'
       return text;
    }

or

   formatter: function (param) {    
    return `<div style="display:flex;flex-direction:row;">
                <div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>
                <div style="display:flex;flex-direction:column;">
                    <span>123</span>
                    <span>456</span>
                </div>
            </div>`
    }

these two functions just return a string and cannot be shown as a html section. I don't know how to do.

Thanks.

br

回答1:

It's look like this. New label you can create with function CustomLabel:

label1 = new CustomLabel({
  chart: myChart,   // chart instance
  title: 'Label 1', // label title
  x: 'A2', y: 10    // coordinates
});

var myChart = echarts.init(document.getElementById('main'));

function CustomLabel(opts) {
  var {
    chart,
    title,
    x,
    y
  } = opts;
  var template = `<div class='label'>${name}</div>`;
  var canvas = document.body.querySelector('#main');
  var [chartX, chartY] = chart.convertToPixel({
    seriesIndex: 0
  }, [x, y]);
  var label = document.createElement('div');
  label.innerText = title;
  label.classList.add('label');
  label.style.left = chartX + 'px';
  label.style.top = chartY - 16 - 20 + 'px'; // 6 * 2 - paddings, 2 * 2 borders, 20 - height
  return canvas.insertAdjacentElement('afterbegin', label);
};

var option = {
  xAxis: {
    data: ["A1", "A2", "A3", "A4", "A5", "A6"],
    splitLine: {
      show: true
    },
    splitArea: {
      show: true
    },
  },
  tooltip: {},
  yAxis: {},
  grid: {
    top: 50,
    left: 50,
    bottom: 50,
    right: 50
  },
  backgroundColor: '#7BE2DB',
  animation: false,
  series: [{
    name: 'Series1',
    type: 'bar',
    data: [5, 20, 36, 10, 15, 20],
    color: '#00B2A1',
  }]
};

myChart.setOption(option);

label1 = new CustomLabel({
  chart: myChart,
  title: 'Label 1',
  x: 'A2',
  y: 10
});
label2 = new CustomLabel({
  chart: myChart,
  title: 'Label 2',
  x: 'A5',
  y: 20
});

#main {
  z-index: 10;
  position: relative;
}

.label {
  font-size: 18px;
  font-family: sans-serif;
  padding: 6px;
  height: 20px;
  z-index: 20;
  position: absolute;
  border: 2px solid #005C53;
  background: white;
}

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

回答2:

Alas, this is not a CSS, you cannot apply random style to label component. All possible styles described in official docs but we don't have many options. In particular, the label component will not be able to render HTML. I would help you, but it is not clear what you want to get: you described the process of gaining bad experience, but did not describe the desired result.

Just change width and height? It can be achieved with different ways. For example at yesterday due to the old version of the Echarts build, we had to completely draw and animate markLine with labels. Also can add series line, set fake datapoints and do it in such a way that line will be straight and similar to markLine how we did do for simulation confidence band.

回答3:

I add a picture about add label in xAxis to show accurate time label at my wanted position.

THanks.

来源：https://stackoverflow.com/questions/64764125/whether-can-echart-set-height-and-width-for-label-in-markline-or-add-html-tag-a