echarts的地图点击事件
1、echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用。
参考链接:https://blog.csdn.net/qq_21386275/article/details/79039024
//地图展示
function map() {
//url,将需要的数据查询出来,放到固定的省份的位置即可。
var url = "xxxxxx.action";
var array = new Array();
$.ajax({
url : url,
dataType : "json",
async : false,
success : function(data){
var datas = data.result;
var length = datas.length;
//逻辑控制
......
}
});
//console.log(array); //将查询出的需要的省份的数据值存放到下面对应的地方
var option = {
tooltip : {
trigger : 'item'
},
dataRange : {
orient : 'horizontal',
min : ,
max : ,
text : [ '高', '低' ], // 文本,默认为数值文本
splitNumber :
},
series : [ {
name : '',
type : 'map',
mapType : 'china',
mapLocation : {
x : 'left'
},
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : '西藏',
value : array[],
selected : true,//此属性值是默认被选中
}, {
name : '青海',
value : array[],
}, {
name : '宁夏',
value : array[],
}, {
name : '海南',
value : array[],
}, {
name : '甘肃',
value : array[],
}, {
name : '贵州',
value : array[],
selected : true,
}, {
name : '新疆',
value : array[],
}, {
name : '云南',
value : array[],
}, {
name : '重庆',
value : array[],
selected : true,
}, {
name : '吉林',
value : array[],
}, {
name : '山西',
value : array[],
}, {
name : '天津',
value : array[],
}, {
name : '江西',
value : array[],
}, {
name : '广西',
value : array[],
}, {
name : '陕西',
value : array[],
}, {
name : '黑龙江',
value : array[],
}, {
name : '内蒙古',
value : array[],
}, {
name : '安徽',
value : array[],
selected : true,
}, {
name : '北京',
value : array[],
//selected : true,
}, {
name : '福建',
value : array[],
}, {
name : '上海',
value : array[],
selected : true,
}, {
name : '湖北',
value : array[],
}, {
name : '湖南',
value : array[],
}, {
name : '四川',
value : array[],
selected : true,
}, {
name : '辽宁',
value : array[],
}, {
name : '河北',
value : array[],
}, {
name : '河南',
value : array[],
}, {
name : '浙江',
value : array[],
selected : true,
}, {
name : '山东',
value : array[],
selected : true,
}, {
name : '江苏',
value : array[],
selected : true,
}, {
name : '广东',
value : array[],
selected : true,
}, {
name : '台湾',
value : array[],
} ]
} ],
animation : false
};
myChart.setOption(option, true); //点击事件,根据点击某个省份计算出这个省份的数据
myChart.on('click', function (params) {
console.log(params);
//逻辑控制
......
}); }
待续......
echarts的地图点击事件的更多相关文章
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- echarts 图的点击事件(含:点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图 但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
- ECharts柱状图添加点击事件
参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...
- Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
- echarts重写图例点击事件
echarts version: 3.1.2 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例. 当还剩一个图例被取消选中后,自动全选中所有图例. var triggerAction ...
- H5页面,百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...
- 给ECharts添加右键点击事件,实现右键功能菜单
由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...
- 解决echarts中的点击事件点击后走多次接口
使用echarts图点击图之后,走了很多次接口,后来发现添加一个off事件就可以解决了,具体如下:
随机推荐
- DAY10、函数的参数
一.实参:为形参传递值 调用函数时,实参可以由常量,变量,表达式三种的组合 1.位置实参:必须按照位置的顺序,从左到右为形参传递值 fn1(10, 20, 30) fn1(30, 20, 10) 2. ...
- SpringCloud学习笔记:熔断器Hystrix(5)
1. Hystrix简介 在分布式系统中,服务与服务之间相互依赖,一种不可避免的情况是某些服务会出现故障,导致依赖于它们的其他服务出现远程调度的线程阻塞. Hystrix提供熔断器功能,能够阻止分布式 ...
- spring cloud实战与思考(三) 微服务之间通过fiegn上传一组文件(下)
需求场景: 用户调用微服务1的接口上传一组图片和对应的描述信息.微服务1处理后,再将这组图片上传给微服务2进行处理.各个微服务能区分开不同的图片进行不同处理. 上一篇博客已经讨论了在微服务之间传递一组 ...
- Django------多表操作
一. 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的 ...
- Django分布式任务队列celery的实践
不使用数据库作为 Broker Broker 的选择大致有消息队列和数据库两种,这里建议尽量避免使用数据库作为 Broker,除非你的业务系统足够简单.在并发量很高的复杂系统中,大量 Workers ...
- SpringMVC中使用 MultipartFile 进行文件上传下载及删除
一:引入必要的包 <!--文件上传--> <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fil ...
- 解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题
https://blog.csdn.net/u012127798/article/details/34146143/ Oracle里的set零零碎碎的,这里整理归纳一下 SQL> set tim ...
- 2019南昌邀请赛网络预选赛 I. Max answer(单调栈+暴力??)
传送门 题意: 给你你一序列 a,共 n 个元素,求最大的F(l,r): F(l,r) = (a[l]+a[l+1]+.....+a[r])*min(l,r); ([l,r]的区间和*区间最小值,F( ...
- 存在多个 AJAX 任务
实现的效果: 这两个Ajax任务可同时实现,也可单独实现. 标准的函数: var xmlhttp; function loadXMLDoc(url,ufunc){ if(window.XMLHttpR ...
- 《从Paxos到ZooKeeper分布式一致性原理与实践》学习笔记
第一章 分布式架构 1.1 从集中式到分布式 集中式的特点: 部署结构简单(因为基于底层性能卓越的大型主机,不需考虑对服务多个节点的部署,也就不用考虑多个节点之间分布式协调问题) 分布式系统是一个硬件 ...