百度echarts圖表資料更新與漂浮（float）
阿新 • • 發佈：2019-01-04
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>echarts demo</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div id="bwOrder" style="height:350px;width:800px;border:1px solid #ccc;"></div> </body> <script src="echarts-plain-map.js" charset="utf-8"></script> <script type="text/javascript"> <pre name="code" class="javascript"> var bwOrder;//紅黑榜 $(function() { /** *預設設定 */ var defaultTooltip = { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, defaultToolbox = { show : false }; /** *紅黑榜 */ bwOrder = echarts.init(document.getElementById('bwOrder')); bwOrder.setOption({ title : { text: '紅黑榜', x : 'center' }, tooltip : { trigger: 'item', formatter: function (params) { var series = bwOrder.getSeries(); var sery = series[0]; var tar; if (params[1][2] != '-') { tar = params[1]; } else { tar = params[2]; } var name = ''; var value = params[2]; var data = sery.data; for(var i = 0; i < data.length; i++){ var d = data[i]; var v = d.value; if(v == value){ name = d.name; break; } } var r = ''; if(value < 0 ){ r += '倒數'; } return r + '第' + params[1] + '名<br/>' + name; } }, calculable : true, xAxis : [ { type : 'category', data : ['1','2','3','4','5','6','6','5','4','3','2','1'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'紅黑榜', type:'bar', itemStyle: { normal: { borderRadius: 5, label : { show : true, position: 'inside', //格式化顯示名次 formatter: function(value) { //計數器 if(!window._counter){ window._counter = []; } var len = window._counter.length; window._counter.push(len + 1); //獲取名次資料 var series = bwOrder.getSeries(); var sery = series[0]; var data = sery.data; var d = data[len]; var name = d.name; //清空計數器 if(len == data.length - 1){ window._counter = []; } return name; }, textStyle : { fontSize : '12', fontFamily : '微軟雅黑' } } } }, data:[ {value:12,name : '王燕'}, {value:10,name : '張毅'}, {value:8,name : '劉文'}, {value:6,name : '譚靜淑'}, {value:4,name : '高玫紅'}, {value:2,name : '嚴詠全'}, {value:-2,name : '嚴土城'}, {value:-4,name : '趙禕'}, {value:-6,name : '周巨集昌'}, {value:-8,name : '李紅常'}, {value:-10,name : '全進賢'}, {value:-12,name : '趙易山'} ] } ] }); //重新整理紅黑榜:這裡用setTimeout代替ajax請求進行演示 window.setTimeout(function(){ var data = [ {value:12,name : 'Sky'}, {value:10,name : 'Lyn'}, {value:8,name : 'Lucifer'}, {value:6,name : 'Moon'}, {value:4,name : 'Fly100%'}, {value:2,name : 'Focus'}, {value:-2,name : 'Sojo'}, {value:-4,name : 'Remind'}, {value:-6,name : 'Sweet'}, {value:-8,name : 'XiaoT'}, {value:-10,name : 'GoStop'}, {value:-12,name : 'Ted'} ]; refreshBwOrderData(data); },3000); }); /** * 重新整理紅黑榜 */ function refreshBwOrderData(data){ if(!bwOrder){ // Todo something？ return; } //更新資料 var option = bwOrder.getOption(); option.series[0].data = data; /** if (bwOrder && bwOrder.dispose) { bwOrder.dispose(); } bwOrder = echarts.init(document.getElementById('bwOrder'));//重新例項化 */ bwOrder.setOption(option); } </script> </html>