How to introduce echarts into the project
(1) lay a solid foundation
Thank you, Miss Lin Feng! Give us careful guidance. The reason why we learned the echarts and zrender chart components is to apply the chart to our actual situation, so that the chart fighters can present it to users in a more humane way. All components in echarts must be familiar. The following example uses line as an example.
(2) There are three ways to introduce echarts into the project:
2.1) method 1-modular package Introduction
The modular package introduction mode is also called the development mode. It is the best method during development, whether it is to develop echarts or use echarts, because the files are not merged and compressed, if there is an error, you can immediately locate the error so that you can quickly know where the problem may occur. However, this is not suitable for online publishing. The file is too large and loading is too slow. In this way, the Internet will be scolded.
First download zrender to the local directory, and put it in the same directory as echarts.
Create an HTML file in the echarts/doc/example/WWW file. All the JS files used are included in the JS file.
Contains echarts. JS, echarts-map.js, ESL. js three, in fact, only two, echarts-map.js is not used.
The HTML code is as follows:
<! Doctype HTML> <HTML lang = "en"> 2.2) method 2-modular single file introduction (recommended)
Here, we only use line charts. If you don't need other charts, it will be a waste of packaging them together. At this time, you can build them in the build directory. JS file to build a more close-fitting echarts single file.
To sum up, you need to take the following four steps to introduce echarts into modularization:
1. Introduce a module loader, such as ESL. js or require. js.
2. Prepare a Dom with the size (width and height) for echarts (of course, it can be dynamically generated)
3. Configure the echarts path for the module loader and link it to echarts. js from the current page. See the preceding description.
4. dynamically load echarts and start using it in the callback function (Let me say, when you make sure that the same page has already been loaded with echarts, directly require ('echarts '). init (DOM)After downloading the node, install it.
Open the build folder and see the following file:
Here I have created a new build01.bat that is used to generate a single echarts. jsnode build.js optimize=true plain=false exclude=map output=echarts.jsOf course, you can also run node. js build scripts through command line parameters in the terminal.
Syntax:
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
| Name | Description |
|---|---|
| Optimize | Whether to compress. The default value is false. |
| Exclude | Non-packaged charts. Multiple charts are separated by commas. All charts are used by default. |
| Output | Output package address. The default value is echarts. js. |
| Plain | Whether to package ESL. You can use the scripts label to import the package. The default value is false. |
{ // appDir: './', baseUrl: '../src', name: 'echarts', packages: [ { name: 'zrender', location: '../../zrender/src', main: 'zrender' }, { name: 'echarts', location: '.', main: 'echarts' } ], include:[ 'echarts/chart/line' ], out: 'echarts.js'}
<! Doctype HTML> <HTML lang = "en"> 2.2) method 3-label-based Single File Import (recommended)
Starting from 1.3.5, echarts provides label-based introduction. If your project is not developed based on modularization or cmd specifications (for example, seajs), it may be inconvenient to introduce amd-based echarts, we recommend that you use the srcept label type to introduce and forget require. After the srcept label is introduced into echarts, you can directly use two global namespaces: echarts and zrender. For details, refer to the echarts label type introduction.
A single file that can be directly introduced is as follows:
1. echarts-plain.js: Compressed, including all charts except maps
2. echarts-plain-original.js: uncompress, can be used for debugging, including all charts except maps
3. echarts-plain-map.js: Compressed, Full chart, including World, China and 34 provincial/municipal map data
4. echarts-plain-original-map.js: uncompress, can be used for debugging, full charts, including World, China and 34 provincial/municipal map data
Method: Create an HTML file in the WWW folder. Of course, the location can be freely stored. The JS file used is on the Baidu echarts server. The Code is as follows:
<! Doctype HTML> <HTML lang = "en">
Summary:
The final running results of the three methods are the same, as shown in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
