當ECharts碰到TWaver

百度公司的ECharts發展迅速，已經成爲HTML5 Chart的佼佼者，這讓大家驕傲：中國人終於也有世界級的開源通用UI產品了。正如其網站所說，它是百度的，是中國的，也是世界的。想想那些年，我們追逐感慨過的chart產品，fusionchart、highchart等等不計其數，隨着HTML5的迅速普及和ECharts的瘋狂發展，大家可以忘掉那些產品了。其他商業chart產品基本上也離顫抖中關門的日子不遠了。

TWaver各個分支也都有chart模塊。雖然它不是核心組件，但是也有和TWaver的MVC框架緊密結合的便利，一些簡單的應用場景是完全可以應付的。但和ECharts相比，毫無疑問ECharts表現力更豐富、功能更強大。其實TWaver和ECharts功能並不衝突和重疊，相反他們完全可以一起配合使用：TWaver做拓撲圖、3D圖，ECharts負責圖表。很多TWaver的客戶也是這樣做的。

下面我們就嘗試把ECharts和TWaver 3D場景進行結合，讓兩者都迸發出更精彩的火花。

首先用ECharts創建3個常見圖表：

var chart1 = ec.init(document.getElementById('chart1'));                                 
var chart2 = ec.init(document.getElementById('chart2'));                                 
var chart3 = ec.init(document.getElementById('chart3')); 

ECharts通過單獨的options可以把圖表要顯示的內容和樣式全都定義清楚，這一點確實很方便。例如下面的options定義：

option1 = {
    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', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['週一','週二','週三','週四','週五','週六','週日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'預購',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};
 
chart1.setOption(option1);

三個圖表顯示如下：

接下來我們創建一個TWaver 3D立方體，放在另外的canvas上：

var box = new mono.DataBox();
var camera = new mono.PerspectiveCamera(30, 1.5, 0.1, 10000);
camera.setPosition(800,1000,1500);
 
var network= new mono.Network3D(box, camera, canvas);
var interaction = new mono.DefaultInteraction(network);
network.setInteractions([new mono.SelectionInteraction(network), interaction]);
 
var cube=new mono.Cube(1000,500,1000);
box.add(cube);

最後一步，是把3個chart貼在立方體的3個面上，並能保持動態更新。ECharts的每個chart都有一個getImage()方法，可以很方便的拿到這個chart當前的“截圖”。這樣就方便了，我們把它“抓”下來，貼到cube的一個面上即可：

//截圖chart生成圖片
var image=chart1.getImage();
//圖片生成加載完畢後，更新立方體頂面貼圖
image.οnlοad=function(){          
  cube.setStyle('top.m.texture.image', image);
} 

把3個chart都如法炮製，分別貼在立方體的三個面上，效果就出來了：

再setInterval增加一個循環，把貼圖不停的更新到立面上，這樣就能讓chart在3D場景中實時更新了。

由此可見，我們完全可以在項目中同時使用TWaver和ECharts進行數據呈現：TWaver負責拓撲圖、通用組件、3D等部分，ECharts負責圖表呈現部分。既可以2D相互搭配使用，也可以在3D中融合使用，充分發揮兩個產品的特長。