Baidu launches Echarts, tab-Line chart bar chart pie chart Super Tools (Turn)

First, Introduction:

1, draw the data chart, with it, want to draw a line on the page, bar chart, from this easy.

2, the use of this Baidu Echarts.js plug-in, is to draw pictures on the canvas on the display on the page.

Echarts's introduction to the website:

Echarts, abbreviated from Enterprise Charts, business-grade data graph, a pure JavaScript chart library, can run smoothly on PC and mobile devices, compatible with most of the current browser (Ie6/7/8/9/10/11,chrome, Firefox,safari, etc.), the underlying reliance on the Lightweight Canvas class library Zrender provides intuitive, vivid, interactive, highly customizable data visualization charts. Innovative drag-and-drop computing, Data View, range roaming and other features greatly enhance the user experience, giving users the ability to dig and integrate data.

Support for line charts (area charts), Histogram (bar chart), scatter plot (bubble chart), candlestick chart, pie chart (doughnut chart), radar chart (fill radar), chord graph, Force guide layout, map, dashboard, funnel, event River diagram, etc. 12 types of charts, and provide the title, details Bubbles, legends, range, data region, 7 interactive components such as the timeline, toolbox, and more, support multi-chart, component linkage and mashup presentation.

Ii. two ways to introduce documents

echarts plug-in :

Http://echarts.baidu.com/build/echarts-2.2.0.zip

https://codeload.github.com/ecomfe/echarts/zip/2.2.0

1, the label is a single file introduction

<! DOCTYPE html>
2. Introduction of modular Single File
<! DOCTYPE html>
Method Two is the effect of the national map, click the current province, the background color switch to yellow, as follows:
My files directory is like this:
So, when configured, remember to configure the path!!!!
With regard to these two methods of introduction,
1, sure, if the introduction of the label, as we use jquery, before using the jquery class library. And then it started to work.
2, the introduction of the label, is the introduction of the entire echarts this plug-in, the total size is 899KB, compressed jquery size only 90.9kb,~~~~ (>_<) ~ ~ ~ ~ ~ ~. This plugin is really big!!
3, modular single file introduction, which is the introduction of the way is a basic js+ you want to the module, such as echarts.js+ Map.js, a basic JS size is 341KB, a module is the smallest is k.js,5.15kb, the largest module is MAP.JS,437KB, if the project to draw the diagram is not many kinds of, using modular more resource-saving.
Third, notes
The steps to introduce a tagged file:
1. Initialize the Echarts object
var mychart = echarts.init (document.getElementById (' main '));
2. Do configuration option
option={

}
3. Load data to Echarts object
Mychart.setoption (option)
===========================================================
For a few commonly used parameters:
Title
Title, in the upper left
PS: With subtext can be changed by x: Parameter
Subtext:
Subtitle, below the title
Legen:
Legend, in the middle of the head
Boundarygap:true
Category start and end whitespace policies
Type:line:
Type of diagram, line chart
Series:[{type:line}]
ToolTip
Tip box when hovering over a mouse
Tooltip:{trigger: ' Axis '}
Toolbox
Toolbox, in the upper right, do not
Calculable:true:
Drag-and-drop calculation, that is, the bar can be dragged with the mouse.
Xaxis:
Set the horizontal axis
YAxis:
Set ordinate
Series
Most important, generate the chart content.
Markpoint:
Plot points, including the maximum small value, and the inflection point
Markline:
Draw a line, mean line
Splitline:false
Split Line
Grid: Setting up grids
Grid: {
borderwidth:0,/* border=0 on both sides */
x: ' 55px ',/* Change the size of the line chart by modifying the xy x2 y2 */
Y: ' 25px ',
X2: ' 20px ',
Y2: ' 20px ',
},
Trigger:item/axis/* Triggers the style displayed by the Cue box */
ToolTip: {
Trigger: ' Item '
},
ItemStyle:/* To set the inflection point of the pattern and color is also set here, line and the color of the circle will be set directly colors */
ItemStyle: {
Normal: {
Color: ' #03a1e8 ',
LineStyle: {
BorderColor: ' #03a1e8 '
},
Label: {//Show data now
Show:true,
TextStyle: {
Color: ' #555 ',
FontSize: ' 12 '
}
},
},
}
================================================
Last , There are a lot of parameters in the API document, I personally prefer to read the illustrations in the description of parameters, it seems more simple and clear, impressive. For example, this diagram:
A look at how to get rid of the ruler set Axistick parameters, to remove the line is to set the corresponding x, y axis splitline parameters.

Many parameters can be set, reading API documentation is the best idea~
Baidu launches Echarts, tab-Line chart bar chart pie chart Super Tools (Turn)