ECharts使用記

系統開發廠商一直都使用基於Flash的圖表解決方案，例如Fushioncharts。本人也曾略作研究，當時對js不熟，只能採用靜態xml方式，頗爲繁瑣。

自從瞭解了html5的新特性，意識到基於Canvas的圖表套件可行，因而經過搜索找到ECharts這個項目。該項目是百度旗下的開源js庫。試用以後以爲很方便，呈現效果出色，定製功能也豐富，遂投入應用。從技術角度，基於html5的圖表比Flash更先進一些，用戶感知更好。

雖然個人js仍是菜鳥水平，但也摸索出一個實現方案，現做一些記錄。

數據來源

因我還未學會Ajax的動態獲取方式，故只能將數據錶帶在頁面源代碼中。

一是將數據保存爲html表格，包含在頁面。

<?php include_once "r/Dublin_MME_Sh_dailygraph_".$d_date.".html"; ?>

一是服務器端鏈接數據庫數據。目前實現了鏈接mysql和informix。

<?php $mdb_server = "localhost"; $mdb_user = "***"; $mdb_pwd = "XXX"; $mdb_name = "AAA"; $mdb_conn = mysql_connect($mdb_server,$mdb_user,$mdb_pwd); $mdb_sql = 'select * from zurich where CDATE like "'.$cur_month.'%";'; $mdb_sel = mysql_select_db($mdb_name); $mdb_res = mysql_query($mdb_sql, $mdb_conn); echo "<table id='MData'>"; while ($mdb_row = mysql_fetch_array($mdb_res)) { echo "<tr>"; for($idx=0;$idx< sizeof($mdb_row) ;$idx++) { echo "<td>".$mdb_row[$idx]."</td>"; } echo "</tr>"; } echo "</table>"; ?>

 

數據獲取

ICharts基於js，是客戶端代碼，須要從頁面代碼中抓取數據。採用dom方式簡易實現。有待優化。

var str_date = document.getElementById('PageTitle').innerHTML; /(\d+)/.test(str_date); str_date = "T"+RegExp.$1; var row_x = document.getElementById(str_date).rows[0].cells; var row_y1 = document.getElementById(str_date).rows[1].cells; var row_y2 = document.getElementById(str_date).rows[2].cells; var row_y3 = document.getElementById(str_date).rows[3].cells; var str_pinshi = document.getElementById('Pinshi').innerHTML; /(\d+)/.test(str_pinshi); str_pinshi = "T"+RegExp.$1; var row_b18 = document.getElementById(str_pinshi).rows[18].cells; var a_x = [],a_y1 = [],a_y2 = [],a_y3 = [],a_y4 = []; var a_b18 = []; for (var i = 1;i<=row_x.length - 1; i++) { a_x.push(row_x[i].innerHTML); a_b18.push(row_b18[i].innerHTML); }; for (var i = 1;i<=int_neartime; i++) { a_y1.push(row_y1[i].innerHTML); a_y2.push(row_y2[i].innerHTML); a_y3.push(row_y3[i].innerHTML); };

 

圖表呈現

icharts的工做原理很是清晰易懂，只要定義畫布，調用js函數做畫，指定數據和圖表屬性便可。

<div id="myGraph1" style="height:300px;width:99%;border:1px solid #ccc;"></div> 

 

    var myChart1 = echarts.init(document.getElementById('myGraph1'));
    myChart1.setOption({
        title : {text: 'EPS附着成功率'},
        legend : {data:['EPS附着成功率','附着次'],y:'bottom'},
        tooltip : {trigger: 'axis'},
        toolbox: {
            show : true,
            feature : {
                mark : false,
                dataView : {readOnly: false},
                magicType:['line', 'bar'],
                restore : true,
                saveAsImage : true
            }
        },
        xAxis : [{type : 'category',data :a_x,axisLabel:{interval:0,rotate:-90,}}],
        yAxis : [{max:100,type : 'value',position:'left', splitArea : {show : true}},{type : 'value',position:'right', splitArea : {show : false}}],
        series : [
            {name:'EPS附着成功率',type:'line',data:a_y2},
            {name:'附着次',type:'bar',data:a_y1,yAxisIndex:1},
        ]
    }); 

 

放一張效果圖

後續優化

1. 首先是實現動態讀取服務器數據，即ajax方式。考慮採用jquery庫
2. 優化圖表模版，實現動態座標軸等功能，和更多自定義配置
3. 優化圖層顯示，實現圖表輪播，最大化等功能