前一段時間公司做了輿情相關的軟件,輿情用到了大量的圖表,相當大的數據交互。當時沒有整理下來,昨天有一次用到這些東西,所以准備記錄下來,方便以后使用。
百度echart算是百度針對數據展示做的一個圖表插件吧,一般我們使用都不是問題,主要還是對於對動態數據的解析。我這里使用餅狀圖,和柱狀圖為例:
首先,我們需要定義一個繪圖的容器:(class是我自己定義的,這個容器用一個div就可以)
<div class="fm_box pd-10 border-grey" id="shanxing" style="height: 500px;"></div>
<div class="fm_box pd-10 border-grey" id="zhuzhuang" style="height: 500px;"></div>
然后需要引入我們的echart.min.js.
准備工作做好后,下面就是我們初始化圖表的時候了。
首先我們需要定義兩個mychart分別作為我們的扇形圖和柱狀圖
var myChart = echarts.init(document.getElementById('shanxing')); var myChart2 = echarts.init(document.getElementById('zhuzhuang'));
然后分別定義option:就是數據格式的寫入:(這里因為有兩個圖,數據分別用option ,option2來表示)
option = { title : { text: '某站點用戶訪問來源', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:[] // '直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎' }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'訪問來源', type:'pie', radius : '55%', center: ['50%', '55%'], data:[ // {value:335, name:'直接訪問'}, // {value:310, name:'郵件營銷'}, // {value:234, name:'聯盟廣告'}, // {value:135, name:'視頻廣告'}, // {value:1548, name:'搜索引擎'} ] } ] }; option2 = { title : { text: '某地區蒸發量和降水量', subtext: '純屬虛構' }, tooltip : { trigger: 'axis' }, legend: { data:['項目數'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [ { name:'項目', type:'bar', data:[], } ] };
大家可以看到,我把series里面的data注釋掉,或者刪除了,因為圖表我們一般用來展示動態數據,監控數據變化,固定的圖表就沒有我寫這個博文的意義了。
好的接下來,我們模擬一個json文件。用作我們的數據。很簡單的數據格式。
{"result":1,"msg":null,"object":[["網站","微博","微信","論壇","新聞","政務","報刊"],[10,20,180,995,450,250,360]],"totalPage":0,"sum":0}
這個json是一個普通的數據。我們比方說,在后台拿到的就是這么一串json、接下來就是如何解析,並且放入圖表繪制的方法中。
我們需要先做請求。
$.ajax({ type: "get", async: true, //同步執行 url: "tets.json", dataType: "json", //返回數據形式為json success: function(data){ console.log(data.object[0].length); for(var i= 0,len=data.object[0].length;i<len;i++){ var json={}; var data2=data.object[0]; json.name=data.object[0][i]; json.value=data.object[1][i]; option.series[0].data[i]=json; option.legend.data=data.object[0]; option2.xAxis[0].data=data.object[0]; option2.series[0].data=data.object[1]; } myChart.clear(); myChart.hideLoading(); myChart.setOption(option); myChart2.clear(); myChart2.hideLoading(); myChart2.setOption(option2);// 使用剛指定的配置項和數據顯示圖表。 }, error: function(errorMsg) { alert("圖表請求數據失敗啦!"); } });
其中的url是我們請求數據的接口,當我們請求到數據之后,對數據進行遍歷。大家可能看到我在其中定義了一個對象,因為我們根據請求到的數據來看,並不太符合我們的要求,所以我們需要進行數據的轉換。
詳細的不再多說,自己參考。
我們來說說myChart.clear();myChart.hideLoading();myChart.setOption(option);
第一個是在每一次繪制圖標前,做一次初始化,清空畫布,目的是為了防止數據沒有清理干凈,會存在緩存或者什么。這樣會影響繪圖效果。
第二個是圖片繪制的時候一個類似加載的動畫效果。還有個myChart.showLoading();
第三個是繪制!相當於調用所有的配置,開始繪制。上邊的容器,數據的寫入,都是為了准備,而myChart.setOption();才是真正的繪制,使用剛指定的配置項和數據顯示圖表。
下邊是除了容器,配置的完整代碼:
//echart var myChart = echarts.init(document.getElementById('qinggan')); var myChart2 = echarts.init(document.getElementById('bar')); option = { title : { text: '某站點用戶訪問來源', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:[] // '直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎' }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'訪問來源', type:'pie', radius : '55%', center: ['50%', '55%'], data:[ // {value:335, name:'直接訪問'}, // {value:310, name:'郵件營銷'}, // {value:234, name:'聯盟廣告'}, // {value:135, name:'視頻廣告'}, // {value:1548, name:'搜索引擎'} ] } ] }; myChart.hideLoading(); myChart.setOption(option); option2 = { title : { text: '某地區蒸發量和降水量', subtext: '純屬虛構' }, tooltip : { trigger: 'axis' }, legend: { data:['項目數'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [ { name:'項目', type:'bar', data:[], } ] }; //情感分析圖 $.ajax({ type: "get", async: true, //同步執行 url: "tets.json", dataType: "json", //返回數據形式為json success: function(data){ console.log(data.object[0].length); for(var i= 0,len=data.object[0].length;i<len;i++){ var json={}; var data2=data.object[0]; json.name=data.object[0][i]; json.value=data.object[1][i]; option.series[0].data[i]=json; option.legend.data=data.object[0]; option2.xAxis[0].data=data.object[0]; option2.series[0].data=data.object[1]; } myChart.clear(); myChart.hideLoading(); myChart.setOption(option); myChart2.clear(); myChart2.hideLoading(); myChart2.setOption(option2);// 使用剛指定的配置項和數據顯示圖表。 }, error: function(errorMsg) { alert("圖表請求數據失敗啦!"); } });
好了,基本就是這些,重點不是在顯示,是在你如何解析接收到的后台數據,進行數據的配置。
這里才是重點,如果你只是寫個假數據,做個寫死的圖表。
那我就不說什么了,祝你使用愉快~