全网络直降总览echarts 地图配置项内容和展示

2017年6月

      var uploadedDataURL = "/asset/get/s/data-1495079828728-HkTci9qxZ.json";
$.get(uploadedDataURL, function (chinaJson) {
    echarts.registerMap('sc', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'sc'
        }]
    });
});

var data = [
    {name: "金府路加油站",value: 3}, 
    {name: "蜀西路加油站",value: 2}, 
    {name: "成都金牛区金泉加油站",value: 1},
    {name: "泸州龙马潭迎宾大道", value:0.8},
    ];

var geoCoordMap = {
    "金府路加油站": [104.0344441, 30.71088897],
    "蜀西路加油站": [103.966666666667, 30.7166666666667],
    "成都金牛区金泉加油站": [104.0041, 30.7166666666667],
    "泸州龙马潭迎宾大道":[105.444612,28.912767],
};



var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    backgroundColor: '#404a59',
    title: {
        text: '全网络直降总览',
        subtext: '2017年6月',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['reduce'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'sc',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
     series : [
        {
            name: 'reduce',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
]
};