Apache echarts scatter:为每个点分配标签

Question

我正在构建一个包含6个点的电子图表散点图。我想手动为每个点分配一个标签，就像我对X轴和Y轴的标签一样。有办法做到这一点吗?我在Apache Echarts文档中搜索，但我没有找到任何有用的设置来为"数据"分配标签。值。

这是我的图表的源代码:

option = {
xAxis: {
data: ['Low', 'Med', 'High'],
name: "Value",
},
yAxis: {
min: '5',
name: "Score",
},
series: [
{
type: 'scatter',
symbolSize: 20,
data: [
[2,9.8],
[1,8.8],
[2,5.9],
[1,9.8],
[1,10.0],
[3,9.8],
[2,10.0],
[1,9.8],
[2,5.9],
[1,9.8]
],
label: {
show: true,
position: 'right',
color: "black",
fontSize: 16,
},
}
],
grid:{
show: true,
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 102, 102)'
},
{
offset: 1,
color: 'rgb(153, 255, 153)'
}])
},
};

Answer 1

您可以将标签指定为数据数组中的附加值:

data: [
[ 2, 9.8, "label1" ],
[ 1, 8.8, "label2" ],
...

然后在标签定义中使用formatter函数，选择数据数组的第三个元素作为标签:

label: {
...
formatter: function(d) {
return d.data[2];
}

Answer 2

我也找到了这个解决方案，和Chris一样有效:

series: [
{
type: 'scatter',
symbolSize: 15,
data: [
{value: [2,9.8] , name: 'value1'},
{value: [1,8.8] , name: 'value2'},
{value: [2,5.9] , name: 'value3'},
],
label: {
show: true,
position: 'right',
formatter: params => params.name,
color: "black",
fontSize: 16,
},