echarts自定义散点图label by baidu

Question

参考本例使用echarts库创建散点图： Basic Scattergraph

我的代码如下：

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

在 series 内的 formatter 函数中，我试图将我的变量 '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同级去掉。 like 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]
            ],    
        }
    ]
};