Echarts's extensive web site:
Http://echarts.baidu.com/doc/example.html
0 programming to play the chart:
http://tushuo.baidu.com/?qq-pf-to=pcqq.c2c
Use the chart you want to do with it!
<%@ page language= "java" contenttype= "text/html; CHARSET=GBK "
pageencoding= "GBK"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<title>insert title here</title>
<%@ include file= "/web-inf/tgp-pages/common/common-var.jsp"%>
<script type= "Text/javascript"
Src= "${root}/echarts/build/dist/echarts.js" ></script>
<script type= "Text/javascript"
Src= "${root}/echarts/build/dist/echarts-all.js" ></script>
<script type= "Text/javascript"
Src= "${root}/echarts/doc/asset/js/esl/esl.js" ></script>
<body>
<div id= "Mainmap" style= "height:500px;" ></div>
<script type= "Text/javascript" >
Initialize the Echarts chart based on the prepared DOM
var option;
/*$ (document). Ready (function () {
$.ajax ({
URL: "/tbpweb/sbjk/equipinfo/substation/stationdao.jsp?method=getstation",
ContentType: "Application/x-www-form-urlencoded;charset=utf-8",
Type: "Post",
DataType: "JSON",
Async:false,
Success:function (text) {
id = text;
}
});
});*/
var mychart = echarts.init (document.getElementById (' Mainmap '));
Option = {
Title: {
Text: "Site user access source",
Subtext: "Fictitious",
X: "Center"
},
tooltip: {
Trigger: "It Em ",
Formatter:" {A} <br/>{b}: {C} ({d}%) "
},
Legend: {
Orient:" Vertical ",
x:" Left ",
Data: ["Main Change", "Circuit breaker", "line", "Gate", "Busbar")
},
Toolbox: {
Show:true,
Feature: {
mark: {
Show:true
},
DataView: {
Show:true,
Readonly:true
},
Restore: {
Show:true
},
Saveasimage: {
Show:true
}
}
},
Calculab Le:true,
Series: [
{
Name: "Access source",
Type: "Pie",
Radius: "55%",
Center: ["50%", "60%"],
Itemsty Le: {
Normal: {
Label: {
Show:true,
Formatter: ' {B}: {C} ({d}%) '
}
}
},
Data: [
{
value:335,
Name: "Primary Change"
},
{
value:310,
Name: "Circuit Breaker"
},
{
value:234,
Name: "Line"
} ,
{
value:135,
Name: "Gate"
},
{
value:148,
Name: "Bus Bar"
}
]
}
]
};
Loading data for Echarts objects
mychart.setoption (option);
</script>
</body>
Echarts is the best visualization tool I've ever contacted and the fastest-growing software, and hopefully it will become a world-class open source project as soon as possible.