安徽省飛機路線圖（echarts+map）

網址：https://gallery.echartsjs.com/editor.html?c=xfZ7Taz9LH&v=2

var uploadedDataURL = "/asset/get/s/data-1519279347346-BkslpCjwf.json";

/**
此版本通過設置geoindex && seriesIndex: [1] 屬性來實現geo和map共存，
來達到hover散點和區域顯示tooltip的效果

默認情況下，map series 會自己生成內部專用的 geo 組件。
但是也可以用這個 geoIndex 指定一個 geo 組件。
這樣的話，map 和 其他 series（例如散點圖）就可以共享一個 geo 組件了。
並且，geo 組件的顏色也可以被這個 map series 控制，從而用 visualMap 來更改。
當設定了 geoIndex 後，series-map.map 屬性，
以及 series-map.itemStyle 等樣式配置不再起作用，而是採用 geo 中的相應屬性。

http://echarts.baidu.com/option.html#series-map.geoIndex

並且加了pin氣泡圖標以示數值大小
*/
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('jiangxi', geoJson);
    myChart.hideLoading();
    var geoCoordMap = {
        '省委': [117.37, 31.786],
        '合肥市': [117.37, 31.386],
        '六安市': [116.27, 31.786],
        '滁州市': [118.07, 32.486],
        '蚌埠市': [117.27, 33.086],
        '淮南市': [116.67, 32.786],
        '宿州市': [117.77, 33.486],
        '淮北市': [116.67, 33.686],
        '亳州市': [116.27, 33.386],
        '阜陽市': [115.57, 32.986],
        '安慶市': [116.47, 30.486],
        '池州市': [117.47, 30.386],
        '黃山市': [118.17, 29.886],
        '宣城市': [119.27, 30.916],
        '蕪湖市': [118.17, 31.186],
        '馬鞍山市': [118.47, 31.616],
        '銅陵市': [117.87, 30.956],
    };
    var moveLine = {
        'normal': [{
                "fromName": "省委",
                "toName": "合肥市",
                'coords': [
                    [117.37, 31.786],
                    [117.37, 31.386],
                ]
            },
            {
                "fromName": "省委",
                "toName": "六安市",
                'coords': [
                    [117.37, 31.786],
                    [116.27, 31.786],
                ]
            },
            {
                "fromName": "省委",
                "toName": "滁州市",
                'coords': [
                    [117.37, 31.786],
                    [118.07, 32.486],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "蚌埠市",
                'coords': [
                    [117.37, 31.786],
                    [117.27, 33.086],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "淮南市",
                'coords': [
                    [117.37, 31.786],
                    [116.67, 32.786],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "宿州市",
                'coords': [
                    [117.37, 31.786],
                    [117.77, 33.486],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "淮北市",
                'coords': [
                    [117.37, 31.786],
                    [116.67, 33.686],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "亳州市",
                'coords': [
                    [117.37, 31.786],
                    [116.27, 33.386],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "阜陽市",
                'coords': [
                    [117.37, 31.786],
                    [115.57, 32.986],
                    [117.37, 31.786]
                ]
            },

            {
                "fromName": "省委",
                "toName": "池州市",
                'coords': [
                    [117.37, 31.786],
                    [117.47, 30.386],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "黃山市",
                'coords': [
                    [117.37, 31.786],
                    [118.17, 29.886],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "宣城市",
                'coords': [
                    [117.37, 31.786],
                    [119.27, 30.916],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "蕪湖市",
                'coords': [
                    [117.37, 31.786],
                    [118.17, 31.186],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "安慶市",
                'coords': [
                    [117.37, 31.786],
                    [116.47, 30.486],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "馬鞍山市",
                'coords': [
                    [117.37, 31.786],
                    [118.47, 31.616],
                    [117.37, 31.786]
                ]
            },
            {
                "fromName": "省委",
                "toName": "銅陵市",
                'coords': [
                    [117.37, 31.786],
                    [117.87, 30.956],
                    [117.37, 31.786]
                ]
            },
        ],
    };
    var data = [{
            name: '省委',
            value: 190
        },
        {
            name: '合肥市',
            value: 190
        },
        {
            name: '六安市',
            value: 190
        },
        {
            name: '滁州市',
            value: 190
        },
        {
            name: '蚌埠市',
            value: 190
        },
        {
            name: '淮南市',
            value: 90
        },
        {
            name: '宿州市',
            value: 120
        },
        {
            name: '淮北市',
            value: 120
        },
        {
            name: '亳州市',
            value: 120
        },
        {
            name: '阜陽市',
            value: 120
        },
        {
            name: '安慶市',
            value: 190
        },
        {
            name: '池州市',
            value: 190
        },
        {
            name: '黃山市',
            value: 190
        },
        {
            name: '宣城市',
            value: 190
        },
        {
            name: '蕪湖市',
            value: 190
        },
        {
            name: '馬鞍山市',
            value: 190
        },
        {
            name: '銅陵市',
            value: 90
        },
    ];
    var max = 480,
        min = 9; // todo 
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    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;
    };

    var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

    option = {
        backgroundColor: '#091c3d',
        title: {
            top: 20,
            text: '',
            subtext: '',
            x: 'center',
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                console.log(params);
                if (params.seriesType == "effectScatter") {
                    return params.data.name + ":" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return params.data.fromName + "->" + params.data.toName; //+ ":" + params.data.value;
                } else {
                    return params.name;
                }
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默認爲數值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'] // 藍黑
                // color: ['#ffc0cb', '#800080'] // 紅紫
                // color: ['#3C3B3F', '#605C3C'] // 黑綠
                //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                //color: ['#23074d', '#cc5333'] // 紫紅
                // color: ['#00467F', '#A5CC82'] // 藍綠
                // color: ['#1488CC', '#2B32B2'] // 淺藍
                // color: ['#00467F', '#A5CC82'] // 藍綠
                // color: ['#00467F', '#A5CC82'] // 藍綠
                // color: ['#00467F', '#A5CC82'] // 藍綠
                // color: ['#00467F', '#A5CC82'] // 藍綠

            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //             dataView: {readOnly: false},
        //             restore: {},
        //             saveAsImage: {}
        //             }
        // },
        geo: {
            show: true,
            map: 'jiangxi',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: 'transparent',
                    borderColor: '#3fdaff',
                    borderWidth: 2,
                    shadowColor: 'rgba(63, 218, 255, 0.5)',
                    shadowBlur: 30
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series: [{
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F4E925'
                    }
                }
            },
            {
                type: 'map',
                map: 'anhui',
                geoIndex: 0,
                aspectScale: 0.75, //長寬比
                showLegendSymbol: false, // 存在legend時顯示
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#FFFFFF',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function(a, b) {
                    return b.value - a.value;
                }).slice(0, 5)),
                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: '#05C3F9'
                    }
                },
                zlevel: 1
            },
            {
                name: '線路',
                type: 'lines',
                coordinateSystem: 'geo',
                zlevel: 2,
                large: true,
                effect: {
                    show: true,
                    constantSpeed: 30,
                    symbol: planePath, //ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    symbolSize: 15,
                    trailLength: 0,
                },

                lineStyle: {
                    normal: {
                        color: '#0fff17',
                        /*
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#58B3CC'
                            }, {
                                offset: 1, color: '#F58158'
                            }], false),*/
                        width: 2,
                        opacity: 1.0,
                        curveness: 0.15
                    }
                },
                data: moveLine.normal
            },


        ]
    };
    myChart.setOption(option);
});