//关系图
var graph = { //这是数据项目中一般都是获取到的
nodes: [
{ "id": "0", "name": "昆山XX设计有限公司0"},
{ "id": "1", "name": "上海XX设计有限公司1"},
{ "id": "2", "name": "赵某某2" },
{ "id": "3", "name": "主要人员3"},
{ "id": "4", "name": "苏州XX实业有限公司4" }
],
links: [
{ "id": "0", "source": "0", "target": "2" },
{ "id": "1", "source": "1", "target": "2" },
{ "id": "2", "source": "2", "target": "3" },
{ "id": "3", "source": "3", "target": "1" },
{ "id": "4", "source": "4", "target": "0" },]
};
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
var colorArr = new Array();
var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
//生成不同的颜色代码
function createColorCode(code,colorArr){
if($.inArray(code, colorArr)==-1 && code.length>6){
colorArr[0]=code;
}else{
code='#'+Math.floor(Math.random()*16777215).toString(16);
createColorCode(code,colorArr);
}
return colorArr;
}
var option = { //这里是option配置
animationDurationUpdate: 1500,//数据更新动画的时长。
animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果。
series: [
{
type: 'graph',
layout: 'force', //因为节点的位置已经有了就不用在这里使用布局了
//circular: { rotateLabel: true },
//animation: false,
data: graph.nodes,
links: graph.links,
roam: true, //添加缩放和移动
draggable: true,//这里设置为false,不然拖拽鼠标和节点有偏移
itemStyle: {//配置节点的颜色已及尺寸
normal: {
// (1) 直接写一个颜色,这样的结果是所有节点都是同一个颜色
//color: '#fff',
// (2) 像在全局定义中一样,使用数组声明多个颜色
// 但是这样的结果是所有颜色都变成黑色(大概是不允许这样用吧)
//color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
// (3) 类似柱状图定义多个颜色,利用函数返回不同的颜色值
// 结果同上,全变成黑色了
//color: function (params) {
// var colorList = ['red', 'orange', 'green', 'blue', 'purple'];
// return colorList[params.dataIndex]
//},
color:color[0].split(','),//随机颜色设定
}
},
symbolSize: function (value, params) {//改变节点大小
var SizeList = [40, 45, 50, 55, 60];
return SizeList[params.dataIndex]
},
label: {
normal: {
show: true,
position: 'bottom',
rich: {
bg: {
backgroundColor: '#f5f5f5'
}
}
}
},
force: {
edgeLength: [10, winWidth / 2]
}
}
]
};
myChart.setOption(option);
//柱状图
var colorArr = new Array();
var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
//生成不同的颜色代码
function createColorCode(code,colorArr){
if($.inArray(code, colorArr)==-1 && code.length>6){
colorArr[0]=code;
}else{
code='#'+Math.floor(Math.random()*16777215).toString(16);
createColorCode(code,colorArr);
}
return colorArr;
};
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color:color[0].split(','),
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//核心代码:
var colorArr = new Array();
var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
//生成不同的颜色代码
function createColorCode(code,colorArr){
if($.inArray(code, colorArr)==-1 && code.length>6){
colorArr[0]=code;
}else{
code='#'+Math.floor(Math.random()*16777215).toString(16);
createColorCode(code,colorArr);
}
return colorArr;
};
//series设定随机色:
series: [{
color:color[0].split(','),
}]