This article introduces a Echarts tool class Echart.js, which is used to make statistical charts based on ECHARTS3.
First, the tool class features are as follows:
- Includes histogram, line chart and pie chart, can realize the switch between these three kinds of charts;
- Support title and subtitle;
- Support legend;
- Support Save as Picture;
- Support x-axis, y-axis name;
- Support ToolTip, and the data with the unit;
- Support Display data labeling;
- Support x-axis data scaling;
Note: When building a echarts script, you need to include a histogram, pie chart, line chart, Cartesian coordinate system, title, Legend, Cue box, callout, data area scaling, and toolbar components.
Second, the interface is described as follows:
- Containerid:the id "string" of the HTML container;
- Title : Chart title "string";
- subTitle: Chart sub-title "string";
- xName:x-axis name "string";
- yname:y-axis name "string";
- Unit :Y-axis units "string";
- Click : Chart Click event "function";
- Xviewrange:X-axis display range "[Min,max]";
- yviewrange:Y-axis display range "[Min,max]";
- Data : charts;
- function:show (p_type): Displays the chart. P_type "string", Value "bar", "line", a value in "pie";
The chart Data format example is as follows:
[{Name: "number", Values:
{
"A": 1,
"B": 2
}},{name: "Area", Values:
{
"A": 0.1,
"B": 0.2
}}
]
Description
- Data array;
- Data subkey:
Name : data names;
Values : The data object, where key is the data name, and the value is the data value;
Three, example:
1 <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 2 3 4 <script type= "Text/javascript" src= "/jslib/echarts/echarts3.min.js" ></script> <script type=" Text/javascript "src="/jslib/echarts/echart.js "></ Script> 7 <body > 9 <!-- Prepare a DOM-->10 <div id= "main" style= "height:400px" > </div>11 13
page Code
The page introduces Echarts Library echarts3.min.js and Tool class Echart.js, prepares a container for echarts in body <div id= "main" ></div>
1 varMyChart;2$ (document). Ready (function(){3 4 varData=[{name: "2014 Sales", Values:5{//Yfileds[0]6"Shirts": 1,7"Woolen Sweater": 2,8"Chiffon Sweater": 3,9"Pants": 4,Ten"High Heels": 5, One"Socks": 6 A}},{name: "2015 Sales", Values: -{//Yfileds[1] -"Shirts": 2, the"Woolen Sweater": 3, -"Chiffon Sweater": 4, -"Pants": 5, -"High Heels": 6, +"Socks": 7 -}},{name: "2016 Sales", Values: +{//Yfileds[1] A"Shirts": 1, at"Woolen Sweater": 5, -"Chiffon Sweater": 2, -"Pants": 6, -"High Heels": 7, -"Socks": 6 - }} in ]; - to //Initializes a Echarts instance based on the prepared Dom +MyChart =NewEchart ({ -Title: "Annual sales statistics of all kinds of garments", theSubTitle: "2014-2016", *Yname: "Sales", $XName: "Clothing Type",Panax NotoginsengContainerid: "Main", - Data:data, theUnit: "Set", +Click:function(p_params) { A alert (p_params.name); the }, +xviewrange:[0,24] - }); $ $Mychart.show ("Bar"); -});
JS Code
:
Code Address: Http://git.oschina.net/wander_chang/ECharts_tools
Echarts Widget for charts