I am implementing a scatterplot using echarts library by baidu. I am referring to this example. I have made modifications in its properties according to my requirement. I have increased the bubble size by mentioning a symbol size in 'series' like this:
series : [
{
symbolSize : 20,
type :'scatter',
data : [ some coordinate values ],
.
. //rest of the properties
.
},
]
I have done this to include customized labels inside the bubbles. For this, I have modified the 'itemStyle' in 'series' as follows:
itemStyle: {
normal: {
color:'blue',
label:{
textStyle:{
fontWeight:'bold',
fontSize:15
},
show:true,
position: 'inside',
formatter: function(value)
{
if (value=='[10][20]')
return 'some label'
else
return 'NA'
}
}
}
},
All the bubbles now have 'NA' written inside them. So, I realize I am not doing it correctly. I want to know what does the 'value' contain in the formatter function. Will I be able to check its equality with the coordinates in the data? Please help.
This is how the points look as of now:
PS: The value element in formatter function of label in series is always UNDEFINED
Found a way to resolve the above issue. The formatter function for label has the following parameters:
a (series name), b (data name), c (value array), d(null)
So, if for example, I need the names of the bubbles to be 'Node1', 'Node2', 'Node3' and so on, then I name my series as 'Node' and in the value array instead of just having xAxis and yAxis values, I add 3rd parameter as a sequence of numbers. This means data may appear as:
data: [[10, 80, 1], [20, 70, 2], [50, 70, 3] ..and so on],
Now, when I call the formatter function, I can have it as follows:
formatter: function(a,b,c)
{
return a+c[2]
}
Where a = Series name, b = Data name and c = Value array. We modify these 3 according to our need to customized the label inside the bubble. My output looks like this: