223 lines
8.8 KiB
HTML
223 lines
8.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="description" content="ECharts">
|
|||
|
|
<meta name="author" content="kener.linfeng@gmail.com">
|
|||
|
|
<title>ECharts · Example</title>
|
|||
|
|
|
|||
|
|
<link rel="shortcut icon" href="../asset/ico/favicon.png">
|
|||
|
|
|
|||
|
|
<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/bootstrap.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/carousel.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/echartsHome.css" rel="stylesheet">
|
|||
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|||
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
|
|||
|
|
<script src="./www/js/echarts.js"></script>
|
|||
|
|
<script src="../asset/js/codemirror.js"></script>
|
|||
|
|
<script src="../asset/js/javascript.js"></script>
|
|||
|
|
|
|||
|
|
<link href="../asset/css/codemirror.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/monokai.css" rel="stylesheet">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- Fixed navbar -->
|
|||
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row-fluid example">
|
|||
|
|
<div id="sidebar-code" class="col-md-4">
|
|||
|
|
<div class="well sidebar-nav">
|
|||
|
|
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
|
|||
|
|
<textarea id="code" name="code">
|
|||
|
|
option = {
|
|||
|
|
title : {
|
|||
|
|
text: '人物关系：乔布斯',
|
|||
|
|
subtext: '数据来自人立方',
|
|||
|
|
x:'right',
|
|||
|
|
y:'bottom'
|
|||
|
|
},
|
|||
|
|
tooltip : {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} : {b}'
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show : true,
|
|||
|
|
feature : {
|
|||
|
|
restore : {show: true},
|
|||
|
|
magicType: {show: true, type: ['force', 'chord']},
|
|||
|
|
saveAsImage : {show: true}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
x: 'left',
|
|||
|
|
data:['家人','朋友']
|
|||
|
|
},
|
|||
|
|
series : [
|
|||
|
|
{
|
|||
|
|
type:'force',
|
|||
|
|
name : "人物关系",
|
|||
|
|
ribbonType: false,
|
|||
|
|
categories : [
|
|||
|
|
{
|
|||
|
|
name: '人物'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '家人',
|
|||
|
|
symbol: 'diamond'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:'朋友'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#333'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
nodeStyle : {
|
|||
|
|
brushType : 'both',
|
|||
|
|
borderColor : 'rgba(255,215,0,0.4)',
|
|||
|
|
borderWidth : 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
|
|||
|
|
},
|
|||
|
|
nodeStyle : {
|
|||
|
|
//r: 30
|
|||
|
|
},
|
|||
|
|
linkStyle : {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
minRadius : 15,
|
|||
|
|
maxRadius : 25,
|
|||
|
|
gravity: 1.1,
|
|||
|
|
scaling: 1.2,
|
|||
|
|
draggable: false,
|
|||
|
|
linkSymbol: 'arrow',
|
|||
|
|
steps: 10,
|
|||
|
|
coolDown: 0.9,
|
|||
|
|
//preventOverlap: true,
|
|||
|
|
nodes:[
|
|||
|
|
{
|
|||
|
|
category:0, name: '乔布斯', value : 10,
|
|||
|
|
symbol: 'image://http://www.damndigital.com/wp-content/uploads/2010/12/steve-jobs.jpg',
|
|||
|
|
symbolSize: [60, 35],
|
|||
|
|
draggable: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
position: 'right',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'black'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{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 : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿', itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1.5,
|
|||
|
|
color: 'red'
|
|||
|
|
}
|
|||
|
|
}},
|
|||
|
|
{source : '乔布斯', target : '丽萨-乔布斯', weight : 1, name: '父亲', itemStyle: {
|
|||
|
|
normal: { color: 'red' }
|
|||
|
|
}},
|
|||
|
|
{source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
|
|||
|
|
{source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
|
|||
|
|
{source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
|
|||
|
|
{source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
|
|||
|
|
{source : '奥巴马', target : '乔布斯', weight : 1},
|
|||
|
|
{source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
|
|||
|
|
{source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
|
|||
|
|
{source : '蒂姆-库克', target : '乔布斯', weight : 1},
|
|||
|
|
{source : '龙-韦恩', target : '乔布斯', weight : 1},
|
|||
|
|
{source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
|
|||
|
|
{source : '奥巴马', target : '保罗-乔布斯', weight : 1},
|
|||
|
|
{source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
|
|||
|
|
{source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
|
|||
|
|
{source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
|
|||
|
|
{source : '比尔-盖茨', target : '奥巴马', weight : 6},
|
|||
|
|
{source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
|
|||
|
|
{source : '蒂姆-库克', target : '奥巴马', weight : 1}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
var ecConfig = require('echarts/config');
|
|||
|
|
function focus(param) {
|
|||
|
|
var data = param.data;
|
|||
|
|
var links = option.series[0].links;
|
|||
|
|
var nodes = option.series[0].nodes;
|
|||
|
|
if (
|
|||
|
|
data.source != null
|
|||
|
|
&& data.target != null
|
|||
|
|
) { //点击的是边
|
|||
|
|
var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
|
|||
|
|
var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
|
|||
|
|
console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
|
|||
|
|
} else { // 点击的是点
|
|||
|
|
console.log("选中了" + data.name + '(' + data.value + ')');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
myChart.on(ecConfig.EVENT.CLICK, focus)
|
|||
|
|
|
|||
|
|
myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
|
|||
|
|
console.log(myChart.chart.force.getPosition());
|
|||
|
|
});
|
|||
|
|
</textarea>
|
|||
|
|
</div><!--/.well -->
|
|||
|
|
</div><!--/span-->
|
|||
|
|
<div id="graphic" class="col-md-8">
|
|||
|
|
<div id="main" class="main"></div>
|
|||
|
|
<div>
|
|||
|
|
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
|
|||
|
|
<span class="text-primary">切换主题</span>
|
|||
|
|
<select id="theme-select"></select>
|
|||
|
|
|
|||
|
|
<span id='wrong-message' style="color:red"></span>
|
|||
|
|
</div>
|
|||
|
|
</div><!--/span-->
|
|||
|
|
</div><!--/row-->
|
|||
|
|
|
|||
|
|
</div><!--/.fluid-container-->
|
|||
|
|
|
|||
|
|
<footer id="footer"></footer>
|
|||
|
|
<!-- Le javascript
|
|||
|
|
================================================== -->
|
|||
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|||
|
|
<script src="../asset/js/jquery.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
|
|||
|
|
<script src="../asset/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="../asset/js/echartsExample.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|