安徽省飞机路线图(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);
});

 

你可能感兴趣的:(JavaScript)