ECharts integrated HT & #160; for & #160; Web network topology application, echartsht

ECharts integrates the network topology application of HT for Web, echartsht

I have been paying attention to the release of the ECharts graphics component in 1.0. Today, when I was working on a project, I encountered the need for icons. In HTfor Web, I also had the function of graphical components, however, after trying the specific implementation, we found that the graphic components of HT for Web are presented in vector format, and there can be many features such as custom and Data Binding in presentation, however, it is relatively weak in the interaction design.

So I was wondering if I could replace the ECharts graphical component with the HTfor Web graphical component in the project. After a preliminary understanding of ECharts, I found that both of them are based on Div and canvas applications, so I started to make a bold attempt and finally worked hard. Let's take a look at the specific effect of the Demo:

This is two examples copied from the official ECharts Demo. The HTfor Web SplitView component is used in the layout to divide the ratios of the two charts and above.

Looking at this example, we cannot intuitively see the combination of ECharts and HT for Web applications. Next, let's look at the integration of the HT for Web topology component and ECharts graphic component:

In this Demo, the Tree component, GraphView topology component, and ECharts graphical component of HTfor Web are integrated, and the SplitView component of HTfor Web is used for layout.

Now 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){            chart = self._chart = echarts.init(self.getView());            chart.setOption(self._option);        }        chart.resize();    }});

You are not mistaken. This is the core code. The following describes the specific logic of code design:

This string of code is actually very easy to understand, that is, to define ht in the system. chart class, then let the class have the view and fire features, and finally implement the initialization and rendering of the chart in the validateImpl method. The specific use is to use the new keyword to create ht. instance of the Chart, and pass in the standard ECharts configuration parameters, or when new, do not pass the parameter. After the object is created, set it using the setOption (option) method.

Finally, I recorded a video of the operation results on a specific page.

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