百度自定义echarts散点图中label

Question

参考这个例子使用echarts库创建散点图： Basic Sc​​attergraph

我的代码如下：

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

在formatter里面的函数中，series我试图将我的变量“v”与数据中的坐标点进行匹配。但是这个条件并不满足。我哪里错了？我只看到[object Object]所有的气泡。请帮忙。

Answer 1

如果您使用的是 Echarts2.x 版本，代码如下：

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

formatter函数的参数是一个对象，它是散布上的一个点对象，其结构如下：

$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]

所以参数不是你想要的数组。该itemStyle属性被用于设定图形样式，该label属性被用于设置在图上，它可以用来解释图的一些数据信息的文本标签。比如value、name等。在Echarts3.x中为了让整个配置的结构更加扁平合理，label被去掉了itemStyle。就像itemStyle有两个状态normal和emphasis。如果您使用的是 Echarts3.x 版本，代码如下：

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