echarts 地图迁徙迁入迁出

修改serise data的调用即可将迁入改为迁出

<script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/china.js"></script>

// 基于准备好的dom，初始化echarts实例
const mapBoxEchart = echarts.init(document.getElementById('mapBox'));
const geoCoordMap = { //可以在地图上显示的城市的坐标信息 可改成各省的省会城市'安徽省铜陵': [117.81154, 30.945515],'长春': [125.8154, 44.2584],'长沙': [113.0823, 28.2568],'贵阳': [106.6992, 26.7682],'杨凌': [109.1162, 34.2004],'深圳': [114.5435, 22.5439],'济南': [117.1582, 36.8701],'海口': [110.3893, 19.8516],'沈阳': [123.1238, 42.1216],'武汉': [114.3896, 30.6628],'红安': [114.23, 31.1],'昆明': [102.9199, 25.4663],'杭州': [119.5313, 29.8773],'成都': [103.9526, 30.7617],'拉萨': [91.1865, 30.1465],'天津': [117.4219, 39.4189],'山西': [112.55476, 37.876429],'呼和浩特': [111.4124, 40.4901],'哈尔滨': [127.9688, 45.368],'北京': [116.4551, 40.2539],'南京': [118.8062, 31.9208],'南宁': [108.479, 23.1152],'南昌': [116.0046, 28.6633],'乌鲁木齐': [87.9236, 43.5883],'上海': [121.4648, 31.2891],'三亚': [109.5000, 18.2000]};const hhxxgdnMapData = [ // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，山西到各地区的线路[{ name: '山西' }, { name: '长春', value: 66 }],[{ name: '山西' }, { name: '长沙', value: 66 }],[{ name: '山西' }, { name: '贵阳', value: 66 }],[{ name: '山西' }, { name: '杨凌', value: 66 }],[{ name: '山西' }, { name: '深圳', value: 66 }],[{ name: '山西' }, { name: '济南', value: 66 }],[{ name: '山西' }, { name: '海口', value: 66 }],[{ name: '山西' }, { name: '沈阳', value: 66 }],[{ name: '山西' }, { name: '武汉', value: 66 }],[{ name: '山西' }, { name: '昆明', value: 66 }],[{ name: '山西' }, { name: '山西', value: 118 }],[{ name: '山西' }, { name: '杭州', value: 66 }],[{ name: '山西' }, { name: '成都', value: 66 }],[{ name: '山西' }, { name: '拉萨', value: 66 }],[{ name: '山西' }, { name: '天津', value: 66 }],[{ name: '山西' }, { name: '呼和浩特', value: 66 }],[{ name: '山西' }, { name: '哈尔滨', value: 66 }],[{ name: '山西' }, { name: '北京', value: 66 }],[{ name: '山西' }, { name: '南宁', value: 66 }],[{ name: '山西' }, { name: '南昌', value: 66 }],[{ name: '山西' }, { name: '乌鲁木齐', value: 66 }],[{ name: '山西' }, { name: '上海', value: 66 }]
];
const planePath = 'arrow'; // 箭头的svg
// push进去线路开始-结束地点-经纬度
var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[1].name];var toCoord = geoCoordMap[dataItem[0].name];if (fromCoord && toCoord) {res.push([{coord: fromCoord}, {coord: toCoord}]);}}return res;
};
var color = ['#fff', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
// 数据
var series = [];
// 遍历由山西到其他城市的线路
[['山西', hhxxgdnMapData]
].forEach(function (item, i) {// 配置series.push({// 系列名称，用于tooltip的显示name: item[0],type: 'lines',zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中// effect出发到目的地 的白色尾巴线条// 线特效的配置effect: {show: true,period: 6, // 特效动画的时间，单位为 strailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长color: '#46bee9', // 移动箭头颜色symbol: planePath,symbolSize: 16 // 特效标记的大小},// lineStyle出发到目的地 的线条颜色lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2 //幅度}},data: convertData(item[1]) //开始到结束数据}, {//出发地信息name: item[0],type: 'lines',zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 20},lineStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FFFFA8' // 出发}, {offset: 1,color: '#58B3CC ' // 结束 颜色}], false),width: 4,opacity: 0.4,curveness: 0.2}},data: convertData(item[1])}, {// 目的地信息name: item[0],type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: false,position: 'right',formatter: '{b}',fontSize: 18}},symbolSize: function (val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function (dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});
});
// 指定相关的配置项和数据
var mapBoxOption = {geo: {map: 'china',roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启aspectScale: 0.75,zoom: 1.20,label: {normal: {show: false,textStyle: {color: '#00a0c9'}},emphasis: { // 对应的鼠标悬浮效果show: false,textStyle: {color: "#00a0c9"}}},itemStyle: {normal: {areaColor: '#0083ce',borderColor: '#0066ba'},emphasis: {borderWidth: 0,borderColor: '#0066ba',areaColor: "#0494e1",shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: series
};
// 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(mapBoxOption);
// echart图表自适应
window.addEventListener("resize", function () {mapBoxEchart.resize();
});

echarts 地图迁徙迁入迁出相关推荐

echarts地图迁徙图--根据数据设置线的颜色
直接贴代码了 var geoCoordMap = { //可以在地图上显示的城市的坐标信息 '石家庄': [114.52,38.05], '长春': [125.8154, 44.2584], '长沙' ...
基于Echarts数据可视化地图模块（地图下钻+地图迁徙线）
数据可视化大屏展示使用频率最高的应该就是地图了,无论是做功能性的还是做装饰用的,都是非常实用的,放上它项目才有了灵魂,显得非常的炫酷.这里分别对地图下钻,迁徙图,地图下钻+迁徙图的合并,记录介绍一下: ...
百度地图迁徙大数据_百度地图大数据：五一高速拥堵不似预期，广深成热门迁出入地...
五一假期在即,你是否做好了"出行功课"?高速拥堵水平降低.公众出门不出城.公园成踏青赏景热门目的地--在全国疫情防控仍未松懈的时刻,2020年的五一或许注定与往年不同. 近日,百度 ...
百度地图迁徙大数据_百度地图大数据看十一：各地商圈出现“红色拥堵”，游乐场迎来“高光时刻”...
作为疫情防控常态化后的第一个黄金周,今年的国庆中秋长假令广大民众出游情绪高涨,旅游.探亲出行等客流持续走高,交通.旅游.餐饮等行业迎来全线复苏.百度地图迁徙大数据平台.节假日出行仪表盘等平台紧密跟踪假 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
ECharts地图使用
ECharts地图使用最近项目开发中用到了ECharts地图,感觉ECharts地图美观炫酷,所 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...

echarts 地图迁徙迁入迁出

echarts 地图迁徙迁入迁出相关推荐

最新文章

热门文章

echarts 地图迁徙 迁入迁出

echarts 地图迁徙 迁入迁出相关推荐

最新文章

热门文章

echarts 地图迁徙迁入迁出

echarts 地图迁徙迁入迁出相关推荐