echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map

代码:

var data = [{
name: '郑州',
value: 100 //扩散的大小
},
{
name: '北京',
value: 100
},
{
name: '香港',
value: 100
},
{
name: '上海',
value: 100
},
];
var geoCoordMap = {
'郑州': [113.649638, 34.75659],
'香港': [114.186133, 22.29343],
'北京': [116.395645, 39.92998],
'上海': [121.487884, 31.24910]
}; var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}; option = {
backgroundColor: '#404a59',
tooltip: {
trigger: 'item',
formatter: function(obj) {
return obj.name + ':' + obj.value[0] + ',' + obj.value[1];
},
textStyle: {
fontSize: 18
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
zlevel: 2,
rippleEffect: {
period: 2.5, //波纹秒数
brushType: 'fill', //stroke(涟漪)和fill(扩散),两种效果
scale: 20 //波纹范围
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'top',
show: true
}
},
itemStyle: {
normal: {
show: true,
color: "#0579FA", //字体和点颜色
label: {
textStyle: {
fontWeight: 'bold', //字体
fontSize: 18, //字体大小
color: "#023AFD"
}
},
}
},
}],
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
layoutCenter: ['50%', '50%'],
layoutSize: "130%",
itemStyle: {
normal: {
color: '#51FFFF',
borderColor: '#0285FF'
},
emphasis: {
color: '#004881'
}
}
}
};

echarts中国地图散点涟漪效果的更多相关文章

  1. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  2. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  3. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  4. 使用echarts简单制作中国地图,echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  5. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  6. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  7. 百度Echarts中国地图经纬度

    百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...

  8. vue中使用echarts,地图上的涟漪特效大小设置

    在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了

  9. echarts中国地图3D各个城市标点demo

    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta ...

随机推荐

  1. 着色器shaders

    着色器(shader)是运行在GPU上的小程序,为图形渲染管线某个特定部分而运行. 着色器也是一种非常独立的程序,它们之间不能相互通信,它们之间唯一沟通只有通过输入输出. GLSL是为图形计算量身定制 ...

  2. SIGCHLD信号

    SIGCHLD的产生条件 子进程终止时 子进程接收到SIGSTOP信号停止时 子进程处在停止态,接受到SIGCONT后唤醒时 也就是说:子进程的运行状态发生变化就会发送SIGCHILD信号:这里的意思 ...

  3. Object-c 调用unity的 UIViewController和UnitySendMessage

    .mm文件中实现 #import <UIKit/UIKit.h> extern UIViewController *UnityGetGLViewController(); extern & ...

  4. shell编程小技巧(命令篇)

    本文主要介绍shell编程中一些好用的命令或者一些常见命令但比较少用却又好用的参数,目的是希望可以提高编码效率. df命令 常用命令 df / df -k / df -m / df -H / df - ...

  5. ImportError: No module named etree.ElementTree问题解决方法

    学习python操作xml文档过程中碰到的ImportError: No module named etree.ElementTree问题,问题现象比较奇怪,做个记录. 操作环境 Python3.6+ ...

  6. ADO.NET基础知识

    ADO.NET定义 ADO是ActiveX Data Objects的缩写,ADO.NET是数据库应用程序和数据源之间沟通的桥梁,主要提供一个面向对象的数据访问架构,用来开发数据库应用程序,就是一组类 ...

  7. search() 方法解析

    search()方法支持正则表达式的String对象的方法. 好,我们直接来贴代码,看效果,从实践理解透析方法的知识点和实际运用. var str="Visit W3School!" ...

  8. 无法加载ISAPI 筛选器 当前配置只支持加载为 AMD64 处理器体系结构创建的映像

    无法加载ISAPI 筛选器 当前配置只支持加载为 AMD64 处理器体系结构创建的映像 2011-11-9 0:18:49来源:本站原创作者:清晨320我要评论(0) 今天服务器的伪静态死活加载不上去 ...

  9. web自动化测试中接口测试学习笔记

    一.web基础 web是实现:客户端浏览器端<—————>服务端  交互的应用: web通常包含两部分:web客户端.web服务端:web客户端技术包含html.javascript.aj ...

  10. Canvas 绘画

    一.Canvas 应用场景 1.游戏 2.图表 3.动画 4.codepen.io (HTML5 动效) 最早 二.Canvas 发展历史 1.最早在apple的safari  1.3中引入 2.ie ...