When ECharts meets TWaver

Baidu's ECharts has developed rapidly and has become a leader in HTML5 Chart, which makes everyone proud: the Chinese finally have world-class open source general UI products. As its website says, it's Baidu's, China's, and the world's. Thinking about those years, there are countless chart products we have been chasing, fusionchart, highchart, etc. With the rapid popularization of HTML5 and the crazy development of ECharts, you can forget about those products. Other commercial chart products are basically not far from the days when they close their doors in shivering.

Each branch of TWaver also has chart modules. Although it is not a core component, it also has the convenience of being closely integrated with TWaver's MVC framework, and some simple application scenarios can be fully handled. But compared with ECharts, there is no doubt that ECharts is more expressive and more powerful. In fact, the functions of TWaver and ECharts do not conflict and overlap. On the contrary, they can be used together: TWaver does topology and 3D graphs, and ECharts is responsible for graphs. Many TWaver customers do the same.

Next, we will try to combine ECharts and TWaver 3D scene, so that both can burst out more exciting sparks.

First create 3 common charts with ECharts:

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

 

ECharts can clearly define the content and style of the chart to be displayed through separate options, which is really convenient. For example the following options definition:

option1 = {
    title : {
        text: 'Sales of a real estate',
        subtext: 'Purely fictitious'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['Intention','Pre-Order','Deal']
    },
    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 : ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'Deal',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'Pre-Order',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'Intention',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};
 
chart1.setOption(option1);

 The three graphs are shown below:

 

Next we create a TWaver 3D cube and place it on another 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);

 The last step is to stick the 3 charts on the 3 faces of the cube and keep it dynamically updated. Each chart of ECharts has a getImage() method, which can easily get the current "screenshot" of the chart. This is convenient, we "grab" it and paste it on one side of the cube:

//Screenshot chart to generate pictures
var image=chart1.getImage();
//After the image is generated and loaded, update the top texture of the cube
image.onload=function(){          
  cube.setStyle('top.m.texture.image', image);
}

 The three charts are made in the same way, and they are attached to the three sides of the cube, and the effect will come out:

Then setInterval adds a loop to continuously update the texture to the facade, so that the chart can be updated in real time in the 3D scene.

It can be seen that we can use both TWaver and ECharts for data presentation in the project: TWaver is responsible for the topology map, common components, 3D and other parts, and ECharts is responsible for the chart presentation part. It can be used in combination with each other in 2D or in 3D, giving full play to the strengths of the two products.