echarts 地图实现轮播(二)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/javascript" src="js/jquery-2.0.0.js" ></script><script type="text/javascript" src="js/echarts.min.js" ></script></head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:500px;"></div></body><script type="text/javascript">$.get('jspro/wuzhong.json', function (gansuJson){echarts.registerMap('北京', gansuJson);var chart = echarts.init(document.getElementById('main'));option = {title: {x: 'left',y: 'top',text: '',subtext:""},tooltip: {trigger: 'item',//formatter: '{b}<br/>{c} (人)'//pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'formatter:function(value){return value.name+" "+value.value+"人";}},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},// visualMap: {
// min: 170259,
// max: 401178,
// text:['max','min'],
// realtime: false,
// calculable: true,
// inRange: {
// color: ['lightskyblue','yellow', 'orangered']
// }
// },series:[{name:'人口数量',type:'map',map:'北京',mapLocation:{y:100},itemSytle:{normal:{label:{show:true}},emphasis:{label:{show:false}}},label: {normal: {show: true},emphasis: {show: true},},data:[{name:'利通区',value:401178},{name:'青铜峡市',value:281953},{name:'盐池县',value:170259},{name:'红寺堡区',value:171110},{name:'同心县',value:371027}],}],};chart.setOption(option);//悬浮事件后获取name和value的值 chart.on("mouseover",function(params){var name=params.name;var value=params.value;console.info(name+"\n"+value);})var timer = null;total = 11; // series.data.lengthvar count = 1;var count1 = 0;function autoTip() {setInterval(function() {var curr = count % total;//console.info("curr:"+curr);chart.dispatchAction({type: 'mapSelect',seriesIndex: 0, // 因为只有一组数据,所以此处应为0dataIndex: curr});count += 1;}, 1000);setInterval(function() {var curr1 = count1 % total;// console.info("curr1:"+curr1);chart.dispatchAction({type: 'mapUnSelect',seriesIndex: 0, // 因为只有一组数据,所以此处应为0dataIndex: curr1});count1 += 1;}, 1000); }//autoTip();autohover();function autohover(data){
var count = 0;
var timeTicket = null;
var dataLength = 11;//此处设置的是需要轮播的次数
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {chart.dispatchAction({type: 'downplay',seriesIndex: 0,});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;
}, 1000);chart.on('mouseover', function(params) {clearInterval(timeTicket);chart.dispatchAction({type: 'downplay',seriesIndex: 0});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: params.dataIndex,});
});
chart.on('mouseout', function(params) {timeTicket && clearInterval(timeTicket);timeTicket = setInterval(function() {chart.dispatchAction({type: 'downplay',seriesIndex: 0,});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;}, 1000);
});} });</script>
</html>
echarts 地图实现轮播(二)相关推荐
- echarts 地图实现轮播(一)
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...
- echarts实现3D地图,轮播功能、背景图片、鼠标悬浮展示数据,附源码!
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果 二. 代码 一.图片效果 由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹 二. 代码 ...
- 中国地图tooltip轮播以及点击tooltip进行页面跳转
中国地图tooltip轮播以及点击tooltip进行页面跳转 tooltip轮播点击进行页面跳转 废话不说,直接上代码 <div id="ChartsChina" ref=& ...
- Vue实现ECharts柱状图数据轮播(自动分页加载)
Vue实现ECharts柱状图数据轮播(自动分页加载) vue <div id="main"></div>``` js import echarts fro ...
- echarts世界地图组件轮播、鼠标移入移出事件
[问题]:地图在轮播的时候toolTips的位置显示不正确 [原因]:出现问题的是美国.法国,发现原来在地图上还有很小很小很小的位置,比较难发现 [解决]:翻文档发现,position使用回调函数的形 ...
- echarts formatter_牛X!用 Echarts 打造一个轮播图!
最近,在B站上学习了一些Echarts的使用,分享给大家. 一个动态的柱状轮播图,本想着使用Pyecharts来实现的,奈何实现不了动态. 看来做酷炫的可视化大屏还是得上Echarts和D3. Ech ...
- vue实现图片轮播二
直接上代码吧 包含了鼠标放入移出,点击上一张下一张,自动播放. 还没做拖拽前进后退. 图片的切换部分是想模拟一个1/x的这么一个切换速度的曲线. <template><div cla ...
- Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法)
Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法) echarts-auto-tooltip使用方法: //引入echarts-auto-tooltip.js ...
- Echarts柱状图和折线图动态轮播展示
想通过Echarts实现动态轮播功能,代码如下 原创不易,转载请附上原创谢谢, 以下代码复制可用 var dateCity = ["北京","上海"," ...
最新文章
- .INFO域名总量跌破700万,8月第三周净减51,477个
- 微信JS SDK Demo
- Python高手必读,做一个精通规则的玩家
- python 机器学习 爬取关键字_5行Python就能爬取 3000+ 上市公司的信息?
- boost::units::conversion_factor相关的测试程序
- C/C++由字符串转JSON/JSON转字符串/数组解析/数组添加
- 华为交换机查看端口流量_华为交换机限速及流量统计配置
- 信贷风控必知必会:逾期相关的知识点总结
- oracle 表查询(二)
- PH国家表单下拉错位问题
- webpack的可视化资源分析工具webpack-bundle-analyzer的使用
- 如何使用百度云人脸识别服务(V3版接口python语言) (九)批量向人脸库中添加人脸
- SAI绘制波浪卷发教程
- 5月书讯 | 哺育小平邦彦、伊藤清等一代数学家的“数学圣经”终于来啦!
- Vray材质速查手册(精讲)
- linux 运行QQ /Tim(超简单)
- python两两组合_python – 一个列表中的两个组合列表
- SEBank银行项目第一个星期的进度安排
- win7下php 5.6连接mongodb扩展
- Springboot 搭建oss文件上传服务器
热门文章
- 一文“妙”解逻辑斯蒂回归(LR)算法
- ElasticSearch5.5.1插件分类
- Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询
- KMPEXKMP学习笔记
- Springsecurity-oauth2之/oauth/token的处理
- Get JSON with the jQuery getJSON Method
- [原创]Retrofit使用教程(二)
- Atitit。激活某个程序的api attilax总结
- How to Create a Development Package ?
- Spring 2.X 中AOP的简明教程