How to Upgrade Run Dry statements built echarts version

Description of Requirement

Echarts is an open source JavaScript implementation of visualization library, which provides intuitive, interactive rich, highly personalized custom data visualization charts. Echarts new version will add some new features for users to choose to use, the updated version of the official website after echarts, how to synchronize the updated version of the tool in a report echarts it?

problem analysis

echarts as a third-party chart Run Dry statements introduced, so just need to echarts core files into the corresponding directory on it.

Specific operation

1, echarts official website to download the file

Access https://www.echartsjs.com/zh/download.html
in accordance with Method II Download the complete echarts compiled file from GitHub, to download the 4.4.0 version, for example, as follows:

imagepng
Click on 4.4.0 back Dist will enter into the following interface:

imagepng
Then click the parent directory, go to the home directory echarts:

imagepng
Finally, click clone or download the file for a complete echarts.

2, Run Dry Reporting Configuration

The acquired after unpack the archive and the incubator-echarts-4.4.0 entire folder into the demo \ under raqsoft, where you can rename it folder: echarts4.4 to distinguish between versions.

imagepng
Note: If you need to use echarts2 version, do not delete the built-in echarts2 folder and its contents below.

3, showing test

When the various versions of the test echarts reports show normal, indicating that the upgrade has been successful.
The following is a description of each version of the test.

1) echarts2 test version

<1> echarts2 template:

<div ID = '$ {ID}' style = "width: $ {} PX width; height: height $ {} PX"> </ div> 
 <Script type = "text / JavaScript"> 
// Data preprocessing may here complete 
 the require ( 
[ 
 'echarts', 
 'echarts / Chart / Line' // load module needed 
], 
 function (EC) { 
 var myChart = ec.init (document.getElementById ( '$ {ID}')); 
 option = {var 
// copy downloaded from the official website html option portion disposed 
 }; 
 myChart.setOption (option); 
 } 
 ); 
</ Script>

<2> echarts2 exemplary report files

Echarts2.zip

2) echarts3 above test

<1> echarts3 above template:

<div ID = '$ {ID}' style = "width: $ {} PX width; height: height $ {} PX"> </ div>    
<Script type = "text / JavaScript"> 
// Data preprocessing may done here 
	var $ {} _dom ID = document.getElementById ( '$ {ID}'); 
	var = myChart echarts.init ($ {ID} _dom); 
 var Option = { 
// copy downloaded from the official web portion html configuration option 
 }; 
 myChart.setOption (option); 
</ Script>

 

<2> echarts3 exemplary report files

Echarts3.zip

<3> echarts4 exemplary report files

echart4.zip

Published 48 original articles · won praise 13 · views 20000 +

Guess you like

Origin blog.csdn.net/zozoxxma/article/details/103710545