图表组件


图表插件基于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
        }                    
    }                
    }

results matching ""

    No results matching ""