<!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>