Echarts折线图，显示线名

Question

So I want to diplay my Linechart name at the end of each line and I'm not sure if this is possible with echarts所以我想在每行的末尾显示我的 Linechart 名称，我不确定这是否可以用 echarts

EXAMPLE: On the image below there is a name at the end of each line示例：在下图中，每行末尾都有一个名称

Answer 1

This is possible using series-line.endLabel , as they do in the example you gave.这可以使用series-line.endLabel ，就像他们在您给出的示例中所做的那样。

To specifically display the name of the series, you'll have to use a formatter on endLabel:要专门显示系列的名称，您必须在 endLabel 上使用格式化程序：

endLabel: {
  show: true,
  formatter: function (params) {
    return params.seriesName;
  }
}

I also recommend you to increase grid.right so that the label won't be cropped.我还建议您增加grid.right以便不会裁剪 label。

Here is a simple example:这是一个简单的例子：

 var myChart = echarts.init(document.getElementById('main')); option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '15%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Email', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210], endLabel: { show: true, formatter: function (params) { return params.seriesName; } } }, { name: 'Union Ads', type: 'line', stack: 'Total', data: [220, 182, 191, 234, 290, 330, 310], endLabel: { show: true, formatter: function (params) { return params.seriesName; } } }, { name: 'Video Ads', type: 'line', stack: 'Total', data: [150, 232, 201, 154, 190, 330, 410], endLabel: { show: true, formatter: function (params) { return params.seriesName; } } }, { name: 'Direct', type: 'line', stack: 'Total', data: [320, 332, 301, 334, 390, 330, 320], endLabel: { show: true, formatter: function (params) { return params.seriesName; } } }, { name: 'Search Engine', type: 'line', stack: 'Total', data: [820, 932, 901, 934, 1290, 1330, 1320], endLabel: { show: true, formatter: function (params) { return params.seriesName; } } } ] }; myChart.setOption(option)

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

Echarts折线图，显示线名

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-31 08:08:36

Echarts折线图，显示线名

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-31 08:08:36

解决方案1
1 已采纳 2022-08-31 08:08:36