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'));var dataMap = [{ name: '利通区' }, { name: '青铜峡市' }, { name: '盐池县' },{ name: '红寺堡区' },{ name: '同心县' },{ name: '上海' }];option = {title: {x: 'left',y: 'top',text: '2015吴忠市人口数量',subtext:"人口密度数据来自吴忠市统计局年鉴"},tooltip: {//trigger: 'item',//formatter: '{b}<br/>{c} (人)'//pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'},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 = 5; // series.data.lengthvar count = 1;var count1 = 0;function autoTip() {setInterval(function() {playState: false;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();//         var a=$("canvas");
//         var b=a[0].getContext('2d');
//
//         console.info("a:"+a);
//          console.info("b:"+b);
//
//
//             for(var i in b){//通过定义一个局部变量i遍历获取map里面的所有key值
//              console.info(b[i]); //通过获取key对应的value值
//                }
});</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 ...
Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）
Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法) echarts-auto-tooltip使用方法: //引入echarts-auto-tooltip.js ...
Echarts柱状图和折线图动态轮播展示
想通过Echarts实现动态轮播功能,代码如下原创不易,转载请附上原创谢谢, 以下代码复制可用 var dateCity = ["北京","上海"," ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...

echarts 地图实现轮播（一）

echarts 地图实现轮播（一）相关推荐

最新文章

热门文章