如何自定义Echart系列标签文字？

Question

我需要显示自定义系列标签而不是数据数组值。这里我的系列数据数组是

data: [820, 932, 901, 934, 1290, 1330, 1320],

当我启用标签时：

label: {
    show: true,
    position: 'top',
    color: "black",
    fontSize:12,
},

它在我的折线图顶部显示数据数组值我需要显示自定义文本而不是此数据数组值
[text1,text2,text3...]

我的源代码：

option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    symbolSize: 12,
    label: {
        show: true,
        position: 'top',
        color: "black",
        fontSize:12,
    },
  }]
};

Answer 1

请使用标签对象提供的格式化程序属性。您可以 return 任何类型的字符串。请用echarts link学习更多：

label: {
    show: true,
    position: 'top',
    color: "black",
    fontSize: 12,
    formatter: function(d) {
      return d.name + d.data;
    }

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

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    label: {
      show: true,
      position: 'top',
      color: "black",
      fontSize: 12,
      formatter: function(d) {
        return d.name + ' ' + d.data;
      }
    },
  }]
};


myChart.setOption(option);

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>

如何自定义Echart系列标签文字？

How to customize Echart series label text?

javascript

jquery

echarts