Echarts在线免费图表

 
            var uploadedDataURL = "/asset/get/s/data-1482313846656-r11tlRwEx.json";

function convertData(sourceData) {
    return [].concat.apply([], $.map(sourceData, function(test, index) {
        return {
            name: test.mypoint,
            value: [test.jingdu, test.weidu, test.num1, test.num2]
        };
    }));
}

var option = {
    bmap: {
        roam: true,
        mapStyle: {
            'styleJson': [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#031628'
                }
            }, {
                'featureType': 'land',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#000102'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.stroke',
                'stylers': {
                    'color': '#0b3d51'
                }
            }, {
                'featureType': 'local',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'geometry.stroke',
                'stylers': {
                    'color': '#08304b'
                }
            }, {
                'featureType': 'subway',
                'elementType': 'geometry',
                'stylers': {
                    'lightness': -70
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#857f7f'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.stroke',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#022338'
                }
            }, {
                'featureType': 'green',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#062032'
                }
            }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                    'color': '#465b6c'
                }
            }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                    'color': '#022338'
                }
            }, {
                'featureType': 'label',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }]
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        selectedMode: 'multiple',
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['热门出行站点', '热门换乘站点'],
        textStyle: {
            color: '#fff'
        }
    },
    
    series: [{
        name: '热门出行站点',
        type: 'scatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#a6c84c'
            }
        }
    }, {
        name: '热门换乘站点',
        type: 'scatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[3] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ffa022'
            }
        }
    }]
};

$.getJSON(uploadedDataURL, function(rawData) {
    var data = convertData(rawData);
    option.series[0].data = data;
    option.series[1].data = data;
    /*option.series[0].data = data;
    option.series[1].data = data.sort(function(a, b) {
        return b.value[2] - a.value[2];
    }).slice(0, 10);
    option.series[2].data = data;
    option.series[3].data = data.sort(function(a, b) {
        return b.value[3] - a.value[3];
    }).slice(0, 10);*/
    myChart.setOption(option);
    // console.log(option);
    //获取echart中使用的bmap实例
    var map = myChart.getModel().getComponent('bmap').getBMap();
    map.disableDoubleClickZoom();
    map.centerAndZoom("佛山", 13);

});