Customize label in scatter graph in echarts by baidu

Question

Referring this example to create scatter graph using echarts library: Basic Scattergraph

My code for this is as follows:

option ={
            xAxis : [
                        {
                            type : 'value',
                            scale:true
                        }
                    ],
            yAxis : [
                        {
                            type : 'value',
                            scale:true
                        }
                    ],
            series : [
                        {
                            symbolSize: 40,
                            itemStyle: {
                                        normal: {
                                                    color: 'lightblue',
                                                    borderWidth: 4,
                                                    label : {
                                                                show: true,
                                                                position: 'inside',
                                                                formatter: function(v)
                                                                {
                                                                    if (v==[161.2, 51.6])
                                                                        return 'a'
                                                                    else
                                                                        return v
                                                                }
                                                            }
                                                }
                                        },
                            type:'scatter',
                            data: [
                                    [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
                                    [170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
                                  ],    
                        }
                    ]
        };

In the formatter function inside series I am trying to match my variable 'v' with a coordinate point from data. But that condition is not satisfied. Where am I going wrong? I only see [object Object] in all the bubbles. Please help.

Answer 1

If you are using the Echarts2.x version, code is as follow:

option ={
    xAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    series : [
        {
            symbolSize: 40,
            itemStyle: {
                normal: {
                    color: 'lightblue',
                    borderWidth: 4,
                    label : {
                        show: true,
                        position: 'inside',
                        formatter: function(data){
                            var v = data.value;
                            if (v[0]==161.2 && v[1]==51.6)
                                return 'a'
                            else
                                return v
                        }
                    }
                }
            },
            type:'scatter',
            data: [
                [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
                [170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
            ],    
        }
    ]
};

the parameter of formatter function is an object which is a point object on the scatter, Its structure is as follow:

$vars:Array[3]
color:"lightblue"
componentSubType:"scatter"
componentType:"series"
data:Array[2]
dataIndex:0
dataType:undefined
name:""
seriesIndex:0
seriesName:"-"
seriesType:"scatter"
status:"normal"
value:Array[2]

So the parameter isn't the array you wanted. The itemStyle attribute is used to set the graphic style, The label attribute is used to set the text label on the graph, which can be used to explain some data information of the graph. Such as value, name, etc. In Echarts3.x in order to make the structure of entire configuration more flat and reasonable, label was taken out with itemStyle at the same level. like itemStyle have two states of normal and emphasis. if you are using Echarts3.x version, code is like as follow:

option ={
    xAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    series : [
        {
            symbolSize: 40,
            itemStyle: {
                normal: {
                    color: 'lightblue',
                    borderWidth: 4,
                }
            },
            label : {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: function(data){
                        var v = data.value;
                        if (v[0]==161.2 && v[1]==51.6)
                            return 'a'
                        else
                            return v
                    }
                }
            },
            type:'scatter',
            data: [
                [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
                [170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
            ],    
        }
    ]
};