通过百度在电子图表中的散点图中自定义标签

Question

参考此示例使用电子图表库创建散点图：基本散点图

我的代码如下：

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属性用于设置图形上的文本标签，可用于解释图形的一些数据信息。如值、名称等，在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]
            ],    
        }
    ]
};