话不多说,先上效果图
流入量图
流出量图
html代码片段
<div id="mapid" style="height:500px;width:500px;border:1px solid red;padding:5px;"></div>
所需js文件
<script src="../../js/common/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common/echarts.min.js"></script>
<script src="../../json/heilongjiang.js"></script>
后台接口返回的数据结构如下:
var data = [
{
startLat: "45.165732",
startLng: "126.139283",
tollStationName: "总1",
totalType: '12345',
list: [
{
fromToTollStationName: "总1-1",
startLat: "45.508675",
startLng: "126.513409",
trafficFlow: 123
},
{
fromToTollStationName: "总1-2",
startLat: "45.386216",
startLng: "126.410610",
trafficFlow: 12345
},
{
freight: 93353350,
fromToTollStationName: "总1-3)",
startLat: "46.165732",
startLng: "126.139283",
trafficFlow: 6933570
}
]
},
{
startLat: "47.993455",
startLng: "123.486567",
tollStationName: "总2",
totalType: '12345',
list:[
{
fromToTollStationName: "总2-1",
startLat: "45.508675",
startLng: "126.513409",
trafficFlow: 1234
},
{
fromToTollStationName: "总2-2",
startLat: "47.293455",
startLng: "123.486567",
trafficFlow: 11111
},
{
fromToTollStationName: "总2-3",
startLat: "45.177807",
startLng: "126.174966",
trafficFlow: 4321
}
]
},
{
startLat: "47.342922",
startLng: "124.086943",
tollStationName: "总3",
totalType: '12345',
list:[
{
fromToTollStationName: "总3-1",
startLat: "47.442922",
startLng: "124.086943",
trafficFlow: 2321
},
{
fromToTollStationName: "总3-2",
startLat: "47.292132",
startLng: "124.520282",
trafficFlow: 12345
},
{
fromToTollStationName: "总3-3",
startLat: "47.153795",
startLng: "124.878718",
trafficFlow: 54321
}
]
}
]
在画图之前,先整理一下数据,调用下面方法
function resetData (data,type) {
// data代表返回的数据
// type为1,流入;type为2 流出。
let result = {
totalType: '',//总的为流入还是流出
falseTotalType: '',//totalType为lr,则falseTotalType为lc;反之为lr
linesData: [],
effectScatterData: []
}
if(type == 1){
result.totalType = 'lr';
result.falseTotalType = 'lc'
}else{
result.totalType = 'lc';
result.falseTotalType = 'lr'
}
data.forEach((item,index)=>{
result.effectScatterData.push({
type: result.totalType,
i: index+1,
traffiFlow: item.tollStationCount,
name: item.tollStationName,
value: [item.startLng,item.startLat]
})
item.list.forEach((el,i)=>{
if(i<3){//由于只需要显示前三名的地点,所以取前三个就可以
if(type == 1){//判断是流入图还是流出图,1为流入
result.linesData.push({
fromName: el.fromToTollStationName,//开始地点name
toName: item.tollStationName,//目的地地点name
coords: [
[el.startLng,el.startLat],//开始地点的坐标
[item.startLng,item.startLat]//目的地的坐标
]
})
}else{//流出的话,就调换开始和结束的位置即可
result.linesData.push({
fromName: item.tollStationName,
toName: el.fromToTollStationName,
coords: [
[item.startLng,item.startLat],
[el.startLng,el.startLat]
]
})
}
result.effectScatterData.push({//这里就是把所有的要标注的位置给集合一下,不管是流入还是流出
type: result.falseTotalType,
i:i+1,
traffiFlow: el.trafficFlow,
name: el.fromToTollStationName,
value: [el.startLng,el.startLat]
})
}
})
})
return result
}
开始画图:
var mapEcharts ;//定义一下全局画图对象
function setgreenCarRoute(data,contype) {
let mapdata = resetData(data,contype);//画图之前调用该方法,整理后台返回数据,获得最终所需数据
if (mapEcharts != null && mapEcharts != "" && mapEcharts != undefined) {
mapEcharts .dispose(); //销毁
}
mapEcharts = echarts.init(document.getElementById('mapid'));
let option = {
tooltip: {
formatter: function (params) {
return params.data.name + params.data.traffiFlow//这里是鼠标移入每个标志点所显示的文字内容
}
},
geo: {
map: '黑龙江',
zoom: 1.1,
aspectScale: 0.75, //地图长度比
roam: false, // 鼠标缩放和 平移漫游
itemStyle: {
normal: {
areaColor: '#6ea5f7',
label: {
show: false
},
},
emphasis: {
show: true,
areaColor: '#1a7bbf',
label: {
show: false,
textStyle: {
color: 'red'
}
}
}
}
},
series: [
{
name: '',
type: 'lines',//在 地理坐标系上画线图
zlevel: 2,
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'arrow',
symbolSize: 10,
},
lineStyle: {
normal: {
color: '#feb43b',
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: mapdata.linesData
},
{
name: '',
type: 'effectScatter', //在地理坐标系画出所有的标志点
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stoke'
},
label: {
normal: {
show: true,
position: 'inside',
formatter: function(params){//由于项目需要,只需要显示所有总的数据的标志点文字,也就是图上的圈1,2,3
if(params.data.type === mapdata.totalType){
return params.data.i
}else{
return ''
}
}
}
},
symbol:'circle',
symbolSize:function(value,params) {
if(params.data.type === mapdata.totalType){//标志点的大小
return 20
}else{
return 10
}
},
itemStyle: {
normal: {
color: '#feb43b',
borderColor: "white",
}
},
data: mapdata.effectScatterData
}]
}
if (option && typeof option === "object") {
mapEcharts .setOption(option, true);
}
}
完成。