Csdn open-source summer camp Baidu data visualization practices echarts (1)

Overall Plan
(1) answer questions:
By understanding Lin Feng's topic on air quality in China's major cities, China's Ten-Year Economic Time-Space roaming, and China's population flow tide, he covers population, economy, and people's livelihood, here I select the Chinese college entrance examination as my entry point.
The college entrance examination is an eternal topic. It is a war without smoke that you and I deserve. Some people once said: Every College Entrance Examination child bears the hope of several generations, and every college entrance examination has many eyes behind it. How many times can my life beat? Although I lost a lot, I will gain a lot in the end.
(2) question
Topics on enrollment and enrollment in each province and city
(3) Collect data
To do well, you must first sharpen your tools. Data correctness and normalization will seriously affect the data trend. The number of registrants and registrants in each province and city that originally planned to collect data for 2004-years is hard to collect data for and years. To ensure data accuracy, therefore, the data is selected as the number of applicants and enrollment in the-Annual Report.
For example, Beijing data:

(4) preliminary overall planning
By understanding the basic types of echarts, select the appropriate echarts chart to show the number of applicants for the national college entrance examination and enrollment. I drew a first draft, and the content will be constantly modified. The first draft is as follows.

(5) Interpreting echartsapi
5.1 Glossary
Basic Terms

Term	Description
Chart	It refers to a complete chart, such as a line chart, pie chart, or other "Basic" chart types, or a "mix and match" chart composed of a basic chart, which may include the coordinate axes, legends, etc.
Axis	A coordinate axis in the Cartesian coordinate system, which can be divided into category axis and numerical axis.
Xaxis	The horizontal axis in the Cartesian coordinate system, which is usually the category axis by default.
Yaxis	The vertical axis in the Cartesian coordinate system, which is usually a numerical axis by default.
Grid	Drawing grid except coordinate axis in Cartesian coordinate system
Legend	Legend, indicating the association between data and graphics
Datarange	Value range selection. It is often used to select a value range when displaying region data.
Datazoom	Data Area scaling. It is often used to select a visible range when displaying big data.
Toolbox	Auxiliary toolbox and auxiliary functions, such as adding labels and selecting and zooming boxes
Tooltip	Bubble prompt box, often used to show more detailed data
Timeline	Timeline, usually used to display multiple copies of the same group of data in the time dimension
Series	Data series, a chart may contain multiple series, each series may contain multiple data

Chart term
 

Term	Description
Line	Line chart, stacked line chart, Area Chart, stacked area chart.
Bar	Column chart (vertical), Stacked column chart, bar chart (horizontal), stacked bar chart.
Scatter	Scatter chart, bubble chart. A scatter chart must contain at least two vertical and horizontal data. When a higher dimension data is added, it can be mapped to a color or size. When it is mapped to an hour, it is a bubble chart.
K	A k-line chart and a candle chart. It is often used to display stock transaction data.
Pie	Pie Chart, ring chart. A pie chart supports two Nightingale rose chart modes: radius and area.
Radar	Radar chart: Fill the radar chart. Common charts for displaying high-dimensional data.
Chord	A chord chart. It is often used to display relational data. The outer layer is a ring chart, which can reflect the proportion of data, and the inner layer is a string connected to each slice, which can reflect relational data.
Force	Force-directed layout chart. It is often used to display the clustering layout of complex relational networks.
Map	Map. The built-in world map, map data of 34 provinces, cities, and autonomous regions in China, and the map type can be extended using standard geojson. Supports SVG extended map applications, such as indoor maps, sports fields, and object structures.

(6) Introduction of echarts
Echarts provides multiple import methods. Please select an appropriate method based on your project type:
6.1 modular package Introduction
It should be noted that package introduction provides the maximum flexibility in the development stage, but is not suitable for direct launch. Reducing the number of requested files is the most basic but important rule in front-end performance optimization, make sure to compress the file connection during the launch.

// From echarts examplerequire. config ({packages: [{Name: 'echarts', Location :'.. /.. /src ', main: 'echarts'}, {Name: 'zrender', Location :'.. /.. /.. /zrender/src ', // zrender and echarts are in the same level directory main: 'zrender'}]});

6.2 modular single file Introduction
If you use modular development but do not have your own packaging and merging environment, or you do not want to introduce third-party Library source files in your project, we recommend that you use single file import, like introducing a modular package, you need to be familiar with modular development. This method is just to help you combine the commonly used chart combinations in advance. You only need a loader that complies with AMD specifications, introduce an echarts-related Js. As you have found, multiple single files in different combinations have been generated in the build folder. For details, you only need to use one of them based on your needs:

Echarts. JS: Compressed, including all charts except maps
Echarts-original.js: uncompress, available for debugging, including all charts except maps
Echarts-map.js: compress, full charts, including World, China and 34 provincial/municipal map data
Echarts-original-map.js: unzipped, available for debugging, full charts, including World, China and 34 provincial/municipal map data

The configuration is as follows:

// From echarts examplerequire. config ({paths: {'echarts ':'. /JS/echarts ', 'echarts/chart/bar ':'. /JS/echarts, // point the required chart to a single file 'echarts/chart/line ':'. /JS/echarts '}});

After configuring require. config, you can use echarts through dynamic loading.

// From echarts examplerequire (['echarts', 'echarts/chart/line', // load the required chart 'echarts/chart/bar'], function (EC) {var MyChart = EC. init (dommain); var option = {...} myChart. setoption (option );});

6.3 introduction of tagged single files
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 srcipt label to introduce the file, and forget the require. After the srcipt label is introduced into echarts, you can directly use two global namespaces: echarts, zrender, however, it should be noted that excanvas depends on the body label inserted into the canvas node to judge the support of the canvas. If you place the script label referenced by echarts in the head's IE8-browser, an error will occur, the solution is to move the tag to the body (after ).
In the label-based introduction environment, the reference of common modules can be directly obtained through the namespace, which is the same as the path Structure in modular mode, such:
Echarts. Config = require ('echarts/config'), zrender. tool. Color = require ('zrender/tool/color ')

//from echarts example<script src="example/www2/js/echarts-plain.js"></script><script>    var myChart = echarts.init(domMain);    var option = {        ...    }    myChart.setOption(option);</script>

(7) code parsing
First, a line chart showing the number of registrants, number of registrants, and admission ratio in a single city is displayed. The following example shows the number of registrants and number of registrants in Beijing over the years. (The number of registrants in 2014 is unknown ).

Combination of bar chart and line chart (01 series)

Combination of bar chart and line chart (02 Series)

Procedure:
7.1
Download echarts address: http://echarts.baidu.com/
Download zrender: http://ecomfe.github.io/zrender/index.html
7.2

After downloading echarts, decompress the file, for example:

Select enter the doc folder and select example:

Then select the WWW Folder:

Select the JS folder in the WWW file:

There are three JS files that need to be introduced to the package:
(1 echarts. js
(2 ESL. JS:

(3 echarts-map.js

7.3

Copy the JS folder and create an HTML file in the same path.


Beijing.html code:

<! Doctype HTML> <HTML lang = "en"> 

Well, this week we will summarize that the workload for collecting and sorting data is quite large. For more details, please refer to the official documentation. Thank you!