Detailed Echarts use experience summary

Detailed Echarts use experience summary _jquery

Last Update:2017-01-18 Source: Internet

Author: User

Tags math round

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Objective

Last week, the project team had to give customers a demo prototype, home design is a map of China, originally intended to use Google's map, but, after making the overall effect looks too bad, and finally on the web search related map rendering control, and then found this echarts report rendering components, It's a nice component, and the map data is off-line, and it's really awesome. However, the use of it is quite a time-consuming effort. So the use of some of the experience to share with you.

1. Download the plugin

The following is the download link for echarts, it should be noted that Echarts is also dependent on another plug-in called Zrender, of course, for most of the charts do not need zrender, but for map control and other complex rendering controls are needed zrender. In order to avoid the problem, we recommend that you download the echarts while downloading the zrender.

Echarts Download Address: http://echarts.baidu.com/

Zrender Download Address: http://ecomfe.github.io/zrender/index.html

After downloading, unzip the respective file directory structure as follows:

Echarts:

Zrender:

2. References to Plug-ins

First, create a new Web application, and then add the file that you just downloaded, with the following directory structure:

Here are the following points to note:

1. All the files related to Echarts are under the Echarts folder.

2, the contents of the Echarts folder is divided into two parts

1 is a part of the echarts beginning of the JS file, these files are all from the Echarts file directory in the JS folder in the file, that is, 1. In the figure in the red box of JS under the file. As follows:

2 The other part is a folder called Zrender, where it is important to note that the name of the folder must be Zrender, because in Echarts JS file references to Zrender are based on the Zrender root directory, The contents of the Zrender folder are 1. The contents of the SRC folder in the Zrender file directory are as follows:

3. Specific use on the page

After you have configured the steps above, we can refer to it in the page, where I mainly demonstrate how map controls are used, as the reference to maps is not the same as other basic graphics. The rendering of other graphics will also be a brief demonstration.

3.1 Mapchart

First, add an ASPX page or HTML page under the same directory (that is, the Modules folder) of the Echarts folder in 2, and note that if you use Echarts in an ASPX page, you need to place the div you want to render outside the form label. Otherwise, the graphic is not displayed.

3.1.1 Adds a reference to Echarts in the head tag as follows:

3.1.2 in the body tag, outside the form tag, add a div that is used to make the diagram rendering container. As follows:

<body> 
 
<div id= "main" style= "height:500px;border:1px solid #ccc;p adding:10px;" ></div> ......... 
 
......... </body>

