Echarts Integrated ht& #160;for& #160; Web topology diagram application

Echarts the Graphics component 1 . 0 I have been concerned about it when it was announced. Today, when I was working on a project, I encountered the need for an icon, and also the functionality of the graphical component on the htfor Web . However, after trying the detailed implementation, it is found that the HT for Web graphics components are presented in vector format, which can have a lot of features such as their own definition and data binding, but they are relatively weak in the design of the interaction.

so I was just thinking. Is it possible to replace the echarts Graphics component in the project with the graphical components of the htfor Web , After a preliminary understanding of echarts. Find both Div - and canvas -based applications. So I started to do a bold attempt, in the end, Kung Fu does not bear the painstaking people, the following to see the detailed demonstration of the Demo effect it:

This is from echarts official demo htfor Web splitview components will be two chart 3 : 2 cut.

Look at this example is not very intuitive to see Echarts and the HT for Web application, let's look at the following HT for Web topology diagram components and Echarts Integration of graphics components:

in this Demo the integration of htfor Web of the Tree components, Graphview topology diagram components and Echarts Graphics components. and make the layout with the SplitView component of htfor Web .

Said so much. Now let's look at the implementation of the detailed code:

Ht. Chart = function (option) {    var = this,            view = Self._view = document.createelement (' div ');    view.style.position = ' absolute ';    View.style.setProperty (' box-sizing ', ' border-box ', null);    self._option = option;}; Ht. Default.def (' Ht. Chart ', Object, {    ms_v:1,    ms_fire:1,    ms_ac: [' Chart ', ' option ', ' IsFirst '],    validateimpl:function () {        var = this,                chart = Self._chart;        if (!chart) {            chart = Self._chart = Echarts.init (Self.getview ());            Chart.setoption (self._option);        }        Chart.resize ();    }});

You are not mistaken, the most core code is these, the following is to introduce the detailed logic of the code design:

This string of code is actually very well understood, which is defined in the system ht. Chart view and fire validateimpl Detailed implementation of the chart

The detailed use is to create HT through the newkeyword . An instance of the Chart. and pass in the standard echarts configuration parameters, or do not pass in when new. After the object is created, it is set by the setOption (option) method.

Finally I recorded for you the detailed page operation effect Video, welcome everyone to appreciate.

Http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html

Echarts Integrated ht& #160;for& #160; Web topology diagram application