Advanced use of echarts

The previous article introduced the use of bar charts in echarts. From the demo, we can see that both the bar chart, pie chart, and line chart are imported to JS and the option parameter is prepared. For ease of use, the next step is encapsulation.

We separate the Graphic Type and graphic data from the graphic display, encapsulate an independent JS file, as long as it is passed to the graphics type parameters and graphic data parameters to display the corresponding graphics, in this way, there will not be too much redundant code. Next we will talk about encapsulating JS files.

Is it a bar chart that encapsulates the JS pie chart of a bar chart, or is it a JS that encapsulates all the images? If we encapsulate it separately, we extract the graphic data changed in the option content. If we encapsulate a JS, different image option formats are different, encapsulated JS is equivalent to a separate encapsulated set. The specific encapsulation needs to be tailored to the actual needs of the project for ease of use.

Separate JS encapsulation: taking the bar chart as an example.

1. initialize JS

// Jsonarray graphic data array reportname graphic display title function initechartsbar (JSON, reportname) {require. config ({paths: {echarts: 'js/echarts', // here is the path of the echarts file you reference 'echarts/chart/bar': 'js/echarts ', // note that, except for the configuration file echarts-map used by mapchart, all the other configuration files referenced by the image are echarts, this is also the difference between a general image and a MAP: 'echarts/chart/line': 'js/echarts', 'echarts/chart/pie ': 'js/echarts '}}); require (['echarts', // The class 'echarts/chart/bar',], function (EC) {var MyChart = EC. init (document. getelementbyid ('main'); // place where the chart is initialized. There must be a place on the page to display the chart. Its ID is mainoption = getoptionbyarray (JSON, reportdesign ); // obtain the option image MyChart. setoption (option); // display image });}

2. Obtain option data

function getOptionByArray(json, reportName) {var option = {title : {text: reportName,x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient : 'vertical',x : 'left',data:json.getText},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},calculable : true,series : [{name:json.getText,type:'pie',radius : '55%',center: ['50%', '60%'],data:json.getValue}]};return option;}

3. Reference JS

If only one image is displayed in one interface, you only need to reference it in the file head label. As follows:

If multiple images are displayed on the page, you need to dynamically import the encapsulated JS file after determining the selected image, as shown below:

$. Getscript (): remotely calls Js. When the program is running, it dynamically loads the JS files in the path into the program based on the JS path provided by the Program for use by the program.

Manually write an HTML file and test the Remote Call of the js method. It cannot be passed in Firefox and Google browsers, but it can be passed in IE browsers. If the test fails, try another browser or create a web project test in eclipse.

Advanced use of echarts