3.1.3 The div tag added in 3.1.3, add the following JS code snippet, as follows:

 <script type= "Text/javascript" >//To configure the Echarts path for the module loader, which is primarily to configure the path of the map diagram, the other diagrams are not the same as the map configuration, and a different type of chart case will be done below. 
 
    The main references here are the Echarts-map files under the Echarts folder, while other types of charts refer to echarts files under the Echarts folder. Requireconfig ({paths: {echarts: '/echarts/echarts ', ' echarts/chart/map ': '/echarts/echarts- 
 
   Map '}}); 
 
    Dynamically loading echarts, used in the callback function, should be careful to keep the diagram path require ([' echarts ', ' echarts/chart/map ') defined on-demand loading structure. 
 
      ], function (EC) {Varmychart=ecinit (Documentgetelementbyid (' main ')); 
 
          option is mainly the icon of some settings, this is not the focus of this article, about the specific settings can refer to the official documentation document Option= {title: {text: ' iphone pin ¨² volume ¢? ', 
 
        Subtext: ' pure ä º? Virtual ¨¦ construct 1 ', x: ' Center '}, tooltip: {trigger: ' item ' }, Legend: {Orient: ' Vertical ', x: ' Left ', data: [' Iphone3 ', ' iph 
 
       One4 ', ' iphone5 ']}, DataRange: {   min:0, max:2500, text: [' High? ', ' low ì¨ª '],//Wen Ben À?,ê "¨" for a number ºy value ¦ì text? Calculable:true, TextStyle: {color: ' Orange '}}, Toolbox: {show:true, Orient: ' Vertical ', x: ' Right ', y: ' Center ', fe 
 
            Ature: {mark:true, DataView: {readonly:false}, Restore:true, Saveasimage:true}}, Series: [{name: ' Iphone3 ', type: ' Map '  , Maptype: ' Selectedmode ', ItemStyle: {normal: {label: {show:true },color: ' #ffd700 '},//for legend emphasis: {label: {show:true}}}, data: [{ 
 
        Name: ' North À¡à Beijing ', Value:mathround (Mathrandom () *1000)}, {name: ' ¬¨¬ ¨° ', Value:mathround (Mathrandom () *1000)}, {Name: ' ¦ Sea ¡ê ', value:Mathround (Mathrandom () *1000)}, {name: ' Heavy Qing ¨¬ ', Value:mathround (Mathrandom () *1000)}, {name: ' River ¨® North à ¡à ', Value:mathround (Mathrandom () *1000)}, {name: ' River ¨® South? ', Value:mathround (Mathrandom () *1000)}, {n 
 
        Ame: ' Yun-nan ', Value:mathround (Mathrandom () *1000)}, {name: ' Liao ¢¨¦ ning T ', Value:mathround (Mathrandom () *1000)}, {name: ' Black ¨² dragon ¢¨² River-', Value:mathround (Mathrandom () *1000)}, {name: ' Lake T South? ', Value:mathround (Mathrandom () *1000 }, {name: ' ã2 emblem? ', Value:mathround (Mathrandom () *1000)}, {name: ' Mountain ¦? East ', Value:mathround (mathrandom () *1000)}, {name: ' New Xinjiang? ', Value:mathround (Mathrandom () *1000)}, {name: ' Jiang-su? ', Value:mathround (Math Random () *1000)}, {name: ' Zhe Jiang-', Value:mathround (Mathrandom () *1000)}, {name: ' River-West ¡â ', Value:mathrou nd (Mathrandom () *1000)}, {name: ' Lake T North À¡à ', Value:mathround (Mathrandom () *1000)}, {name: ' Guang XI ¡â ', Valu E:mathround (Mathrandom () *1000)}, {name: ' gan ¨º ¨¤ ', Value:mathround (Mathrandom () *1000)}, {name: ' Mountain ¦ West ¡â ', Value:mathround (Ma Thrandom () *1000)}, {name: ' Inner ¨²-¨¦ ancient? ', Value:mathround (Mathrandom () *1000)}, {name: ' Shaanxi ¦ West ¡â ', value: Mathround (Mathrandom () *1000)}, {name: ' Kat a forest ¢? ', Value:mathround (Mathrandom () *1000)}, {name: ' Fu ¡ê-built § ', Value:mathround (Mathrandom () *1000)}, {name: ' expensive ¨® State y ', Value:mathround (Mathrandom () *1000)}, {NA 
 
        Me: ' Guang Dong ', Value:mathround (Mathrandom () *1000)}, {name: ' Green ¨¤ Sea ¡ê ', Value:mathround (Mathrandom () *1000)}, {name: ' West ¡â ', Value:mathround (Mathrandom () *1000)}, {name: ' Four Sichuan ä¡§ ', Value:mathround (Mathrandom () *1000)} , {name: ' ning T Xia ', Value:mathround (Mathrandom () *1000)}, {name: ' Sea ¡ê South? ', Value:mathround (Mathrandom () * 1000)}, {name: ' Taiwan ¬¡§ Bay ª? ', Value:mathround (Mathrandom () *1000)}, {name: ' Xiang Hong Kong ', Value:mathround (mathr 
 
   Andom () *1000)},     {name: ' O coal tar door? ', Value:mathround (Mathrandom () *1000)}] 
 
      }, {name: ' iphone4 ', type: ' Map ', Maptype: ' In ', Selectedmode: ' Single ',  ItemStyle: {normal: {label: {show:true},color: ' #ff8c00 '},//for legend emphasis: {label: { Show:true}}, data: [{name: ' North À¡à ', Value:mathround (Mathrandom () *1000)}, { 
 
        Name: ' ¬¨¬ ¨° ', Value:mathround (Mathrandom () *1000)}, {name: ' Upper ¦ sea ¡ê ', Value:mathround (Mathrandom () *1000)}, {name: ' ¨¬ ', Value:mathround (Mathrandom () *1000)}, {name: ' River ¨® North À¡à ', Value:mathround (Mathrandom () *1 }, {name: ' ã2 emblem? ', Value:mathround (Mathrandom () *1000)}, {name: ' New Frontier ', Value:mathround (Mathrand Om () *1000)}, {name: ' Zhe Jiang-', Value:mathround (Mathrandom () *1000)}, {name: ' River-West ¡â ', Value:mathround (M Athrandom () *1000)}, {name: ' Mountain ¦ West ¡â ', Value:mathround (mathrAndom () *1000)}, {name: ' Inner ¨² Mongol ¨¦ ', Value:mathround (Mathrandom () *1000)}, {name: ' Kat a LIN ¢? ', Value:math Round (Mathrandom () *1000)}, {name: ' Fu ¡ê build ¡§ ', Value:mathround (Mathrandom () *1000)}, {name: ' Guang Dong? ', VA Lue:mathround (Mathrandom () *1000)}, {name: ' West ¡â hidden? ', Value:mathround (Mathrandom () *1000)}, {name: ' Four  Chuan Ä¡§ ', Value:mathround (Mathrandom () *1000)}, {name: ' Ning t summer? ', Value:mathround (Mathrandom () *1000)}, { 
 
      Name: ' Shannon Harbour ', Value:mathround (Mathrandom () *1000)}, {name: ' O coal tar gate? ', Value:mathround (Mathrandom () *1000)} ]}, {name: ' iphone5 ', type: ' Map ', maptype: ' O ', Selectedmode: ' Si Ngle ', ItemStyle: {normal: {label: {show:true},color: ' #da70d6 '},//for legend emphasis 
 
        : {label: {show:true}}}, data: [{name: ' North À¡à ', Value:mathround (Mathrandom () *1000)}, {name: ' Tian ¬¨¬ Jin ¨° ', Value:mathround (Mathrandom () *1000)}, {name: ' Upper ¦ ¡ê ', Value:mathround (Mathrandom () *1000)}, {n 
 
        Ame: ' Guang Dong ', Value:mathround (Mathrandom () *1000)}, {name: ' ¬¡§ Bay ª? ', Value:mathround (Mathrandom () *1000)},  
 
      {name: ' Xiang Hong Kong ', Value:mathround (Mathrandom () *1000)}, {name: ' O coal tar gate? ', Value:mathround (Mathrandom () *1000)} 
       ] 
 
    } 
  ] 
      }; 
       The following code is mainly used to deal with the user's choice, the application scenario is to do map interaction, such as click on a map of a province, to obtain the corresponding provincial indicators change. It is important to note that if you need to click on a map of a province to interact with the operation, you also need to add a Selectedmode attribute for each item of the series property, where the property value is ' single ', or varecconfig= require (' 
      Echarts/config '); 
        Mycharton (ecconfigeventmap_selected,function (param) {varselected=paramselected; 
        Varmapseries=optionseries[0]; 
        Vardata= []; 
        Varlegenddata= []; 
        VarName 
          for (varp=0,len=mapseriesdatalength; p<len; p++) {name=mapseriesdata[p]name; 
          Mapseriesdata[p]selected=selected[name]; if (Selected[namE]) {alert (name);//Here is simply to do a case description, pop-up user selected province, if you need to do other extensions, you can add the corresponding operations here}}); 
    mychartsetoption (option); 
  } 
  ); 

 </script>

After the 3.1.4 is done, the effect is shown in the following illustration:

3.2 Linechart

Icons other than map charts are used in the same way. In fact, the difference between the other charts and the map chart is the reference to the configuration file. Here is only a line chart example, the other examples are the same.

3.2.1, like 3.1.1, introduces the Echarts script

3.2.2 like 3.2.2, add a div container to render the chart

3.2.3 Add the following JS code block under the div added 3.2.2

<scripttype= "Text/javascript" > Requireconfig ({paths: {echarts: '/echarts/echarts ', ' Echarts/chart/bar ': '/echarts/echarts ',//Here you need to note that in addition to mapchart use of the configuration file for Echarts-map, the other graphics reference profile is Echarts, 
 
    This is also the general graphics and map of the difference between ' echarts/chart/line ': '/echarts/echarts '}); Require ([' echarts ', ' echarts/chart/bar ', ' echarts/chart/line '), Functio 
 
      N (EC) {Varmychart=ecinit (Documentgetelementbyid (' main ')); option= {tooltip: {trigger: ' Axis '}, Legend: {data: [' Postal ®¨º piece T 
 
        The battalion ®a sells ¨² ', ' ¢a the Union is wide? ', ' depending on º¨® frequency ¦ì wide? ', ' direct ¡à to ¨® visit ¤ ', ' ¨º ', ' Search for ¡â to lead °y. ' }, Toolbox: {show:true, feature: {mark:true, DataView : {Readonly:false}, Magictype: [' line ', ' Bar '], restore:true, SAVEASIMAGE:TR UE}}, 
 
        Calculable:true, Xaxis: [{type: ' Category ', Boundarygap:false, D 
 
    ATA: [' Zhou ¨¹-° ', ' Zhou ¨¹ two t ', ' Zhou ¨¹ three ¨y ', ' Zhou ¨¹ four ', ' Zhou ¨¹ five ', ' Zhou ¨¹ six ¢¨´ ', ' Zhou ¨¹ day ¨? '] 
 
        }], YAxis: [{type: ' Value ', Splitarea: {show:true}}], Series: [{name: ' Mail ®¨º T battalion ®a pin ¨² ', type: ' line ', stack: ' Total á¨¹ amount ¢? ', data: [120,132 
 
      , 101,134,90,230,210]}, {name: ' ¢a Union? ', type: ' line ', stack: ' Total á¨¹ amount ¢? ', Data: [220,182,191,234,290,330,310]}, {name: ' view º¨® frequency ¦ì wide? ', type: ' Line ', stack : ' Total Á¨¹ quantity ¢ ', data: [150,232,201,154,190,330,410]}, {name: ' direct ¡à ¨® visit ¤? '. Q ¨º ', type: ' L Ine ', stack: ' Total á¨¹ volume ¢? ', data: [320,332,301,334,390,330,320]}, {name: ' Search for ¡â to draw °y ' , type: ' line ', stack: ' Total á¨¹ amount ¢? ', data: [820,932,901,934,1290,1330,1320]}]}; 
 
    mychartsetoption (option); 
 
  } 
 
  ); </script> <divid= "main1" style= "height:500px;border:1px solid #ccc;p adding:10px;" ></div> <scripttype= "Text/javascript" > Requireconfig ({paths: {echarts: ' 
 
      /echarts/echarts ', ' echarts/chart/bar ': '/echarts/echarts ', ' echarts/chart/line ': '/echarts/echarts ' 
 
    } 
 
    }); Require ([' echarts ', ' echarts/chart/bar ', ' echarts/chart/line '), Functio 
 
      N (EC) {Varmychart=ecinit (Documentgetelementbyid (' main1 ')); option= {title: {text: ' Not ¡ä to ¤¡ä a ° ¨¹ gas? ' ¡¥ ', subtext: ' pure ä ' º? virtual ¨¦ structure 1 '} , tooltip: {trigger: ' Axis '}, Legend: {data: [' Most á? High gas temperature ', ' most á 
 
        ? low ì¨ª gas temperature? '] 
 
 }, Toolbox: {         Show:true, Feature: {mark:true, DataView: {readonly:false}, 
 
        Magictype: [' line ', ' Bar '], restore:true, saveasimage:true} 
 
      }, Calculable:true, Xaxis: [{type: ' Category ', Boundarygap:false, 
 
    Data: [' Zhou ¨¹ one ° ', ' Zhou ¨¹ two t ', ' Zhou ¨¹ three ¨y ', ' Zhou ¨¹ four ', ' Zhou ¨¹ five ', ' Zhou ¨¹ six ¢¨´ ', ' Zhou ¨¹ day ¨? '] }], YAxis: [{type: ' Value ', Axislabel: {formatter: ' {value}°? C '}, Splitarea: {show:true}}], series: [{name: ' most á? High air temperature? ' , type: ' line ', ItemStyle: {normal: {lineStyle: {shadowcolor: ' r GBA (0,0,0,4) '}}}, data: [11,11,15,13,12,13,10]}, {NA Me: ' Most á, low ì¨ª gas temperature ', type: ' line ', ItemStyle: {NORMal: {lineStyle: {shadowcolor: ' Rgba (0,0,0,4) '}}},           
 
      Data: [ -2,1,2,5,3,2,0]}]}; 
 
    mychartsetoption (option); 
 
  } 
 
  ); </script> <divid= "main2" style= "height:500px;border:1px solid #ccc;p adding:10px;" ></div> <scripttype= "Text/javascript" > Requireconfig ({paths: {echarts: ' 
 
      /echarts/echarts ', ' echarts/chart/bar ': '/echarts/echarts ', ' echarts/chart/line ': '/echarts/echarts ' 
 
    } 
 
    }); Require ([' echarts ', ' echarts/chart/bar ', ' echarts/chart/line '), Functio 
 
      N (EC) {Varmychart=ecinit (Documentgetelementbyid (' main2 ')); 
 
        option= {title: {text: ' A 3 floor £¤ disk ¨¬ sell ¨² sales º? ', ¨¦: ' Pure subtext ä? virtual º construct 1 '}, 
 
       ToolTip: {trigger: ' axis ' }, Legend: {data: [' Italian °a to ¨° ', ' ¡è purchase o ', ' into ¨¦ turn? '] }, Toolbox: {show:true, feature: {mark:true, DataView : {Readonly:false}, Magictype: [' line ', ' Bar '], restore:true, SAVEASIMAGE:TR 
 
      UE}}, Calculable:true, Xaxis: [{type: ' Category ', 
 
    Boundarygap:false, data: [' Zhou ¨¹ one ° ', ' Zhou ¨¹ two t ', ' Zhou ¨¹ three ¨y ', ' Zhou ¨¹ four? ', ' Zhou ¨¹ five ', ' Zhou ¨¹ six ¢¨´ ', ' Zhou ¨¹ day ¨ '] }], YAxis: [{type: ' value '}], series: [{name: 
 
      ' Into ¨¦ ', type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}},  
 
      Data: [10,12,21,54,260,830,710]}, {name: ' Pre ¡è buy o ', type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}}, data: [30,182,434,791,390,30,10]}, {name: ' Italian °a to ¨° ', type: ' line ', Smooth:true, 
 
      ItemStyle: {normal: {areastyle: {type: ' Default '}}}, data: [1320,1132,601,234,120,90,20]}]           
 
      }; 
 
    mychartsetoption (option); 
 
  } 
 
  ); 

 </script>

3.2.4 After completing the above operation, the effect chart is as follows:

Well, today is summed up here, I hope to bring some help to you. This is mainly about the use of map control, because the official document on the path configuration is not clear, so will want to take these detours to sum up. The use of other chart controls is simple, and you can refer to the official documentation. Http://echarts.baidu.com/doc/doc.html

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Detailed Echarts use experience summary _jquery

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support