echarts（一）之地图连线动效

效果如下：

HTML如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>北京地图</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript" src="js/echarts.js" ></script><script type="text/javascript" src="js/map.js" ></script></head><style>html,body{margin: 0;padding: 0;width: 100%;height:100%;}.echarts-wrapper{width: 100%;height:100%;margin: auto;}.echarts-wrapper-china{position: absolute;bottom: 20px;right:20px;width: 220px;height:160px;border: 1px solid #09b8c0;}</style><body><div class='echarts-wrapper' id="beijing"></div><div class='echarts-wrapper-china' id="china"></div></body>
</html>

map.js如下：

$(function(){initBeijing();  initChina();
});
function initBeijing(){var chart = echarts.init(document.getElementById("beijing"));$.getJSON('json/beijing.json', function(data) {echarts.registerMap('beijing', data);chart.setOption({geo : {type : 'map',map : 'beijing',layoutCenter : [ '50%', '50%' ],layoutSize : '100%',label : {normal : {show : false,textStyle : {color : '#fff'}},emphasis : {show : false,textStyle : {color : '#fff'}}},itemStyle : {normal : {areaColor : 'rgba(24,65,91,0)',borderColor : '#23a8b3',borderWidth : 1,shadowColor : '#365661',shadowBlur : 10},emphasis : {areaColor : 'rgba(24,65,91,0)'},}},series: [{name: '北京行政图',type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],symbolSize: 10,lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(111, 113, 76, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(255, 255, 134, 1)'  // 100% 处的颜色}],global: false // 缺省为 false},width: 1,opacity: 0.6,curveness: -0.5},},data: [{coords: [[118.4100, 39.6410], [115.9700, 40.4500] //延庆]},{coords: [[118.4100, 39.6410], [116.6300, 40.3200]//怀柔]},{coords: [[118.4100, 39.6410], [116.8300, 40.3700]//密云县]},{coords: [[118.4100, 39.6410], [116.65, 40.1300]//顺义]},{coords: [[118.4100, 39.6410], [116.2800, 39.8500]//丰台区]},{coords: [[118.4100, 39.6410], [116.2300, 40.2200]//昌平区]},{coords: [[118.4100, 39.6410], [116.3000, 39.9500]//海淀]},{coords: [[118.4100, 39.6410], [116.4300, 39.9200]//朝阳]},{coords: [[118.4100, 39.6410], [116.4200, 39.9300]//东城]}]}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function(val) {var symbolSize;if (val[2] / 12 >= 6) {symbolSize = 6;} else if (val[2] / 12 <= 3) {symbolSize = 3;} else {symbolSize = val[2] / 12;}return symbolSize;},itemStyle: {normal: {color: '#a6c84c',}},data: [{name: '延庆',value: [115.9700, 40.4500] //延庆},{name: '怀柔',value: [116.6300, 40.3200]//怀柔}, {name: '密云县',value: [116.8300, 40.3700]//密云县},{name: '顺义',value: [116.65, 40.1300]//顺义},{name: '丰台区',value: [116.2800, 39.8500]//丰台区},{name: '昌平区',value: [116.2300, 40.2200]//昌平区},{name: '海淀',value: [116.3000, 39.9500]//海淀},{name: '朝阳',value: [116.4300, 39.9200]//朝阳},{name: '东城',value: [116.4200, 39.9300]//东城}]}]})});$(window).resize(function () {chart.resize();});
}function initChina(){var chart = echarts.init(document.getElementById("china"));$.getJSON('json/china.json', function(data) {echarts.registerMap('china', data);chart.setOption({geo: {type : 'map',map : 'china',zoom: 1.3,   //这里是关键，一定要放在 series中layoutCenter : [ '50%', '50%' ],layoutSize : '100%',label : {normal : {show : false,textStyle : {color : '#fff'}},emphasis : {show : false,textStyle : {color : '#fff'}}},itemStyle : {normal : {areaColor : 'rgba(24,65,91,0)',borderColor : '#408087',borderWidth : 1,},emphasis : {areaColor : 'rgba(24,65,91,0)'},}},series: [{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function(val) {var symbolSize;if (val[2] / 12 >= 6) {symbolSize = 6;} else if (val[2] / 12 <= 3) {symbolSize = 3;} else {symbolSize = val[2] / 12;}return symbolSize;},itemStyle: {normal: {color: '#a6c84c',}},data: [{name: '',value: [118.4100, 39.6410],}]}]})});$(window).resize(function () {chart.resize();});
}

echarts（一）之地图连线动效相关推荐

echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
D3.js地图打点射线动效（结合snap.js）
D3.js地图打点射线动效在项目中,通常使用打点和射线来实现区域的攻防.传达.运动等需求, 最终效果 width="100%" height="600" sr ...
ECharts+高德卫星地图-飞线图效果
ECharts+高德地图实现卫星地图-飞线图加载资源: https://webapi.amap.com/maps?v=1.4.15&key=申请Key(高德开放平台申请key) echart ...
vue3+echarts实现世界地图以及轨线（label使用fomatter+rich动态添加图片及背景色，以及label如何添加动态边框色）
背景最近项目开发,需要开发一个世界地图,并且实现经纬度对应的点对点轨线动效,效果如下: 问题如何在刚打开页面的时候就显示地点名称 label如何同时添加图片和背景色 label怎么动态修改字体颜色 ...
三看 SVG Web 动效
CSS3 动效玩腻了吗?没关系的,我们还有 SVG. Welikesmall 是一个互联网品牌宣传代理,这是我见过的最喜欢使用 SVG 做动效的网页设计团队.事实上,越来越多的网页动效达人选择在 SV ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
echarts实现地图飞线
echarts实现地图飞线 echarts画地图 echarts画地图由于地图需要省市区经纬度,需要geoJSON数据,我们使用aliyun官方的JSON数据,以中国地图为例(链接: link.). ...
Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果注意:重点关注data中的数据格式在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
基于Echarts数据可视化地图模块（地图下钻+地图迁徙线）
数据可视化大屏展示使用频率最高的应该就是地图了,无论是做功能性的还是做装饰用的,都是非常实用的,放上它项目才有了灵魂,显得非常的炫酷.这里分别对地图下钻,迁徙图,地图下钻+迁徙图的合并,记录介绍一下: ...

echarts（一）之地图连线动效

echarts（一）之地图连线动效相关推荐

最新文章

热门文章