Front-end data visualization echarts.js usage Guide

First, the outset

First of all here to thank my company, because the company needs above the new (wonderful) needs, let me lucky to learn some fun and interesting front-end technology, front-end technology fun and more practical I think it should be a number of front-end data visualization this aspect, the current market data visualization framework dazzling, For example: D3.js, Hightcharts.js, Echarts.js ...... As the company's demand for this project is 1, the development time is short, so it also restricts the use of d3.js. 2, to try to reduce the cost of development, so also can not use Hightcharts.js (Hightcharts is a personal free, commercial payment framework). So I finally chose echarts.js under repeated comparison.

Ii. advantages and general situation of echarts.js

Echarts.js as one of the domestic it three giants Baidu's launch of a relatively successful open source project, in general, there are some advantages

1, Echarts.js easy to use

Echarts.js's official documentation is detailed, and there are a number of examples available on the website for everyone to use.

2, Echarts.js support packaging on demand

The Echarts.js website provides tools for online building, which allows you to select the modules you need to use when building projects online, thus reducing the volume of JS files.

3, Echarts.js Open source

4. Support Chinese map function

This is not in any of the other frameworks, so it's nice to have this feature.

But Echarts.js also has some bad places, such as:

1, echarts.js of large size

A basic echarts.js is about 400K, which is relatively large relative to D3.js and hightcharts.js.

2, Echarts.js of the poor customization

When it comes to Echarts.js's poor customization, it's more than just including echarts.js,hightcharts.js, because this type of data visualization framework is mostly high-level, so you just need to set up the configuration when you're using it, but if it's not supported in the drawing configuration What about the chart, then you just give up and try to use a different frame

Overall: from the big direction above, Echarts.js is still worth learning to learn to use, because Echarts.js got the attention of Baidu team, in git above the update is also more frequent, so there will not be some more serious bug, and finally this framework is the framework of the configuration file is quite detailed, but the interactive API documentation, although there is a description, But there are no examples to prove that this is probably one of the shortcomings I think.

Third, the application of Echarts

The first thing to note is that the Echarts framework is very much configured, so don't try to remember the methods in this framework, which is unlikely. But since this framework has more configuration file parameters, we need to learn how echarts is going to classify it.

1, the first echarts of the graphical presentation is mainly through the configuration method to achieve (setOption), and then the graphical tags are initialized, and finally the configuration method (SetOption) assignment to the initialization graph, detailed configuration file please poke here, Here I would like to introduce the experience of learning about configuration files, the more common configuration is generally as follows:

The above is marked with a red box is echarts basic configuration, but also I think the learning Echarts must master the configuration, Some other configurations such as what time axis. Visualmap Components I think these are the same things, so this part is only when your business needs to be used, that is to say, this part of the knowledge I think offering will be able to do it. (Correction: The content of the icon hover should be corrected to the content of the mouse hover) , the following I will explain the use of echarts.js, first I download the default lite in the official website, as follows: http://echarts.baidu.com/builder.html, direct download (recommended in the development of the use of the source version, easy to debug)

3.1 Echarts.js Entry basic Small Project 1

HTML and JavaScript code:

<! DOCTYPE html>
Run the effect as if you need to watch it online please poke here
Note: Here the case is the most basic, but there is still a knowledge point, that is, when using echarts.js must be configured xaxis,yaxis,series these three parameters, if you do not want to set the initialization can be set to the empty JSON can be, Otherwise it will be out of error, at the same time to ensure that the object before the Echarts.init is wide, or else there will be errors
3.2 Echarts.js Multi-series integrated use demo
Before explaining this case, let's first assume a proposition, assuming that you want to count the purchase amount of a store for a week and the sales amount for a week, where the purchase amount is represented by a histogram, the sales amount is represented by a line chart, and then the maximum and minimum values for the week are also indicated, and the average number of sales and purchases is required Purchase amount is [200,312,431,241,175,275,369], sales amount [321,432,543,376,286,298,400]
This problem is not really difficult, think, in fact, is a series of charts applied to a canvas above the process, in order to brief the length of the article, so do not post all the code, only the main key of the code, the code is as follows:
            series:[{name: ' Purchase Amount ', type: ' Bar ', data:[200,312,431,241,175,275,                        369], Markpoint: {data: [{type: ' Max ', Name: ' Max '},                {type: ' min ', Name: ' Minimum value '}]                            }, markline:{data:[{type: ' Average ', Name: ' Average ', itemstyle:{                        normal:{color: ' Green '}                }}]}},{name: ' Sales Amount ', type: ' line ',                        DATA:[321,432,543,376,286,298,400], Markpoint: {data: [                {type: ' Max ', Name: ' Max '}, {type: ' min ', Name: ' Minimum value '}]},                     markline:{data:[   {type: ' Average ', Name: ' Average ', itemstyle:{normal:{color: ' Blue ' }                        }}                    ]                }            }]
