標籤：i++ slide slow blog ast z-index log src alt
echarts地圖展示功能非常強大，官網上靜態展示的範例非常多了，動態資料少。研究了下。我眼下實現的通過ajax從server擷取資料動態展示地圖。
另外，我們有時候希望在地圖之上做些自己定義的東西，比方：通知框。或者其它的東西。我們能夠通過css圖層的方式在地圖之上實現。我實現的效果例如以下：
附上源碼：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>ECharts</title><style>.dn{display:none;}.divcss5-1 {z-index: 10;border: 1px solid rgb(204, 204, 204);left: 900px;top: 100px;width: 400px;height: 540px;position: absolute;padding: 0 10px;}</style></head><body><div id="board" class="divcss5-1"></div><!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--><!--Step:1 為ECharts準備一個具備大小（寬高）的Dom--><!--<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>--><div id="mainMap" style="height: 700px; border: 0px solid #ccc; padding: 10px;margin:25px 0;"></div><!--Step:2 Import echarts.js--><!--Step:2 引入echarts.js--><script src="/js/echarts/dist/echarts-all.js"></script><script src="/js/jquery-1.4.3.js"></script><script type="text/javascript">//var myChart = echarts.init(document.getElementById(‘mainMap‘));// Step:4 require echarts and use it in the callback.// Step:4 動態載入echarts然後在回呼函數中開始使用，注意保持按需載入結構定義圖表路徑var option = {backgroundColor: ‘#ffffff‘,title : {text : ‘***網報進度‘,subtext : ‘(當前總數)‘,x : ‘center‘},tooltip : {trigger : ‘item‘,formatter : "{c}"},legend : {orient : ‘vertical‘,x : ‘left‘,data : [ ‘注冊情況統計‘ ]},dataRange : {x : ‘left‘,y : ‘bottom‘,//orient : ‘horizontal‘,min : 0,max : 3000000,text : [ ‘300萬‘, ‘0‘ ], // 文本，默覺得數值文本splitNumber : 0},toolbox : {show : false,},roamController : {show : false,},series : [{name : ‘注冊情況統計‘,type : ‘map‘,mapType : ‘china‘,mapLocation: { x: ‘100‘, y: ‘center‘, height: ‘80%‘ },roam : false,showLegendSymbol : false,itemStyle : {normal : {borderWidth : 1,borderColor : ‘black‘,color : ‘grey‘,label : {show : true,textStyle : {color : "black",fontWeight : "bold"}}},emphasis : {label : {show : true}}},data : [],geoCoord: { "海門":[121.15,31.89], "北京":[116.46,39.92]}}]};//myChart.setOption(option);var mapDiv = document.getElementById(‘mainMap‘);var myChart = echarts.init(mapDiv);myChart.showLoading({ text: ‘正在努力的讀取資料中...‘, //loading話術});function getTotal(){$.getJSON("/m/total.action", {xllb:‘20‘},function(json){var mapChart = echarts.init(mapDiv);var myOption = option;var cntAll = 0;for(var i=0;i<json.length;i++) {cntAll+=json[i].value;}myOption.title.subtext = "(當前總數"+cntAll+")";//var series = myChart.getSeries();myOption.series[0].data = json;//myChart.setSeries(series);mapChart.setOption(myOption, true);//console.log(json);});}var index = 0;function addMsg(){$.getJSON("/m/msg.action", {xllb:‘20‘,start:index},function(json){if(json.length>0) {var msg = json[0].msg;var $board = $("#board");var $ps = $board.find("p");if($ps.size()>13) {var $lastP = $ps.last()$lastP.hide("slow");$lastP.remove();//console.log("已滿");}var p = $("<p class=‘dn‘>"+msg+"</p>");$board.prepend(p);p.slideDown("slow");index++;}});}setInterval("addMsg()",5000);setInterval("getTotal()",5000);//getTotal(myChart);</script></body></html>
echarts 地圖 動態 展示 結合css+js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
