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的地图点击事件的更多相关文章

  1. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  2. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  3. echarts 图的点击事件(含:点击重复触发的问题及其解决方法)

    今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图  但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...

  4. ECharts柱状图添加点击事件

    参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...

  5. Echarts柱状图的点击事件

    最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...

  6. echarts重写图例点击事件

    echarts version: 3.1.2 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例. 当还剩一个图例被取消选中后,自动全选中所有图例. var triggerAction ...

  7. H5页面,百度地图点击事件

    需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...

  8. 给ECharts添加右键点击事件,实现右键功能菜单

    由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...

  9. 解决echarts中的点击事件点击后走多次接口

    使用echarts图点击图之后,走了很多次接口,后来发现添加一个off事件就可以解决了,具体如下:

随机推荐

  1. 2019-04-03 搭建Mybatis环境

    1. 配置pom.xml依赖 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybat ...

  2. springdata 使用plql更新时候注意点 ?2 表示从方法中获取第二个形参的值 ?1表示从方法中获取第一个值

    1.query表示的是查询 需要在操作update的方法上再次添加一个注解modifying 2.plql不是springdatajpa自带的sql功能自带的功能 自动有事务: 所以需要我们手动在se ...

  3. [模板] 匈牙利算法&&二分图最小字典序匹配

    匈牙利算法 简介 匈牙利算法是一种求二分图最大匹配的算法. 时间复杂度: 邻接表/前向星: \(O(n * m)\), 邻接矩阵: \(O(n^3)\). 空间复杂度: 邻接表/前向星: \(O(n ...

  4. this指针详解

    什么是this this是一个const指针,存的是当前对象的地址,指向当前对象,通过this指针可以访问类中的所有成员. 当前对象是指正在使用的对象,比如a.print(),a就是当前对象. 关于t ...

  5. [HNOI2016]矿区

    [HNOI2016]矿区 平面图转对偶图 方法: 1.分成正反两个单向边,每个边属于一个面 2.每个点按照极角序sort出边 3.枚举每一个边,这个边的nxt就是反边的前一个(这样找到的是面的边逆时针 ...

  6. MapReduce-序列化(Writable)

    Hadoop 序列化特点 Java 的序列化是一个重量级序列化框架(Serializable),一个对象被序列化后,会附带很多额外的信息(各种校验信息,Header,继承体系等),不便于在网络中高效传 ...

  7. 第二节:深入剖析Thread的五大方法、数据槽、内存栅栏。

    一. Thread及其五大方法 Thread是.Net最早的多线程处理方式,它出现在.Net1.0时代,虽然现在已逐渐被微软所抛弃,微软强烈推荐使用Task(后面章节介绍),但从多线程完整性的角度上来 ...

  8. java8 按对象属性值分组

    Map<String, List<User>> userMap = list.stream().collect(Collectors.groupingBy(User::getG ...

  9. 使用tablayout和recyclerview的时候,报重复添加Fragment错误

    原因: 在添加的子Fragment报错了, 出现了空值错误, 此时报出来错误是前一个Fragment重复添加

  10. 🍓rem单位在Chrome中字体大小异常 🍓

    这是一个很少出现,而一旦出现就让人头疼难当的bug.....网上资料比较少. 解决:https://oss.so/article/87 即为html标签设置-webkit-text-size-adju ...