echarts结合百度地图实现迁徙图效果

项目需求需要做这种迁徙效果，一开始是以为是扩散效果，结果需求有变更为聚拢的效果，直接上效果图和代码

 <!--这里的key需要自己去申请--><script src="https://webapi.amap.com/maps?v=1.4.8&key='自己百度地图key'"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=自己百度地图key"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script><script src="http://www.sqber.com/file/echarts/js/echarts-amap.min.js" charset="UTF-8"></script><script src="https://cdn.bootcss.com/echarts/4.7.0/extension/bmap.min.js"></script>

$(function () {$.ajax({type: 'POST',url: "数据接口",async: true,jsonp: 'jsoncallback',success: function (data) {var dataCenter=[{name:data.root_name,longitude:data.root_longitude, latitude:data.root_latitude,xinxi:data.root_name}]var myChart = echarts.init(document.getElementById('main'));myChart.setOption({tooltip: {trigger: 'item',formatter:function (params) {console.log(params);return `<div>公司名称：${params.data.name}</div><div>公司类型：${params.data.xinxi}</div>`}},bmap: {zoom: 12,center: [data.root_longitude, data.root_latitude],roam: true,},animation: false,series: [{type: 'scatter',coordinateSystem: 'bmap',data: [[120, 30, 1]]}]});//上面的部分是echarts的配置，需要注意的是bmap，这里的配置就是针对 百度地图 的配置了，而支持哪些配置//可以去百度地图的开发平台去查看var series = [{name: '',type: 'scatter',coordinateSystem: 'bmap',data: data.rows.map(item => {// console.log(item)return {name: item.name,value: [item.longitude, item.latitude],xinxi:item.type_name,}}),itemStyle: {color: '#a6c84c'},emphasis: {label: {show: true}}},{name: '',type: 'scatter',coordinateSystem: 'bmap',//这中心点五角星图片，相信可以去看看echarts中的symbol属性symbol: "path://M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z",data: dataCenter.map(item => {return {name: item.name,value: [data.root_longitude, data.root_latitude],xinxi:item.name,}}),itemStyle: {color: '#FF3300'},emphasis: {label: {show: true}}},{"name": "苏州 Top10","coordinateSystem": "bmap","type": "lines","zlevel": 1,smooth: true,symbol: ['none','path://M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z'],     // 系列级个性化拐点图形//这是设置成0.1是不让默认中心点显示，越小越好，让自定义的默认点生效symbolSize: 0.1,"effect": {"show": true,"period": 15,"trailLength": 0.5,"color": {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#3c8ce7' // 0% 处的颜色}, {offset: 1, color: '#00eaff' // 100% 处的颜色}],globalCoord: false // 缺省为 false},"symbolSize": 1.5},"lineStyle": {"normal": {"color": "#a6c84c","width": 0,"curveness": 0.2}},data: data.rows.map(item => {return {"fromName": item.name,"toName": "包头",xinxi:item.type_name,name: item.name,"coords": [[item.longitude, item.latitude],[data.root_longitude, data.root_latitude]],"value": 95}})},{"name": "上海 Top10","type": "effectScatter","coordinateSystem": "bmap","zlevel": 2,"rippleEffect": {"brushType": "stroke"},"itemStyle": {"normal": {"color": "blue"}},}];myChart.setOption({series: series});},})});

随便把聚拢的效果也贴上吧

$(function () {$.ajax({type: 'POST',url: "接口地址",async: true,jsonp: 'jsoncallback',success: function (data) {var dataCenter=[{name:data.root_name,longitude:data.root_longitude, latitude:data.root_latitude,xinxi:data.root_name}]var myChart = echarts.init(document.getElementById('main'));myChart.setOption({tooltip: {trigger: 'item',formatter:function (params) {console.log(params);return `<div>公司名称：${params.data.name}</div><div>公司类型：${params.data.xinxi}</div>`}},bmap: {zoom: 12,center: [data.root_longitude, data.root_latitude],roam: true,},animation: false,series: [{type: 'scatter',coordinateSystem: 'bmap',data: [[120, 30, 1]]}]});//上面的部分是echarts的配置，需要注意的是bmap，这里的配置就是针对 百度地图 的配置了，而支持哪些配置//可以去百度地图的开发平台去查看var series = [{name: '',type: 'scatter',coordinateSystem: 'bmap',data: data.rows.map(item => {// console.log(item)return {name: item.name,value: [item.longitude, item.latitude],xinxi:item.type_name,}}),itemStyle: {color: '#a6c84c'},emphasis: {label: {show: true}}},{name: '',type: 'scatter',coordinateSystem: 'bmap',"symbol": "path://M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z",data: dataCenter.map(item => {return {name: item.name,value: [data.root_longitude, data.root_latitude],xinxi:item.name,}}),itemStyle: {color: '#FF3300'},emphasis: {label: {show: true}}},{"name": "上海 Top10","coordinateSystem": "bmap","type": "lines","zlevel": 1,smooth: true,symbol: ['none','path://M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z'],     // 系列级个性化拐点图形symbolSize: 0.1,"effect": {"show": true,"period": 15,"trailLength": 0.5,"color": {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'red' // 100% 处的颜色}],globalCoord: false // 缺省为 false},"symbolSize": 1.5},"lineStyle": {"normal": {"color": "red","width": 0,"curveness": 0.2}},data: data.rows.map(item => {return {"fromName": item.name,"toName": "包头",xinxi:item.type_name,name: item.name,"coords": [[item.longitude, item.latitude],[data.root_longitude, data.root_latitude]],"value": 95}})},{"name": "上海 Top10","coordinateSystem": "bmap","type": "lines","zlevel": 2,// "symbol": [//     "none",//     "arrow"// ],"symbolSize": 10,"lineStyle": {"normal": {color: function(data) {var colorList = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "gray"},{offset: 1,color: "gray"}]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "gray"},{offset: 1,color: "gray"}]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [// {//     color: "blue"// }{offset: 0,color: "gray"},{offset: 1,color: "gray"}])];console.log(data.data.toName);if (data.data.toName === 2) {return colorList[0];} else if(data.data.toName==3) {return colorList[1];}else{return colorList[2];}},"width": 1,"opacity": 0.6,"curveness": 0.2}},"data": data.rows.map(item => {return {"fromName": item.name,"toName": item.type,"coords": [[item.longitude, item.latitude],[data.root_longitude, data.root_latitude]],"value": 95}})},{"name": "上海 Top10","type": "effectScatter","coordinateSystem": "bmap","zlevel": 2,"rippleEffect": {"brushType": "stroke"},"itemStyle": {"normal": {"color": "blue"}},}];myChart.setOption({series: series});},})});

代码可以直接复制使用，没有整理，比较散落，将就看看

echarts结合百度地图实现迁徙图效果相关推荐

ECharts+高德卫星地图-飞线图效果
ECharts+高德地图实现卫星地图-飞线图加载资源: https://webapi.amap.com/maps?v=1.4.15&key=申请Key(高德开放平台申请key) echart ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
Echarts与百度地图结合实现风场矢量图相关问题
这是部分js代码,代码里有一些标注,文章最后有相关问题,请耐心阅读,欢迎指导意见留言 function loadmap() { **这段是风场数据处理调用的方法,可以暂时忽略**// https:// ...
Echarts 开发静态数据模拟实现迁徙图步骤详解
文章目录一.前言二.先来看看百度迁徙图三.Echarts 实现迁徙图基本步骤第一步:引入Echarts.js及相关JS 第二步:为ECharts准备一个Dom 第三步:基于Dom初始化echa ...
vue3 使用echarts和百度地图
文章目录前言一.使用echarts 1. 安装echarts 2. echarts中使用百度地图 2.1 引入百度地图 2.2 全部代码 2.3 结果 3 echarts使用geomap进行地图展 ...
基于Echarts和百度地图的HTML插件
基于Echarts和百度地图的HTML插件代码实现了最基本的显示地图功能,另外实现了坐标标识,点击出现弹出框以及地点的经纬度等. 地图样式可以使用json配置源码以及需要使用的js文件(bmap. ...
echarts地图文字重叠解决方案_基于Echarts的百度地图叠加arcgis server的WMS图层服务...
前言前阵子利用echarts+百度地图做系统的门户首页,遇到一个要地图上叠加产业城影响范围示意图的需求.查阅文档之后,发现百度地图API确实提供了叠加自定义图层的方法,详情请看: 百度地图API的M ...
Winform Echarts 显示百度地图的用法（3）
1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时将WebBrow ...
echarts使用百度地图
前情提要获得百度地图授权的ak密钥引入echarts的百度地图准备好echarts百度地图需要的数据自定义百度地图的样式去掉百度地图的logo 一.获取百度地图的ak密钥首先得注册成为百度 ...

echarts结合百度地图实现迁徙图效果

echarts结合百度地图实现迁徙图效果

echarts结合百度地图实现迁徙图效果相关推荐

最新文章

热门文章