一、原理

引用个性化百度地图样式（搜一下就知道了）作为底板，然后通过坐标拾取器获取想要点的坐标，设定哪两个点相通，这东西挺好玩，大家可以试试

二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果

我的echarts个人主页

三、效果图

四、直接上代码，解释在注释里

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="echarts.js的路径"></script><script type="text/javascript" src="jquery-3.4.1.js的路径"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的key值"></script><script src="bmap.js的路径（GitHub上搜搜就有）"></script></head>
<body>
<style>.o_t{border: 1px solid red;width: 100%;height: 50px;line-height: 50px;text-align: center;color: red;font-size: 26px;margin: 4% 0}.o_m{width: 80%;margin: 3% auto;border: 1px solid red ;height: 500px}
</style><div class="o_m" id="o_a"></div></body><script>var myChart_o_a = echarts.init(document.getElementById('o_a'));
//固定点的位置（经纬度，通过百度地图坐标拾取器来的）
var geoCoordMap_o_a = {"1": [114.622534,33.641938],"2": [114.649555,33.642419],"3": [114.637194,33.6429],"4": [114.638632,33.61741],"5": [114.661628,33.618853],"6": [114.661628,33.637851],"7": [114.609311,33.612118],"8": [114.652142,33.622701],"9": [114.673989,33.610194],"10": [114.676289,33.656845],"11": [114.645531,33.656364],"12": [114.639207,33.609232]
};
//三个数据，相当于三个出发点/终点
var oneData_o_a = [//从1点开始到2点，小飞机轨迹[{name: "1"},{name: "2",value: 20}],[{name: "1"},{name: "7",value: 20}],[{name: "1"},{name: "11",value: 20}],[{name: "1"},{name: "4",value: 20}]
];
var twoData_o_a = [[{name: "5"},{name: "6",value: 20}],[{name: "5"},{name: "7",value: 20}],[{name: "10"},{name: "11",value: 20}],[{name: "5"},{name: "8",value: 20}]
];
var threeData_o_a = [[{name: "9"},{name: "10",value: 20}],[{name: "3"},{name: "1",value: 20}],[{name: "2"},{name: "11",value: 20}],[{name: "9"},{name: "12",value: 20}]
];//小飞机样式也可以换成图片路径引用，能方便点，参考我之前写的’echarts自定义柱状图柱体形状‘这篇文章
var planePath_o_a ="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";//转换数据,将serier列表中配置的样式转换为data
var convertData_o_a = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap_o_a[dataItem[1].name];var toCoord = geoCoordMap_o_a[dataItem[0].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[1].name,toName: dataItem[0].name,coords: [fromCoord, toCoord]});}}return res;
};//三个出发点/终点的颜色
var color_o_a = ["#a6c84c", "#ffa022", "#46bee9"];//系列列表。每个系列通过 type 决定自己的图表类型，这里相当于三个出发点/终点的三个配置，用下标表示（例如：name: item[0],）
var series_o_a = [];
[["1", oneData_o_a], ["5", twoData_o_a], ["9", threeData_o_a]].forEach(function(item,i
) {series_o_a.push({//第一个点name: item[0],//涟漪特效类型type: "effectScatter",//地理坐标系采用bmap里配置的百度地图coordinateSystem: "bmap",//用于 Canvas 分层（相当于z-index），z相比zlevel优先级更低，而且不会创建新的 Canvas,为了使点位于底图（bmap配置的百度地图）之上zlevel: 2,//涟漪特效相关配置rippleEffect: {//波纹的绘制方式可选 'stroke' 和 'fill'。 相当于丢石头那个涟漪效果，一个类似圆环，一个类似圆饼brushType: "stroke"},//配置线条样式label: {normal: {show: true,position: "right",//采用 rich 中定义样式。formatter: "{b}"}},symbolSize: function(val) {return val[2] / 4;},//配置何时显示特效。'render' 绘制完成后显示特效  'emphasis' 高亮（hover）的时候显示特效。showEffectOn: "render",itemStyle: {normal: {color: color_o_a[i]}},data: [{name: item[0],value: geoCoordMap_o_a[item[0]].concat([100])}]},{name: item[0] + " Top10",type: "lines",coordinateSystem: "bmap",zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: "#fff",symbolSize: 3},lineStyle: {normal: {color: color_o_a[i],width: 0,curveness: 0.2}},data: convertData_o_a(item[1])},{name: item[0] + " Top10",type: "lines",coordinateSystem: "bmap",zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: planePath_o_a,symbolSize: 15},lineStyle: {normal: {color: color_o_a[i],width: 1,opacity: 0.4,curveness: 0.2}},data: convertData_o_a(item[1])},{name: item[0] + " Top10",type: "effectScatter",coordinateSystem: "bmap",zlevel: 2,rippleEffect: {brushType: "stroke"},label: {normal: {show: true,position: "right",formatter: "{b}"}},symbolSize: function(val) {return val[2] / 4;},showEffectOn: "render",itemStyle: {normal: {color: color_o_a[i]}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: geoCoordMap_o_a[dataItem[1].name].concat([dataItem[1].value])};})});
});
var option_o_a = {bmap: {//中心点（经纬度）center: [114.659329,33.62703],//缩放比例zoom: 14,//是否允许拖拽roam: true,mapStyle: {//自己配置个性化百度地图的样式styleJson: [{featureType: "water",elementType: "all",stylers: {color: "#021019"}},{featureType: "highway",elementType: "geometry.fill",stylers: {color: "#000000"}},{featureType: "highway",elementType: "geometry.stroke",stylers: {color: "#147a92"}},{featureType: "arterial",elementType: "geometry.fill",stylers: {color: "#000000"}},{featureType: "arterial",elementType: "geometry.stroke",stylers: {color: "#0b3d51"}},{featureType: "local",elementType: "geometry",stylers: {color: "#000000"}},{featureType: "land",elementType: "all",stylers: {color: "#08304b"}},{featureType: "railway",elementType: "geometry.fill",stylers: {color: "#000000"}},{featureType: "railway",elementType: "geometry.stroke",stylers: {color: "#08304b"}},{featureType: "subway",elementType: "geometry",stylers: {lightness: -70}},{featureType: "building",elementType: "geometry.fill",stylers: {color: "#000000"}},{featureType: "all",elementType: "labels.text.fill",stylers: {color: "#857f7f"}},{featureType: "all",elementType: "labels.text.stroke",stylers: {color: "#000000"}},{featureType: "building",elementType: "geometry",stylers: {color: "#022338"}},{featureType: "green",elementType: "geometry",stylers: {color: "#062032"}},{featureType: "boundary",elementType: "all",stylers: {color: "#1e1c1c"}},{featureType: "manmade",elementType: "geometry",stylers: {color: "#022338"}},{featureType: "poi",elementType: "all",stylers: {visibility: "off"}},{featureType: "all",elementType: "labels.icon",stylers: {visibility: "off"}},{featureType: "all",elementType: "labels.text.fill",stylers: {color: "#2da0c6",visibility: "on"}},{featureType: "background",elementType: "all",stylers: {color: "#0e1054ff"}}]}},series: series_o_a
};myChart_o_a.setOption(option_o_a,true);</script>
</html>

echarts 基于个性化百度地图的迁徙图相关推荐

在echarts中使用百度地图，卫星地图
在echarts中使用百度地图,卫星地图  <script src="https://cdnjs.cloudflare.com/ajax/ ...
基于android的地图毕业设计,基于android百度地图应用系统_毕业设计.docx
基于android百度地图应用系统_毕业设计南京晓庄学院2015届本科毕业论文分类号: 学校代码:11460 学号南京晓庄学院本科生毕业设计基于Android平台和百度地图的应用系统 Appl ...
echarts加载百度地图离线部署
echarts加载百度地图离线部署功能描述: echarts中需要加载百度地图时,api文件和地图js文件都是在线的,如果离线不能使用,需要换种方式部署. 点击查看
Python爬取百度地图的瓦片图
Python爬取百度地图的瓦片图需求代码爬虫结果需求采用Python + Selenium + phantomJs,自动爬取百度地图的栅格图(瓦片图),支持自定义区域.级别.无文字地图. 去 ...
echarts+bmap（百度地图）的Demo
好开心!自己的小demo照亮了别人!所以我又来记录一下最近的一个需求! 捣鼓了一天,终于搞定了echarts结合百度地图,鉴于项目需求是基于html,非任何框架. 所以要下载资源js文件,用scrip ...
echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
1. 实现功能实现简单的自定义样式百度地图,仅显示(基础,可自己研究扩展) 效果: 2. 代码步骤第一步:创建基础结构,id="map" 的 div 做 echarts 容器 ...
百度地图瓦片 android,百度地图自定义瓦片图获取
nodejs代码 const request = require('request'); const fs = require('fs'); const bagpipe = require('bagp ...
百度地图自定义背景图瓦片图制作流程
百度地图瓦片图制作流程 1.下载BaiduMapTileCutter.exe 链接: https://pan.baidu.com/s/1uxgiz8j9keQd19qz2byT5Q 提取码: cwva ...
echarts移除百度地图logo方法
移除百度地图LOGO和版权信息在jsp头上加上如下代码即可: <style type="text/css">.anchorBL{display:none} </ ...
【百度地图】折线图平面图
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8&q ...

echarts 基于个性化百度地图的迁徙图

一、原理

二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果

三、效果图

四、直接上代码，解释在注释里

echarts 基于个性化百度地图的迁徙图相关推荐

最新文章

热门文章