Echarts integrated ht?for? Web topology diagram application

Echarts the Graphics component 1 . 0 I have been concerned about the release of the project, today I encountered the need for the icon, in HT for Web also has the function of the graphics component, but after trying the implementation, we find HT for Web graphical components are presented in vector format and can have many features such as customization and data binding in the presentation, but they are relatively weak in the design of the interaction.

so I was wondering if it was possible to Echarts Graphics Components instead HT for Web the graphical component of the Echarts Having made a preliminary understanding, it was found that both were based on Div and the Canvas application, so I began to do a bold attempt, finally, Kung Fu is not a painstaking people, the following to see Demo the specific effect of the show:

This is from official demo ht for Web splitview style= "Font-family:simsun" components will be two chart 3 : 2 split.

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 Component with the Echarts Integration of graphics components:

in this Demo the integration of HT for Web of the Tree components, Graphview topology diagram components and Echarts graphics components, and using HT for Web of the SplitView component to make the layout.

Having said so much, let's take a look at the implementation of the specific code:

Ht. Chart = function (option) {    var self = 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 self = this,                 chart = self._ Chart;        if (!chart) {     &Nbsp;      chart = self._chart = echarts.init (Self.getView () );             chart.setoption (self._option);         }        chart.resize ();     }});

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

This string of code is well understood, which is defined in the systemht. Chartthis class, and then let the class haveViewand theKindleproperties, and finally, in theValidateimplmethod to achieve the specificChartinitialization and rendering. The specific use is throughNewkeyword to createht. Chartand pass in the standardEchartsconfiguration parameters, or theNewWhen you create an object, you do not pass thesetOption (option)method to set the.

Finally I recorded for you the specific page of the operation effect of the video, welcome to enjoy.

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

Echarts integrated ht?for? Web topology diagram application