Simple jquery echarts example

Recently, as a software engineering project, because of the design of the histogram and pie chart design, the first reaction with the original JS write must be very troublesome, so I ask whether not to do, but our PM iron heart to do, and finally forced me to find this powerful chart library, haha, thank you here for PM Li Jia. (When I found it was also compatible with ie6-8, really fried chicken moved!)

Echarts provides common charts for commercial products, the bottom layer is based on Zrender (a new Lightweight canvas class library), creating basic components such as coordinate systems, legends, hints, toolbox, and building line, histogram, scatter, chart, pie, radar, map, chord charts, Force-oriented layout, dashboard, and funnel charts, while supporting arbitrary dimensions of stacking and multiple-graph mixed presentation.

Nonsense not much said, immediately into the use of echarts.

First we enter Echarts's official website http://echarts.baidu.com/index.html (to the Baidu front-end team salute), in the future download Echarts.

Download a good catalog:

As a beginner, we just look at the build file, which contains the related resource files we need to make the chart.

There are three ways to introduce echarts packages, and three of the official documents are specifically introduced http://echarts.baidu.com/doc/doc.html# introduced into Echarts.

Here I use the official recommended modular single file introduction, first of all need to familiarize with the modular development. Echarts is an AMD-compliant modular loader, AMD specifications believe that everyone is not unfamiliar, it is JavaScript client (is the browser) development specification, and Node.js has COMMONJS development specifications. If you are not familiar with the AMD specification, you can refer to the article:

Development rules in AMD---browsers

As mentioned earlier, Daniel has made a lot of effort to achieve the same modular approach as node.js.

But the browser environment is different from the server side, its module has an HTTP request process (and the Node.js module file is local), most of the request process using the script tag,script default asynchrony makes it difficult to achieve the same format as Node.js module.

Modules/wrappings makes implementation a reality. Although the node.js is not exactly the same as the module, but there are many similarities, so familiar with the node.js programmers have some intimacy.

But Node.js is ultimately a server-side JavaScript, and there's no need to put these rules into browser javascript environments.

At this time AMD was born, it is all called asynchronous module definition. From the name to see it is suitable for the script tag. It can also be said that AMD is specifically designed for browsers in JavaScript environment design specifications. It absorbs some of the advantages of COMMONJS, but does not copy its format. AMD started as the transport format for COMMONJS, because it was unable to reach a consensus with COMMONJS developers. It has its own wiki and discussion group.

AMD designed a concise write module API:

Define (ID, dependencies, Factory);

which

ID: module identification, can be omitted.
Dependencies: Depends on the module that can be omitted.
Factory: The implementation of a module, or a JavaScript object.
The ID follows the COMMONJS Module Identifiers. The order of the dependencies elements corresponds to the factory parameter one by one.

The following is a simple three-tier architecture developed using AMD Mode (Basic library/UI layer/Application layer):

Base.js

Define (function () {
return {
Mix:function (source, target) {
}
};
});

Ui.js

define ([' base '], function (base) {
return {
Show:function () {
Todo with module base
}
}
});

Page.js

define ([' Data ', ' UI '], function (data, UI) {
init here
});

Data.js

Define ({
Users: [],
Members: []
});

The above also demonstrates the three usages of define
Define a module without dependencies (base.js)
To define a dependent module (ui.js,page.js)
Defining a Data Object Module (data.js)

Careful will find that there is another one does not appear, that is, the named module

4, named module

Define (' index ', [' data ', ' base '], function (data, base) {
Todo
});

A named module is not recommended most of the time, generally by the packaging tools to merge multiple modules into a JS file to use.

The order of the dependencies elements mentioned earlier and the factory one by one corresponds, in fact, not very rigorous. AMD began to get rid of the shackles of Commonjs, groundbreaking to put forward their own modular style. But then again made a compromise, compatible with the Commonjs modules/wrappings. That's how it can be written.

5, Packaging module

Define (function (Require, exports, module) {
var base = require (' base ');
Exports.show = function () {
Todo with module base
}
});

Regardless of the extra layer of functions, the format and Node.js are the same: use require to get the dependency module and use exports to export the API.

In addition to define, AMD also retains a keyword require. Require as a global identifier reserved for the specification, can either be implemented as a module loader or not implemented.

OK, next I'll show you the specific introduction:

<!doctype html>
<meta charset= "Utf-8" >
<body>
<div id= "main" style= "height:300px;" ></div>
<script type= "Text/javascript" src= "Echarts/build/dist/echarts.js" ></script>
<script type= "Text/javascript" >
Require.config ({
Paths: {
Load relative path here
Echarts: "Echarts/build/dist"
}
});
Require
[
The echarts here represents the path in the paths.
"Echarts",
"Echarts/chart/bar"
],<br>//callback function
Function (ex) {
}
);

</script>
</body>

JS require () represents the request to create an icon, first to list the required chart library resources, here is to load the Bar.js file, so you need to introduce the module "Echarts/chart/bar." There are also a number of charts in the echarts, such as pie (PIE), map, and so on.

Now that we have loaded the graph class we need, the next thing to do is simple---insert the required component for the corresponding diagram class.

<!doctype html>
<meta charset= "Utf-8" >
<body>
<div id= "main" style= "height:300px;" ></div>
<script type= "Text/javascript" src= "Echarts/build/dist/echarts.js" ></script>
<script type= "Text/javascript" >
Require.config ({
Paths: {
Echarts: "Echarts/build/dist"
}
});
Require
[
"Echarts",
"Echarts/chart/pie"
],
Function (EC) {
var mychart=ec.init (document.getElementById ("main"));
var option = {
Title: {
Text: "View the reimbursement of enterprise Departments",
X: "Center"
},
ToolTip: {
Trigger: "Item",
Formatter: "{a} <br/> {B}: {C} ({d}%)"
},
Legend: {
Orient: "Vertical",
X: "Left",
Data: ["Part1", "Part2", "Part3", "Part4"]
},
Toolbox: {
Show:true,
Feature: {
Mark: {Show:true},
DataView: {Show:true,readonly:false},
Restore: {show:true}
Saveasimage: {shwo:true}
}
},
Calculable:false,
Series: [
{
Name: Pie chart instance,
Type: "Pie",
Radius: "55%",
Center: ["50%", "60%"],
Data: [
{value:100,name: "Part1"},
{value:200,name: "Part2"},
{value:300,name: "Part3"},
{value:400,name: "Part4"}
]
}
]
};
mychart.setoption (option);
}
);
</script>
</body>
You can see that the second parameter of require () is a function () {}, which should be a callback function waiting for the resource to load and execute, which provides the information needed to create the chart:

The first thing to get is the object that needs to be created, which is fetched using the DOM method.

Second, the dataset is stored in a JSON-like format into option, and finally passed on to the object to be created.

You can see the child objects in the option object, all with different information, such as titles title, Cue box (tooltip), etc., and more component information can be viewed in official documents

http://echarts.baidu.com/doc/doc.html# Options

Finally open the browser to enjoy a simple use of Echarts chart:

　　

When I opened the time also saw a lot of dynamic and playful effects, are worthy of our research.

However, the framework is the framework, I hope you learn the framework before you must learn the original js~ so use these frameworks will be handy!