1.导入 Echarts/highcharts资源文件
2.在html中准备一个层
<div id="container" style="min-width:700px;height:400px"></div>
3. 找到折线图的静态代码
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'cn年度销售报表',
x: -20 //center
},
subtitle: {
text: 'Source: cn.mysql',
x: -20
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
title: {
text: '万($)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '万($)'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'cn',
data: [29.9, 71.5, 36.4, 49.2, 14.0, 16.0, 15.6, 28.5, 26.4, 14.1, 95.6, 54.4]
}]
});
});
</script>
将如上copy至html
4.运行。
即可看到折线图的效果。
当然,仅仅是这样,仍然是不够的。
下面,动态加载从数据库中拿取的数据。
<script type="text/javascript">
$.post('bar.action', function (result) {
$('#container').highcharts({
series: [{
name: 'cn',
data: result.value
}]
});
}, 'json')
</script>
如上,即可将Ajax加载的数据放到折线图中展示。
@ResponseBody
@RequestMapping("bar")
public Map<String, Object> bar() {
Map<String, Object> map = new HashMap<>();
double[] values = {23, 13.9, 13.1, 12, 24.3, 43.3, 45, 23.9, 33.3, 25, 26.9, 10};
map.put("value", values);
return map;
}
这是SpringMVC模式下产生的格式数据
当然,values可以是从数据库里查出的list
high:
<div align="center">
<div id="container" style="width: 800px; height: 500px;"></div>
</div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '全球各大洲人口增长历史及预测'
},
subtitle: {
text: '数据来源: 世界国联'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: '十亿'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' 百万'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: '亚洲',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: '非洲',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: '欧洲',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: '美洲',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: '大洋洲',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
</script>
静态的图表,数据格式相差无几。
pie:
<script type="text/javascript">
// 绘制图表
var myChart = echarts.init(document.getElementById('pie'));
myChart.setOption({
title:{
text:'神天股东分红表'
},
tooltip : {
show : 'true'
},
series : [{
type: 'pie',
data:[
]
}
]
})
</script>
<script type="text/javascript">
$(function() {
$.post(
'pie.do',
function(result){
myChart.setOption( {
series : {
data : result
}
});
},'json'
)
})
</script>
这是pie饼图
JSONArray json=new JSONArray();
List<User> list=DataDao.queryAllUser();
for (User user : list) {
JSONObject obj=new JSONObject();
obj.put("value",user.getUmoney());
obj.put("name", user.getUname());
json.add(obj);
}
// int[] in={11, -2, 93, 13, 35};
// String[] str={"³ÄÉÀ", "ÑòëÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úЬ"};
// for(int i=0;i<in.length;i++){
// JSONObject obj=new JSONObject();
// obj.put("value",in[i]);
// obj.put("name", str[i]);
// json.add(obj);
// }
resp.setContentType("text/plain;charset=utf-8");
PrintWriter out=resp.getWriter();
out.print(json.toJSONString());
这是转发fastjson封装的json、
后面会有更高级的转发方式