Home > Developer > Web Develop
Echarts:
From Baidu business front-end data visualization team, based on HTML5 Canvas, pure Javascript Chart Library, bottom-dependent Zrender, a common chart library of commercial products, provides intuitive, vivid, interactive and 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. Chart types support line charts (area charts), histogram (bar charts), scatter plots (bubble charts),K - lines, pie charts (doughnut charts), radar charts (fill radar), chord charts, force-directed layouts, maps, and support for stacking and multi-chart blending of any dimension.
Link is:http://echarts.baidu.com/
Reference in other information:
http://www.highcharts.com/
Http://echarts.baidu.com/doc/example.html#line
http://echarts.baidu.com/doc/doc.html
Http://www.oschina.net/question/tag/echarts?show=hot
Echarts Use step http://www.oschina.net/question/1179358_127869
Https://github.com/ecomfe/zrender
http://www.oschina.net/question/947559_144622
The structure diagram is as follows:
Figure "1"
Core library:Zrender is a lightweight Canvas class library , MVC encapsulation , data-driven , Provide class Dom Event Model , Let Canvas drawing is very different.
Components: A good project must develop the final integration of each function module separately, so that the upgrade and find the problem is very efficient, the above components are most commonly used icons to form the necessary modules.
Graph class: The core of the underlying components of the object-oriented encapsulation, become a real product.
Interface: For easy invocation, theecharts uses a particularly simple JSON configuration to load direct imaging.
The product features very much, I will only use the more common and special needs of the place to share, need more features can go here to check.
First download It's code:
Figure "2"
The structure inside the decompression is:
Figure "3"
Read the documentation directly:Doc
Figure "4"
Among them,doc.html is the official online api&doc , example.html is the official website Example:
Figure "5"
After double-clicking example.html :
Figure "6"
Here each small example is in the example folder, into the example folder to see the content :
Figure "7"
Go back to double-click the example.html page and find a more popular Quick start:
Figure "8"
Click to enter:
Figure "9"
On the left is the configuration JSON file that is called to the outermost interface in the top-most structure , so it is very convenient to briefly describe the method used first:
In general: We provide a copy of the configuration data , and then call the relevant interface Echarts, automatic drawing imaging.
Specifically:
1: Environment configuration
The most streamlined only need these 4 files:
I understand:]
Echarts is a component,zrender has been included in the inside, so do not need to increase their own ;
Echarts-map the diagram class with the component map(Map, association) ;
ESL is the loader that loads the configuration data with the image interface for imaging
JS file in the source code to download everywhere, and index.html inside call these three JS, as well as the addition of data, interface calls, will 3 js is placed in a folder to categorize.
Html in the very source code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ECharts</title>
<script src= "js/esl.js" ></script> <!-- comments:esl.js inside call two additional JS Related content -
<body>
<div id= "main" style= "height:500px;border:1px solid #ccc;p adding:10px;" ></div>
<!-- Note: The final image will be drawn in this div --
<script type= "Text/javascript" >
Require.config ({
paths:{
Echarts: './js/echarts ',
' Echarts/chart/bar ': './js/echarts-map ',<!-- Note: Indicates that the image requires a histogram --
' Echarts/chart/line ': './js/echarts-map '<!-- Note: Indicates that the image requires a graph --
}
});
Require
[
' Echarts ',
' Echarts/chart/bar ',
' Echarts/chart/line '
],
Function (EC) {
var mychart = ec.init (document.getElementById (' main '));
<!-- NOTE: This initialization interface must be called before use to draw the content in the main div --
Mychart.setoption ({
ToolTip: {
Trigger: ' axis '
},
Legend: {
data:[' evaporation ' , ' precipitation ' ]
},
Toolbox: {
Show:true,
Feature: {
Mark: {Show:true},
DataView: {show:true, readonly:false},
Magictype: {show:true, type: [' line ', ' Bar ']},
Restore: {show:true},
Saveasimage: {show:true}
}
},
Calculable:true,
Xaxis: [
{
Type: ' Category ',
Data: [' 1Month', ' 2Month', ' 3Month', ' 4Month', ' 5Month', ' 6Month', ' 7Month', ' 8Month', ' 9Month', ' TenMonth', ' oneMonth', 'Month']
}
],
YAxis: [
{
Type: ' Value ',
Splitarea: {show:true}
}
],
Series: [
{
Name: ' evaporation ',
Type: ' Bar ',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
Name: ' precipitation ',
Type: ' Bar ',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
}
);
</script>
</body>
The effect of the above code:
Figure "10"
Can be done by a more special effect to show:
Figure "11"
Custom X,Y coordinate content;
Customize which curves you need to display, such as curves, bars, etc.;
Figure "12"
You can add interesting contrast information for two curves to the top display.
Figure "13"
Each point can be handled in a variety of special ways:
Shapes (hollow circles, stars, etc.)
Mouse over the top display content (can be all different, fully customizable, very convenient)
Figure "14"
Displays axis information.
Configuration file can do too much, not a description, interested can see the relevant help documentation to learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
