html
<div id="chart"></div>
js引用
<script src="js/dist/echarts.js"></script>
js代碼
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/theme/sakura',
'echarts/chart/force'
// 使用柱狀圖就加載bar模塊，按需加載
],
function optionData(ec,theme) {
var dataLink={},dataNode={};
var ec=ec;
// $("#canvas-add").append('<div class="text-center" id="load-svg1"><img src="css/load.gif" style="width:50px;height:50px;"></div>');//動態加載 loading
var myChart = ec.init(document.getElementById('chart'),theme);
// myChart.showLoading({
// text: '正在努力的讀取數據中...', //loading話術
// });
var ecConfig = require('echarts/config');
myChart.setOption(dealscatter()); //調用圖表代碼
// myChart.hideLoading();
}
);
function dealscatter(){ // echart圖表生成
var 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:['org','peer','order','CA','orderAll']
},
series : [
{
type:'force',
name : "節點關係",
ribbonType: false,
categories : [
{
name: 'org'
},
{
name:'peer'
},
{
name: 'order'
},
{
name:'CA'
},
{
name:'orderAll'
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
},
linkStyle: {
type: 'line'
}
},
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: 'org1', value : 5},
{category:1, name: 'peer1.1',value : 0},
{category:1, name: 'peer1.2',value : 0},
{category:1, name: 'peer1.3',value : 0},
{category:1, name: 'peer1.4',value : 0},
{category:2, name: 'order1',value : 2},
{category:0, name: 'org2', value : 5},
{category:1, name: 'peer2.1',value : 0},
{category:1, name: 'peer2.2',value : 0},
{category:1, name: 'peer2.3',value : 0},
{category:1, name: 'peer2.4',value : 0},
{category:2, name: 'order2',value :2},
{category:0, name: 'org3', value : 5},
{category:1, name: 'peer3.1',value : 0},
{category:1, name: 'peer3.2',value : 0},
{category:1, name: 'peer3.3',value : 0},
{category:1, name: 'peer3.4',value : 0},
{category:2, name: 'order3',value : 2},
{category:0, name: 'org4', value : 5},
{category:1, name: 'peer4.1',value : 0},
{category:1, name: 'peer4.2',value : 0},
{category:1, name: 'peer4.3',value : 0},
{category:1, name: 'peer4.4',value : 0},
{category:2, name: 'order4',value : 2},
{category:0, name: 'org5', value : 5},
{category:1, name: 'peer5.1',value : 0},
{category:1, name: 'peer5.2',value : 0},
{category:1, name: 'peer5.3',value : 0},
{category:1, name: 'peer5.4',value : 0},
{category:2, name: 'order5',value : 2},
{category:3, name: 'CA',value : 5},
{category:4, name: 'orderALL',value : 5}
],
links : [
{source : 'CA', target : 'org1', weight : 3},
{source : 'CA', target : 'org2', weight : 3},
{source : 'CA', target : 'org3', weight : 3},
{source : 'CA', target : 'org4', weight : 3},
{source : 'CA', target : 'org5', weight : 3},
{source : 'org1', target : 'peer1.1', weight : 2},
{source : 'org1', target : 'peer1.2', weight : 2},
{source : 'org1', target : 'peer1.3', weight : 2},
{source : 'org1', target : 'peer1.4', weight : 2},
{source : 'org1', target : 'order1', weight : 2},
{source : 'org2', target : 'peer2.1', weight : 2},
{source : 'org2', target : 'peer2.2', weight : 2},
{source : 'org2', target : 'peer2.3', weight : 2},
{source : 'org2', target : 'peer2.4', weight : 2},
{source : 'org2', target : 'order2', weight : 2},
{source : 'org3', target : 'peer3.1', weight : 2},
{source : 'org3', target : 'peer3.2', weight : 2},
{source : 'org3', target : 'peer3.3', weight : 2},
{source : 'org3', target : 'peer3.4', weight : 2},
{source : 'org3', target : 'order3', weight : 2},
{source : 'org4', target : 'peer4.1', weight : 2},
{source : 'org4', target : 'peer4.2', weight : 2},
{source : 'org4', target : 'peer4.3', weight : 2},
{source : 'org4', target : 'peer4.4', weight : 2},
{source : 'org4', target : 'order4', weight : 2},
{source : 'org5', target : 'peer5.1', weight : 2},
{source : 'org5', target : 'peer5.2', weight : 2},
{source : 'org5', target : 'peer5.3', weight : 2},
{source : 'org5', target : 'peer5.4', weight : 2},
{source : 'org5', target : 'order5', weight : 2},
{source : 'orderALL', target : 'order1', weight : 3},
{source : 'orderALL', target : 'order2', weight : 3},
{source : 'orderALL', target : 'order3', weight : 3},
{source : 'orderALL', target : 'order4', weight : 3},
{source : 'orderALL', target : 'order5', weight : 3}
]
}
]
};
return option;
}