Implementation results:
If you want to see the full code, please poke here and fork yourself down.
3.3 Echarts.js-Response implementation
Echarts response in the Echarts official website above introduction more detailed, here the principle and CSS3 media query a bit similar, But Echarts.js's response in addition to supporting the media query under different circumstances of the corresponding support, according to the aspect ratio to the corresponding method, but in the official document is still a bit flawed, such as: One is the case of the response is not related to the response of the series, the other is to follow the demo to do, will find every time to Refresh the page in order to get the result of the response, so I will write a simple case to solve these problems, the data style is the same as the above example
Here, all the JS code is posted:
var echart=echarts.init (document.getElementById (' main1 ')); var option={baseoption:{title:{text: ' Simulation store sales week ', s                Ubtext: ' Virtual data '}, legend:{data:[' purchase amount ', ' Sales Amount '},                xaxis:{data:[' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday '}, yaxis:{ }, tooltip:{show:true, Formatter: ' series name: {a}<br/> Category: {b }<br/> Value: {c} '}, series:[{name: ' Purchase Amount ', type: ' B                             Ar ', data:[200,312,431,241,175,275,369], Markpoint: {data: [                        {type: ' Max ', Name: ' Max '}, {type: ' min ', Name: ' Min '}                ]}, markline:{        data:[{type: ' Average ', Name: ' Average ', itemstyle:{normal:{                        Color: ' Green '}}                    ]}},{Name: ' Sales Amount ', type: ' line ',                            DATA:[321,432,543,376,286,298,400], Markpoint: {data: [                        {type: ' Max ', Name: ' Max '}, {type: ' min ', Name: ' Min '} ]}, markline:{data:[{type: ' AV                                Erage ', Name: ' Average ', itemstyle:{normal:{color: ' Blue '             }                            }}                        ]                    }                }]          },  media:[{//small with 1000 pixels when responding query:{maxwidth:10                            XX}, option:{title:{show:true,        Text: ' Test it '}}]        }; The OnResize event is triggered every time the window size changes, and this time we assign the size of the Echarts object to the size of the window to achieve the same dimensions of the Chart object as the Window object window.onresize = echart.resize        ; echart.setoption (option);
Effect Show: Originally wanted to show GIF, but the recording time is too serious, so it can only be sent to compare pictures when no refresh
3.4 Echarts API Interaction
First, let's sort out the API classifications in the official documentation, and the approximate API can be divided into four categories
Here, we'll explain. The Echarts object is mainly composed of some destruction objects (dispose), a registered map (REGISTERMAP), an initialization object (Echarts.init), an associated object (connect), a setting that belongs to the global property, Echartsinstance This is a get or set that contains some of the attributes in the Echarts diagram, gets the width (getwidth, getheight), gets the configuration (getOption), sets the configuration (setOption) Operation action and events these two operations in the already very clear, so do not explain, the specific use of the method to be linked to the business is meaningful, so here does not provide demo, I believe that you can see the document is able to understand the actual.
Four, Echarts frequently asked questions solves
1, when the x-axis to render too much data will appear only part of the rendering, but the data display in the chart (for example, each column in the histogram) will automatically zoom the width, so it will cause the x-axis and the information in the diagram does not match the problem, the solution is to set the x-axis axislabel: {interval:0} This attribute problem can be solved, the y-axis is used the same way
2, in order to make the Echart chart in response to the size of the browser changes, so need to add window.onresize = echart.resize before setting up the configuration; Specific Reference 3.3 Example
Front-end data visualization echarts.js usage Guide