转载地址:http://blog.csdn.net/qq_34378776/article/details/53862723
一直以来我都使用JFrechart框架做图表,这种基于Java的组件比较笨重,我总是神烦,需要费脑子编写统计SQL语句,还需要写Java代码想办法生成图表,而使用了百度ECharts我的工作重心只需要放在获取数据,轻松多了,不扯淡,直接上代码
如何动态组织百度ECharts数据
data: (function(){
var res = [];
var len = departmentName.length;
while (len--) {
res.push({
name: departmentName[len],
value: totaldata[len]
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
改写这个模板就可以了
下面给出饼状图、折线图、柱状图、漏斗图等示例,要是需要玩更牛逼的图,让客户加钱,你再参考百度ECharts官网就可以了,其实上面的图就够你用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--导入Echarts支持包-->
<script src="echarts.js" type="text/javascript"></script>
<title>QuickStart</title>
</head>
<body>
<!--为Echarts准备一个Div放置图表-->
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
//将echart初始化到div中
var myChart=echarts.init(document.getElementById("main")) ;
//指定图表的配置项和数据
var option={
title:{
text:"Echarts HelloWorld!!!"
} ,
tooltip:{} ,
legend:{
data:'销量'
},
xAxis:{
data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
yAxis:{} ,
series:{
name:'销量',
type:'bar' ,
data:[5,20,36,10,10,20]
}
} ;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option) ;
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图</title>
<!--导入JQuery支持-->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<!--导入百度ECharts支持-->
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript">
$(function () {
var myChart=echarts.init(document.getElementById("main"));
var dataAxis = [];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
dataAxis.push(i) ;
}
option = {
title: {
text: '特性示例：渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
myChart.setOption(option) ;
});
</script>
</head>
<body>
<div id="main" style="width: 1600px;height: 1000px"></div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
<!--导入JQuery支持-->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<!--导入Echarts-->
<script type="text/javascript" src="echarts.js"></script>
<!--编写JS生成图表-->
<script type="text/javascript">
$(function () {
//1.初始化Echarts
var myChart=echarts.init(document.getElementById("main")); //这里不允许使用JQuery简化
//2.创建Oprion
var option={
title:{
text:'折线图堆叠'
} ,
tooltip:{
trigger:'axis'
} ,
legend:{
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
} ,
grid:{
left:'3%' ,
right:'4%' ,
bottom:'3%' ,
containLabel:true
} ,
toolbox:{
feature:{
saveAsImage:{}
}
} ,
xAxis:{
type:'category',
boundaryGap:false ,
data:['周一','周二','周三','周四','周五','周六','周日']
} ,
yAxis:{
type:'value'
} ,
series:[
{
name : '邮件营销',
type : 'line' ,
stack : '总量' ,
data : [120,132,101,134,90,230,210]
} ,
{
name : '联盟广告' ,
type : 'line' ,
stack : '总量' ,
data :[220,182,191,234,290,330,310]
} ,
{
name : '视频广告' ,
type : 'line' ,
stack : '总量' ,
data : [150,232,201,154,190,330,410]
} ,
{
name : '直接访问',
type : 'line' ,
stack :' 总量' ,
data :[320,332,301,334,390,330,320]
},
{
name : '搜索引擎' ,
type : 'line' ,
stack : '总量' ,
data : [920,932,901,934,1290,1330,1320]
}
]
}
//3.设置Echarts的Option
myChart.setOption(option) ;
});
</script>
</head>
<body>
<div id="main" style="width:1000px;height: 600px"></div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<!--导入Echarts支持-->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height: 900px"></div>
<script type="text/javascript">
<!--初始化Echarts-->
var myChart=echarts.init(document.getElementById("main")) ;
<!--创建Option-->
var option={
title :{
text:'某站点用户访问来源',
subtext:'纯属虚构' ,
x:'center'
} ,
tooltip:{
trigger:'item' ,
formatter:'{a} <br/> {b} :{c} ({d}%)'
} ,
legend:{
orient:'vertical' ,
left:'left' ,
data:['直接营销','邮件营销','联盟广告','视频广告','搜索引擎']
} ,
series:[
{
name:'访问来源',
type:'pie' ,
radius:'55%' ,
center:['50%','60%'],
data:[
{value:355,name:'直接访问'},
{value:310,name:'邮件营销'},
{value:234,name:'联盟广告'},
{value:135,name:'视频广告'},
{value:1548,name:'搜索引擎'}
],
itemStyle:{
emphasis:{
shadowBlur:10 ,
shadowOffsetX:0 ,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
};
<!--配置Echarts的Option-->
myChart.setOption(option) ;
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<!--导入JQuery支持-->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<!--导入百度ECharts支持-->
<script type="text/javascript" src="echarts.js"></script>
<!--使用JS生成图表-->
<script type="text/javascript">
$(function () {
//1.初始化百度Echarts
var myChart=echarts.init(document.getElementById("main"));
//2.设置Option
var option={
tooltip:{
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
} ,
legend:{
orient:'vertical' ,
x:'left' ,
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
} ,
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
} ,
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
} ;
//3.配置百度Echarts的Option
myChart.setOption(option) ;
});
</script>
</head>
<body>
<div id="main" style="width: 1200px;height: 800px">
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
总结:百度ECharts到底怎么玩,思路很简单,通过Ajax技术获取数据,然后利用上面给的配置数据的模板设置数据data;Echarts步骤,先初始化(init),再配置Option,最后设置Option(myChart.setOption(option)),当然初始化前先用Ajax获取数据,获取不到数据一切都是个蛋；需要的技术支持:Ajax+JSON+JQuery+MVC架构,不会的赶紧补习吧；上面给你的示例鸟用没有,总结规律才是王道,其实ECharts简单到没有朋友
转载地址:http://blog.csdn.net/qq_34378776/article/details/53862723