图表组件
图表插件基于echarts3.x版本实现,所以图表属性相关的参数可以直接参考echarts
效果图
示例
var data = [{
latlng : [39.095962936305504, 91.23046875],
height: 100,
width: 150,
chartOption : {//chartOption 这部分属性可以参考echarts3.x的图表属性文档
tooltip : {
show: true
},
axis : {
axisLine : false
},
xAxis : [
{
type : 'category',
data : ['煤炭','钢铁','石油']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'产量',
type:'bar',
data:[2.0, 4.9, 7.0]
}
],
grid : {
borderColor : '#ffffff',
x : 20,
y : 15,
x2 : 15,
y2 : 30
}
}
},{
latlng : [27.059125784374068, 111.884765625],
height: 100,
width: 150,
chartOption : {
tooltip : {
show: true
},
axis : {
axisLine : false
},
xAxis : [
{
type : 'category',
data : ['煤炭','钢铁','石油']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'产量',
type:'bar',
data:[2.0, 4.9, 7.0]
}
],
grid : {
borderColor : '#ffffff',
x : 20,
y : 15,
x2 : 15,
y2 : 30
}
}
},{
latlng : [45.213003555993964, 123.662109375],
height: 100,
width: 150,
chartOption : {
tooltip : {
show: true
},
axis : {
axisLine : false
},
xAxis : [
{
type : 'category',
data : ['煤炭','钢铁','石油']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'产量',
type:'bar',
data:[2.0, 4.9, 7.0]
}
],
grid : {
borderColor : '#ffffff',
x : 20,
y : 15,
x2 : 15,
y2 : 30
}
}
}];
map.addLayer(W.charts(data, {
callback: {
click : function(marker){
alert(marker.mId);
}
}
}));
构造方法
构造方法 | 描述 |
---|---|
W.charts(data, options) | 构造方法 data: 为一个object 数组; options: 为构造属性; |
构造属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
defaultIconWidth | number | 240 | 图表默认宽度。 |
defaultIconHeight | number | 120 | 图表默认高度。 |
callback | object | { click: function(marker){ }} | 当图标被点击时的事件 |
数据格式
{
latlng : [39.095962936305504, 91.23046875], //必须
height: 100, //图表高度
width: 150, //图表宽度
chartOption : { // charts 属性可以参考echarts2.x 版本api
tooltip : {
show: true
},
axis : {
axisLine : false
},
xAxis : [
{
type : 'category',
data : ['煤炭','钢铁','石油']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'产量',
type:'bar',
data:[2.0, 4.9, 7.0]
}
],
grid : {
borderColor : '#ffffff',
x : 20,
y : 15,
x2 : 15,
y2 : 30
}
}
}