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

【问题标题】：How to customize Echart series label text?如何自定义 Echart 系列标签文字？
【发布时间】：2020-02-29 14:35:54
【问题描述】：

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

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,
    },
  }]
};

【问题讨论】：

你能为此创建一个 jsfiddle 吗？

标签： javascript jquery echarts

【解决方案1】：

请使用标签对象提供的格式化程序属性。您可以返回任何类型的字符串。更多学习请使用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>

【讨论】：