由百度自定义echarts中散点图中的标签

时间:2016-07-25 09:20:51

标签: javascript javascript-objects scatter-plot baidu echarts

引用此示例以使用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]
                                  ],    
                        }
                    ]
        };

formatter内的series函数中,我试图将变量'v'与数据中的坐标点匹配。但这种情况并不令人满意。我哪里错了?我只在所有气泡中看到[object Object]。请帮忙。

1 个答案:

答案 0 :(得分:3)

如果您使用的是Echarts2.x版本,则代码如下:

/** commented lines **/

if (parentId == "someThing"){ someThing.appendChild(newElement); } if (parentId == "list"){ list.appendChild(newElement); } 函数的参数是散点图上的一个点对象,其结构如下:

parentId.appendChild(newElement)

所以参数不是你想要的数组。 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属性用于设置图形上的文本标签,可用于解释图形的某些数据信息。例如值,名称等。在Echarts3.x中,为了使整个配置的结构更加平坦和合理,$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有两种状态labelitemStyle。如果您使用的是Echarts3.x版本,代码如下:

itemStyle