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