ECharts是由國人開發的在HTML中可以顯示圖表，并通過js可以對圖表進行操作的一個開源元件。
但ECharts是基于HTML5來開發出的圖表工具，是以必須保證浏覽器支援HTML5才可以使用這個工具，也就是說IE8-的版本對這個的支援并不是很好。
更多了解可以登入http://echarts.baidu.com/
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript">
function init() {
// 初始化所有的echarts和zrender的js檔案
require.config({
paths: {
'js': 'js/js'
},
packages: [
{
name: 'echarts',
location: 'echarts',
main: 'echarts'
},
{
name: 'zrender',
location: 'zrender',
main: 'zrender'
}
]
});
// 初始化資料， 該資料可以通過AJAX傳回JSON來拼寫。
var option = {
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
categories : [
{
name: '人物',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '家人',
itemStyle: {
normal: {
color : '#87cdfa'
}
}
},
{
name:'朋友',
itemStyle: {
normal: {
color : '#9acd32'
}
}
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#800080'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 8
}
},
emphasis: {
label: {
show: false
// textStyle: null // 預設使用全局文本樣式，詳見TEXTSTYLE
},
nodeStyle : {
r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
density : 0.05,
attractiveness: 1.2,
nodes:[
{category:0, name: '喬布斯', value : 10},
{category:1, name: '麗薩-喬布斯',value : 2},
{category:1, name: '保羅-喬布斯',value : 3},
{category:1, name: '克拉拉-喬布斯',value : 3},
{category:1, name: '勞倫-鮑威爾',value : 7},
{category:2, name: '史蒂夫-沃茲尼艾克',value : 5},
{category:2, name: '奧巴馬',value : 8},
{category:2, name: '比爾-蓋茨',value : 9},
{category:2, name: '喬納森-艾夫',value : 4},
{category:2, name: '蒂姆-庫克',value : 4},
{category:2, name: '龍-韋恩',value : 1},
],
links : [
{source : 1, target : 0, weight : 1},
{source : 2, target : 0, weight : 2},
{source : 3, target : 0, weight : 1},
{source : 4, target : 0, weight : 2},
{source : 5, target : 0, weight : 3},
{source : 6, target : 0, weight : 6},
{source : 7, target : 0, weight : 6},
{source : 8, target : 0, weight : 1},
{source : 9, target : 0, weight : 1},
{source : 10, target : 0, weight : 1},
{source : 3, target : 2, weight : 1},
{source : 6, target : 2, weight : 1},
{source : 6, target : 3, weight : 1},
{source : 6, target : 4, weight : 1},
{source : 6, target : 5, weight : 1},
{source : 7, target : 6, weight : 6},
{source : 7, target : 3, weight : 1},
{source : 9, target : 6, weight : 1}
]
}
]
};
require(
[
'echarts',
'echarts/chart/force'
],
function(ec) {
var myChart = ec.init(document.getElementById('mydiv'));
myChart.setOption(option);
}
)
}
</script>
</head>
<body οnlοad="init();">
<div id="mydiv" style="width:1000px;height:600px;"></div>
</body>
</html>
![leetcode電話号碼的字母組合[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)