echarts 地圖實現輪播(一)
阿新 • • 發佈:2019-02-10
<!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.length var 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, // 因為只有一組資料,所以此處應為0 dataIndex: curr }); count += 1; }, 1000); setInterval(function() { var curr1 = count1 % total; console.info("curr1:"+curr1); chart.dispatchAction({ type: 'mapUnSelect', seriesIndex: 0, // 因為只有一組資料,所以此處應為0 dataIndex: 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>