<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 爲ECharts準備一個具有大小（寬高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 引入echarts.js-->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// Step:3 爲模塊加載器配置echarts的路徑，從當前頁面連接到echarts.js，定義所需圖表路徑
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// Step:4 動態加載echarts而後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
require(
[
'echarts',
'echarts/chart/force' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
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:['主推','組合']
},
series : [
{
type:'force',
//type:'chord',和絃圖不生效
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, label: '美寶\n（主推）'},
{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, name: '主推'},
{source : '小分子肽', target : '美寶', weight : 3, name: '主推'},
{source : '脂菲棒', target : '美寶', weight : 1, name: '主推'},
{source : '紅酒粉', target : '美寶', weight : 6, name: '主推'},
{source : '嬰兒抑菌液', target : '美寶', weight : 1, name: '主推'},
{source : '仙萊特草本牙膏', target : '美寶', weight : 1, name: '主推'},
{source : '囿優蛋白果凍', target : '美寶', weight : 1, name: '主推'},
{source : '毒垢觀察袋', target : '五清通體液', weight : 1, name: '主推'},
{source : '脂菲棒', target : '五清通體液', weight : 1, name: '主推'},
{source : '脂菲棒', target : '毒垢觀察袋', weight : 1, name: '主推'},
{source : '脂菲棒', target : '海斯維', weight : 1, name: '主推'},
{source : '脂菲棒', target : '小分子肽', weight : 1, name: '主推'},
{source : '紅酒粉', target : '脂菲棒', weight : 6, name: '主推'},
{source : '紅酒粉', target : '毒垢觀察袋', weight : 1, name: '主推'},
{source : '仙萊特草本牙膏', target : '脂菲棒', weight : 1, name: '主推'}
]
}
]
};
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 !== undefined
&& data.target !== undefined
) { //點擊的是邊
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());
});
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>
</html>