echarts地图api series_echarts+百度地图（二）

let BJData = [

[{name:'北京'}, {name:'上海',value:95}],

[{name:'北京'}, {name:'广州',value:90}],

[{name:'北京'}, {name:'大连',value:80}],

[{name:'北京'}, {name:'南宁',value:70}],

[{name:'北京'}, {name:'南昌',value:60}],

[{name:'北京'}, {name:'拉萨',value:50}],

[{name:'北京'}, {name:'长春',value:40}],

[{name:'北京'}, {name:'包头',value:30}],

[{name:'北京'}, {name:'重庆',value:20}],

[{name:'北京'}, {name:'常州',value:10}]

];

let 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';

let convertData = function (data) {

let res = [];

for (let i = 0; i < data.length; i++) {

let dataItem = data[i];

let fromCoord = geoCoordMap[dataItem[0].name];

let toCoord = geoCoordMap[dataItem[1].name];

if (fromCoord && toCoord) {

res.push({

fromName: dataItem[0].name,

toName: dataItem[1].name,

numValue : dataItem[1].value,

coords: [fromCoord, toCoord]

});

}

}

return res;

};

//设置Line和Point的颜色

let LineColor = ['#ff3333','orange','lime','aqua'];

let series = [];

[['北京', BJData]].forEach(function (item, i) {

series.push({

// 设置飞行线

name: item[1],

type: 'lines',

zlevel: 1,

coordinateSystem: 'bmap',

effect: {

show: true,

period: 6,

trailLength: 1.7,

color: '#fff',

shadowBlur: 0,

symbolSize: 0

},

lineStyle: {

normal: {

color: function(params){

let num = params.data.numValue;

if(num > 75){

return LineColor[0];

}else if(num > 50){

return LineColor[1];

}else if(num > 25){

return LineColor[2];

}else{

return LineColor[3];

}

},

width: 1,

curveness: 0.2

}

},

data: convertData(item[1])

},

// 设置轨迹线

{

name: item[0].name,

type: 'lines',

zlevel: 2,

coordinateSystem: 'bmap',

effect: {

show: true,

period: 6,

trailLength: 0.7,

symbol:planePath,

symbolSize: 12

},

lineStyle: {

normal: {

color: function(params){

console.log(params)

let num = params.data.numValue;

if(num > 75){

return LineColor[0];

}else if(num > 50){

return LineColor[1];

}else if(num > 25){

return LineColor[2];

}else{

return LineColor[3];

}

},

width: 0.2,

opacity: 0.4,

curveness: 0.2

}

},

data: convertData(item[1])

},

{

// 设置点

name: item[0],

type: 'effectScatter',

coordinateSystem: 'bmap',

zlevel: 2,

rippleEffect: {

brushType: 'stroke'

},

label: {

normal: {

show: true,

position: 'right',

formatter: function(params){

var res = params.value[2];

return res;

}

}

},

symbolSize: function (val) {

return val[2] / 10;

},

itemStyle: {

normal: {

color: function(params){

let num = params.value[2];

if(num > 75){

return LineColor[0];

}else if(num > 50){

return LineColor[1];

}else if(num > 25){

return LineColor[2];

}else{

return LineColor[3];

}

}

}

},

data: item[1].map(function (dataItem) {

return {

name: dataItem[1].name,

value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])

};

})

});

});

let MinigrateOption = {

title : {

text: '',

subtext: '',

left: 'center',

textStyle : {

color: '#fff'

}

},

tooltip : {

trigger: 'item',

formatter:function(params){

var res = params.name;

return res;

}

},

legend: {

orient: 'vertical',

top: 'bottom',

left: 'right',

data:['北京 Top10', '上海 Top10', '广州 Top10'],

textStyle: {

color: '#fff'

},

selectedMode: 'single'

},

// dataRange: {

// min : 0,

// max : 100,

// calculable : true,

// color: ['#ff3333', 'orange', 'yellow','lime','aqua'],

// textStyle:{

// color:'#fff'

// }

// },

bmap: {

center: [113.65,34.76],

zoom: 5.5,

roam: true,

mapStyle: {

styleJson: [

{

'featureType': 'land', //调整土地颜色

'elementType': 'geometry',

'stylers': {

'color': '#081734'

}

},

{

'featureType': 'building', //调整建筑物颜色

'elementType': 'geometry',

'stylers': {

'color': '#04406F'

}

},

{

'featureType': 'building', //调整建筑物标签是否可视

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'highway', //调整高速道路颜色

'elementType': 'geometry',

'stylers': {

'color': '#015B99'

}

},

{

'featureType': 'highway', //调整高速名字是否可视

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'arterial', //调整一些干道颜色

'elementType': 'geometry',

'stylers': {

'color':'#003051'

}

},

{

'featureType': 'arterial',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'green',

'elementType': 'geometry',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'water',

'elementType': 'geometry',

'stylers': {

'color': '#044161'

}

},

{

'featureType': 'subway', //调整地铁颜色

'elementType': 'geometry.stroke',

'stylers': {

'color': '#003051'

}

},

{

'featureType': 'subway',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'railway',

'elementType': 'geometry',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'railway',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'all', //调整所有的标签的边缘颜色

'elementType': 'labels.text.stroke',

'stylers': {

'color': '#313131'

}

},

{

'featureType': 'all', //调整所有标签的填充颜色

'elementType': 'labels.text.fill',

'stylers': {

'color': '#FFFFFF'

}

},

{

'featureType': 'manmade',

'elementType': 'geometry',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'manmade',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'local',

'elementType': 'geometry',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'local',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

},

{

'featureType': 'subway',

'elementType': 'geometry',

'stylers': {

'lightness': -65

}

},

{

'featureType': 'railway',

'elementType': 'all',

'stylers': {

'lightness': -40

}

},

{

'featureType': 'boundary',

'elementType': 'geometry',

'stylers': {

'color': '#8b8787',

'weight': '1',

'lightness': -29

}

}]

}

},

series: series

};

minigrateChart.setOption(MinigrateOption);