echarts制作西藏自治区大数据地图，带数据飞传效果

使用引入百度echarts插件，需要引入阿里云的地区json

效果图

 

 具体代码如下

// 地图代码
$(function () {

    if ($("#xizang_map").length <= 0) {
        return;
    }
var xizang_map = echarts.init(document.getElementById(\'xizang_map\'));
// 引入地图数据
var uploadedDataURL = "这里引入阿里云的地图json数据";

// 标记点
var geoCoordMap = {
    \'拉萨市\': [91.091762, 30.037072],
    \'日喀则市\': [86.477854, 29.498529],
    \'昌都市\': [97.035183, 30.783725],
    \'林芝市\': [95.239298, 29.198982],
    \'山南市\': [92.266609, 28.303935],
    \'那曲市\': [89.24948, 32.783399],
    \'阿里地区\': [81.604653, 33.043726]
};


var mapData = [
    { name: \'拉萨市\', value: 219 },
    { name: \'日喀则市\', value: 339 },
    { name: \'昌都市\', value: 312 },
    { name: \'林芝市\', value: 329 },
    { name: \'山南市\', value: 89 },
    { name: \'那曲市\', value: 189 },
    { name: \'阿里地区\', value: 109 }
]

// 输出json对象数组,value里包含坐标值和随机值
function convertData(data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name]
        res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
        })
    }
    return res
}

//  设置目标点, 配置线条指向
function convertToLineData(data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
        // 起点
        var fromCoord = geoCoordMap[data[i].name]
        //  终点,这里设置的省会或者地级市的核心区如（河南省郑州市）
        var toCoord = [91.091762, 30.037072]
        res.push([{
            coord: fromCoord,
            value: data[i].value
        },
        {
            coord: toCoord
        }
        ])
    }
    return res
}

// 解析地图数据包
$.getJSON(uploadedDataURL, function (geoJson) {
    // 注册地图,传入数据
    echarts.registerMap(\'echarts\', geoJson)

    optionMap = {
        timeline: {
            show: false
        },

        baseOption: {

           
            // 设置地图参数和样式
            geo: {
                show: true,
                map: \'echarts\',
                roam: false,//是否可拖动
                top: 130,//距离
                left:90,
                zoom: 1,//大小
                // 地图中心点, 可调节显示的偏移量(通常情况下这里是核心区)
                center: [91.091762, 30.037072],
                label: {
                    // 地图名称直接显示  名称颜色
                    normal: {
                        show: false,
                        textStyle: {
                            color: \'#fff\'
                        }
                    },
                    // 鼠标经过地图显示地区名称
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: \'#fff\',
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        borderColor: \'#0c0d26\',
                        borderWidth: 1,
                        areaColor: \'#8755f9\',
                        shadowColor: \'#130122\',
                        //shadowOffsetX: -2,
                        //shadowOffsetY: 2,
                        shadowBlur: 0,

                    },
                    emphasis: {
                        // 鼠标悬浮高亮
                        areaColor: \'#cf4089\',
                        borderWidth: 0
                    }
                }
            }
        },

        options: [{
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            visualMap: {
                
                show: true,
                min: 0,
                max: 560,
                //left: \'50px\',
                right: \'50\',
                bottom: \'90px\',
                realtime:true,
                text: [\'高\', \'低\'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                orient: "vertical",
                itemHeight:100,
                textStyle: {
                    color: [\'#96adea\'],
                }, 
                inRange: {
                    color: [\'#8755f9\', \'#3a5ceb\', \'#3d38c9\', \'#3d38c9\'], //飞跃线条
                    //color: [\'#8556fc\',\'#ff3368\' ]

                }
            }
         /*, dataRange_bak: {
        
        textStyle: {
                color: \'#fff\'
        },
        min:0, 
        max:500, 
        calculable: true,
        splitNumber:0,
                // text:[\'高\',\'低\'], 
        realtime:false,
        bottom: 60,
        right: 20,
        selectedMode:false,
        realtime:false,
        itemWidth:20,
        itemHeight:120,
        //color: [\'#3399fe\',\'#8556fc\', \'#3399fe\']
        //color: [\'#de3b72\',\'#8556fc\']//线条数据颜色//(优先级2)
    }
           */ ,
 
            tooltip: {
                trigger: \'item\',
                backgroundColor: \'rgba(208, 40, 106, 0.92)\',
                borderColor: \'#FFFFCC\',
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: \'z-index:100\',
                formatter: function (params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    var res = "";
                    var name = params.name;
                    var value = params.value;
                    var count = 0;
                    if (typeof (value) == "object" && value.length >= 3) {
                        count = value[2];//带经纬度的参数
                    } else {
                        count = params.value;
                    }
                
                    if (name != null&&name!="") {
                        res = "<span style=\'color:#fff;\'>" + name + "</span><br/>交易项目数量：" + count;
                    }
                    return res;
                }
            },

            series: [{
                // 坐标点参数和样式
                type: \'effectScatter\',
                coordinateSystem: \'geo\',
                data: convertData(mapData),
                symbolSize: function (val) {
                    return val[2] / 10
                },
                showEffectOn: \'render\',
                rippleEffect: {
                    brushType: \'stroke\'
                },
                label: {
                    normal: {
                        formatter: \'{b}\',
                        position: \'right\',
                        show: true
                    }
                },

                itemStyle: {
                    normal: {
                        color: \'#899ffa\',//颜色圆圈
                        shadowBlur: 10,
                        shadowColor: \'#899ffa\',
                        textStyle: {
                            color: \'#fff\'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: \'#fff\'
                        }
                    }
                }
            },
               {
                   type: \'map\',
                   map: \'xizang_map\',
                   geoIndex: 0,
                   aspectScale: 0.75, //长宽比
                   showLegendSymbol: true, // 存在legend时显示
                   label: {
                       normal: {
                           show: true
                       },
                       emphasis: {
                           show: true,
                           textStyle: {
                               color: \'#fff\'
                           }
                       }
                   },
                   roam: true,
                   //itemStyle: {
                   //    normal: {
                   //        areaColor: \'#98a9d8\',
                   //        borderColor: \'#FFFFFF\',
                   //    },
                   //    emphasis: {
                   //        areaColor: \'#98a9d8\'
                   //    }
                   //},
                   animation: true,
                   data: mapData
               },
            {
                // 线条参数和样式
                type: \'lines\',
                // 变化频率
                zlevel: 2,
                effect: {
                    show: true,
                    // 箭头指向速度，值越小速度越快
                    period: 4,
                    // 特效尾迹长度,取值0到1,值越大,尾迹越长
                    trailLength: 0.05,
                    symbol: \'arrow\',
                    // 图标大小
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: \'#899ffa\',//飞跃线条箭头颜色
                        // 尾迹线条宽度
                        width: 1,
                        // 尾迹线条透明度
                        opacity: 1,
                        // 尾迹线条曲直度
                        curveness: 0.3
                    }
                },
                data:  convertToLineData(mapData)
            }
            ]
        }]
    }

    xizang_map.setOption(optionMap)
});
});