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. 优化图层显示，实现图表轮播，最大化等功能