首先引入：worldZH.js，echarts.js
地图js下载地址
var myChart = echarts.init(document.getElementById(‘main’));
var worldGeoCoordMap = {
‘蒙特里’: [1.874729,33.541478 ],
‘荷兰奥特芬’: [20,52.735095 ],
‘深圳’: [111.4648, 23.2891],
“Tokyo”: [71.691706, 23.689487],
“Toronto”: [239.383184, 43.653226],
“Vilnius”: [115.279651, 64.687156],
“Australian”:[125,-20]
};
var worldDatas = [
[{
name: ‘蒙特里’,
value: 0.5
}], [{
name: “荷兰奥特芬”,
value: 0.5
}],
[{
name: ‘深圳’,
value: 0.5
}],
[{
name: ‘Tokyo’,
value: 0
}],[{
name: ‘Toronto’,
value: 0.5
}],
[{
name: ‘Vilnius’,
value: 1
}],
[{
name: ‘Australian’,
value: 0.5
}]
];
var convertData = function(data) {var res = [];for(var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = worldGeoCoordMap[dataItem[0].name];var toCoord = [111.4648, 23.2891];if(fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord,}]);}}return res;};var series = [];[['深圳前海法院', worldDatas]].forEach(function(item, i) {series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 10 //图标大小},lineStyle: {normal: {color:'red',width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: .3 //尾迹线条曲直度}},data: convertData(item[1])}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { //涟漪特效period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 3 //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: true,areaColor: 'red',position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function(params){//圆环显示文字return params.data.name;},fontSize: 14},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 4+ val[2] * 5; //圆环大小},itemStyle: {normal: {show: true,color: '#eb9d8e' // 字体颜色}},data: item[1].map(function(dataItem) {return {name: dataItem[0].name,value: worldGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])};}),},//被攻击点{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: true,position: 'right',//offset:[5, 0],color: 'green',formatter: '{b}',textStyle: {color: "red"}},emphasis: {show: true,color: "#da2109"}},symbol: 'pin',symbolSize: 25, // 球的大小data: [{name: item[0],value: worldGeoCoordMap[item[0]].concat([10])}]},{name: '域外法数量',type: 'map',geoIndex: 0,data: worldGeoCoordMap},{name: 'Prices and Earnings ',type: 'scatter',coordinateSystem: 'geo',symbolSize: 8,// data: makeMapData(rawData),activeOpacity: 0,label: {formatter: '{b}',position: 'right',show: false},symbolSize: 8,itemStyle: {borderColor: '#fff',color: '#577ceb'},emphasis: {label: {show: false}}});});var option = {title: {text: '收案总数:15524 结案总数:10305',subtext: '',// sublink: '/public/products/infoscope/datasets/pricesandearnings/',left: 'center',top: -3,itemGap: 0,textStyle: {color: '#fff',fontSize:20},z: 200},tooltip: {trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0)',borderColor: '#516a89',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[params.seriesIndex + 1];res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;return res;}},backgroundColor:"rgba(166, 200, 76, 0)",visualMap : [ {show : false,seriesIndex : 0,dimension : 0,//取第一维度,批次right:10,bottom:10,zlevel:10,calculable:true,min : 0,max : 10,inRange : {//由低到高color : ['#11eb11', '#006edd']},textStyle:{color:'#fff',fontSize:14}} ],geo: {map: 'world',roam: true,//不开启缩放和平移zoom: 1.2,//视角缩放比例label: {normal: {show: false,fontSize: '10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.7)'},emphasis: {areaColor: '#F3B329',//鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},tooltip: {trigger: 'item',formatter: function (params) {var value = (params.value + '').split('.');value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + '.' + value[1];return params.seriesName + '<br/>' + params.name + ' : ' + params.value;}},series: series};myChart.setOption(option);
