Echarts integration of the HT for Web network topology diagram application

Source: Internet
Author: User

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 htfor 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 htfor 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 echarts official demo two copies of the example, where htfor Web splitview 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 components and Echarts Integration of graphics components:

demo htfor Web Span lang= "en-US" style= "Font-family:simsun" >tree components, graphview topology diagram components and echarts graphics component with htfor Web splitview component layout.

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

Ht. Chart = function (option) {    var = this,            view = Self._view = document.createelement (' div '); = ' absolute '; (' 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 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.


Echarts integration of the HT for Web network topology diagram application

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.