|
|
|
@ -180,33 +180,6 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<div class="ibox float-e-margins">
|
|
|
|
|
<div class="ibox-title">
|
|
|
|
|
<h5>和弦图</h5>
|
|
|
|
|
<div class="ibox-tools">
|
|
|
|
|
<a class="collapse-link">
|
|
|
|
|
<i class="fa fa-chevron-up"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
|
|
|
|
|
<i class="fa fa-wrench"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<ul class="dropdown-menu dropdown-user">
|
|
|
|
|
<li><a href="graph_flot.html#">选项1</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="graph_flot.html#">选项2</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<a class="close-link">
|
|
|
|
|
<i class="fa fa-times"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ibox-content">
|
|
|
|
|
<div class="echarts" id="echarts-chord-chart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<div class="ibox float-e-margins">
|
|
|
|
|
<div class="ibox-title">
|
|
|
|
@ -261,33 +234,6 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<div class="ibox float-e-margins">
|
|
|
|
|
<div class="ibox-title">
|
|
|
|
|
<h5>力导向布局图</h5>
|
|
|
|
|
<div class="ibox-tools">
|
|
|
|
|
<a class="collapse-link">
|
|
|
|
|
<i class="fa fa-chevron-up"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
|
|
|
|
|
<i class="fa fa-wrench"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<ul class="dropdown-menu dropdown-user">
|
|
|
|
|
<li><a href="graph_flot.html#">选项1</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="graph_flot.html#">选项2</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<a class="close-link">
|
|
|
|
|
<i class="fa fa-times"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ibox-content">
|
|
|
|
|
<div class="echarts" id="echarts-force-chart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
@ -1065,182 +1011,6 @@
|
|
|
|
|
mapChart.setOption(mapoption);
|
|
|
|
|
$(window).resize(mapChart.resize);
|
|
|
|
|
|
|
|
|
|
var chordChart = echarts.init(document.getElementById("echarts-chord-chart"));
|
|
|
|
|
var chordoption = {
|
|
|
|
|
title : {
|
|
|
|
|
text: '测试数据',
|
|
|
|
|
subtext: 'From d3.js',
|
|
|
|
|
x:'right',
|
|
|
|
|
y:'bottom'
|
|
|
|
|
},
|
|
|
|
|
tooltip : {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
if (params.indicator2) { // is edge
|
|
|
|
|
return params.value.weight;
|
|
|
|
|
} else {// is node
|
|
|
|
|
return params.name
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
show : true,
|
|
|
|
|
feature : {
|
|
|
|
|
restore : {show: true},
|
|
|
|
|
magicType: {show: true, type: ['force', 'chord']},
|
|
|
|
|
saveAsImage : {show: true}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
x: 'left',
|
|
|
|
|
data:['group1','group2', 'group3', 'group4']
|
|
|
|
|
},
|
|
|
|
|
series : [
|
|
|
|
|
{
|
|
|
|
|
type:'chord',
|
|
|
|
|
sort : 'ascending',
|
|
|
|
|
sortSub : 'descending',
|
|
|
|
|
showScale : true,
|
|
|
|
|
showScaleText : true,
|
|
|
|
|
data : [
|
|
|
|
|
{name : 'group1'},
|
|
|
|
|
{name : 'group2'},
|
|
|
|
|
{name : 'group3'},
|
|
|
|
|
{name : 'group4'}
|
|
|
|
|
],
|
|
|
|
|
itemStyle : {
|
|
|
|
|
normal : {
|
|
|
|
|
label : {
|
|
|
|
|
show : false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
matrix : [
|
|
|
|
|
[11975, 5871, 8916, 2868],
|
|
|
|
|
[ 1951, 10048, 2060, 6171],
|
|
|
|
|
[ 8010, 16145, 8090, 8045],
|
|
|
|
|
[ 1013, 990, 940, 6907]
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chordChart.setOption(chordoption);
|
|
|
|
|
$(window).resize(chordChart.resize);
|
|
|
|
|
|
|
|
|
|
var forceChart = echarts.init(document.getElementById("echarts-force-chart"));
|
|
|
|
|
var forceoption ={
|
|
|
|
|
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: '家人'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name:'朋友'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#333'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
nodeStyle : {
|
|
|
|
|
brushType : 'both',
|
|
|
|
|
borderColor : 'rgba(255,215,0,0.4)',
|
|
|
|
|
borderWidth : 1
|
|
|
|
|
},
|
|
|
|
|
linkStyle: {
|
|
|
|
|
type: 'curve'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
|
|
|
|
|
},
|
|
|
|
|
nodeStyle : {
|
|
|
|
|
//r: 30
|
|
|
|
|
},
|
|
|
|
|
linkStyle : {}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
useWorker: false,
|
|
|
|
|
minRadius : 15,
|
|
|
|
|
maxRadius : 25,
|
|
|
|
|
gravity: 1.1,
|
|
|
|
|
scaling: 1.1,
|
|
|
|
|
roam: 'move',
|
|
|
|
|
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 : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
|
|
|
|
|
{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}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
forceChart.setOption(forceoption);
|
|
|
|
|
$(window).resize(forceChart.resize);
|
|
|
|
|
|
|
|
|
|
var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart"));
|
|
|
|
|
var gaugeoption = {
|
|
|
|
|
tooltip : {
|
|
|
|
|