做Echarts很簡單，可以參看官網
http://echarts.baidu.com/index.html
作為程序員我們只需要把靜態數據替換成我們自己需要的！
下面看一個自己做的例子：
還是先看看效果圖：
該圖的右上角有一個toobar，其中有直接將柱狀圖改為折線圖，還有數據視圖，保存為圖片。
看着很高大上，其實代碼很簡單！
做之前必須要有echarts.js這個組件。
先說說界面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eight</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/html/echarts.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="eight" style="width:100%;height:400px;"></div>
</body>
</html>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var eight = echarts.init(document.getElementById('eight'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '近一月留痕情況(截止昨日)',
left: 'center',
top: 20
},
color: ['#3398DB'],
tooltip : {
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {
left: '3%',
right: '4%',
y2:80,
containLabel: true
},
xAxis : [
{
type : 'category',
data : ${yewu}, //重點在這里 加載后台數據 橫坐標名稱
axisTick: {
alignWithLabel: true
},
axisLabel:{
interval:0,
rotate:-30
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'留痕登記數',
type:'bar',
barWidth: '60%',
data: ${lstmark} //重點在這里 加載數據 柱狀圖數據
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
eight.setOption(option);
window.onresize = eight.resize;
</script>
圖表中的數據來自Controller層提供，請看Controller層關鍵代碼：
記住數據要List封裝！
/******************Echarts當月留痕情況ljl***********************/
//業務類型
List<String> yewu = markEchartsService.getPageName(); //這個是具體業務邏輯查詢出來的，不在說明了。
//留痕記錄
List<Object> lstmark = new ArrayList<Object>();
//進一個月留痕情況
List<Map<String, Object>> mapmark = markEchartsService.getMarkCount(); //這個是具體業務邏輯查詢出來的，不在說明了。
for (Map<String, Object> map : mapmark) {
lstmark.add(map.get("num"));
}
session.setAttribute("yewu", JSON.toJSON(yewu)); //前台要接收的數據 橫坐標的值 例如 ['A','B','C'....]
session.setAttribute("lstmark", JSON.toJSON(lstmark)); //前台要接收的數據 柱狀圖的值 例如[23,44,5,98....]
/********************************************************/
然后轉發到某個界面。
在這里還需要一個alibaba的json組件,網上很多自己下載
在這里也只是拋磚引玉了。。。
再補充一點問題：
1.比如說如何實現文字斜體顯示：axisLabel:{ interval:0, rotate:-30 }
2.當斜體顯示文字不全時：修改y2的值
最終要實現效果還得自己動手做一做的。。。
加油舉林！！