echarts 地图实现轮播（一）
生活随笔
收集整理的這篇文章主要介紹了
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 地图实现轮播（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《英雄联盟》推出腕豪瑟提 1/6 雕塑，
- 下一篇： 蔚来法务部：徐某某发布数万条蓄意抹黑、侮