graph 关系图拖动问题echarts 饼配置项内容和展示
怎么然关系生成后不能被拖拽和缩放 怎么把关系图的原点与饼图的圆心设置为同一个点，两个图的半径怎么设置为一致的数据。
配置项如下
// 区域数
let Areanumber = Math.floor(Math.random() * 10 + 1);
console.log('Areanumber:' + Areanumber);
//每个区域下的设备数
let devicenumber = [];
//设备的总数
let copies = 0;
let i = 0;
let j = 0;
let index=0;
for (let i = 0; i < Areanumber; i++) {
devicenumber[i] = Math.floor(Math.random() * 10 + 1);
copies += devicenumber[i];
// console.log('devicenumber[' + i + ']:' + devicenumber[i]);
}
;
console.log('copies:' + copies);
//备件数组
let num=0;
let spare = [];
let sparenum = [];
for (i = 0; i < Areanumber; i++) {
spare[i] = [];
for (j = 0; j < devicenumber[i]; j++) {
spare[i][j] = Math.floor(Math.random() * 10 + 1);
sparenum[index] = spare[i][j]
num += sparenum[index];
if (index < copies) {
index++;
}
}
}
// console.log(num);
//console.log(sparenum);
let maxnum=Math.max.apply(null,sparenum);
//console.log(maxnum);
let max = copies*Areanumber * 10;
let inerpie = [];
let outrpie = [];
index=0;
for (i = 0; i < Areanumber; i++) {
let mean = max / copies;
let num = devicenumber[i];
inerpie[i] = {value: mean*num , name: '区域' + i}
for (j = 0; j <num ; j++) {
outrpie[index] = {'value':max/Areanumber, 'name': '设备' + index}
if (index < copies) {
index++;
}
}
}
index = 0;
//角度数组
let angle = [];
let angle1= [];
for (i = 0; i < copies; i++) {
angle1[i] = 360/ copies;
index=angle1[0]/2;
angle[i]=index+angle1[i]*i;
}
//饼图的半径
let r1 = window.innerHeight*0.6/window.innerWidth*100;
// 散点图转折点的半径
let r2 = window.innerHeight*0.9/window.innerWidth*100;
index=5;
//转折点X/Y坐标
let transitionX = [];
let transitionY = [];
//切入点X/Y坐标
let cutoverX = [];
let cutoverY = [];
for (i = 0; i < copies; i++) {
//弧度
let radian = (2 * Math.PI / 360) * angle[i];
cutoverX [i] = 0 + Math.sin(radian) * r1;
cutoverY [i] = 0 - Math.cos(radian) * r1;
transitionY[i] = 0 - Math.cos(radian) * r2;
transitionX[i] = 0 + Math.sin(radian) * r2;
}
index=copies/2;
let sa= transitionY[0];sa= transitionY[0];
let sd=transitionY[index-1];
let len=(sd-sa)/index
if (copies>25){
if (copies%2 ==0){
for (i = 0; i < copies; i++) {
if (i < index) {
transitionY[i] = sa+len*i
}else {
transitionY[i] =transitionY[index-1]-len*(i-index)
}
}
}else {
index=(copies-1)/2;
sa= transitionY[0];
sd=transitionY[index-1];
len=(sd-sa)/index
for (i = 0; i < copies; i++) {
if (i <index) {
transitionY[i] = sa+len*i
}else if(i==index){
transitionY[i] =transitionY[index]
}else {
transitionY[i] =transitionY[index]-len*(i-index)
}
}
}
}
console.log(transitionY)
let graphdate=[];
let linkdate = [];
num=0;
index = 0;
let interval=0;
for (i = 0; i < copies; i++) {
let count = sparenum[i]+2 ;
let sad=transitionX[i]
let numberx=Math.abs(sad);
interval=(7*maxnum-numberx)/sparenum[i]
for (j = 0; j < count; j++) {
if(i>9){
if(j==0){
let name = i*10 + '' + j;
let x = cutoverX [i];
graphdate[index] = {'name': name, 'x': x, 'y': cutoverY[i] };
index++;
}else{
let x;
if (transitionX[i] < 0) {
x= transitionX[i] - interval*(j-1) ;
} else {
x = transitionX[i] + interval*(j-1);
}
let taget = i*10 + '' + (j-1);
let name = i*10 + '' + j;
let y = transitionY [i];
graphdate[index] = {'name': name, 'x': x, 'y': y};
linkdate[num] = {'source':taget, 'target': name}
index++;
num++;
}
}else{
if(j==0){
let name = i + '' + j;
let x = cutoverX [i];
graphdate[index] = {'name': name, 'x': x, 'y': cutoverY[i] };
index++;
}else{
let x;
if (transitionX[i] < 0) {
x= transitionX[i] - interval * (j-1);
} else {
x = transitionX[i] + interval * (j-1);
}
let taget = i + '' + (j-1);
let name = i + '' + j;
let y = transitionY [i];
graphdate[index] = {'name': name, 'x': x, 'y': y};
linkdate[num] = {'source':taget, 'target': name}
index++;
num++;
}
}
}
}
console.log(graphdate);
console.log(linkdate);
app.title = '嵌套环形图';
option = {
title: {
text: 'XX企业',
itemGap:20 ,
left:'center',
textStyle:{
//文字颜色
color:'#000000',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:40
},
subtext:'大数据企业大屏',
//副标题文本样式,
subtextStyle:{
//文字颜色
color:'#000000',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:22
}
},
backgroundColor:'rgba(10,10, 108, 0.8)' ,//rgba设置透明度0.1,
series: [
{
name:'区域分布',
type:'pie',
selectedMode: 'single',
radius: ['25%', '39%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:inerpie,
},
{
name:'设备分布',
type:'pie',
radius: ['40%', '60%'],
label: {
position: 'inner'
},
data:outrpie
},
{
type: 'graph',
layout: 'none',
symbolSize: 5,
roam: true,
label: {
normal: {
show: true,
position:'top',
distance:2,
}
},
//edgeSymbol: 'pie',
edgeSymbolSize: 10,
data:graphdate,
// links: [],
links:linkdate,
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
],
graphic: {
type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
left: 'center', // 同上
style: {
text: 'XX集团', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
fill: '#fff', // 填充色。
fontSize: 30, // 字体大小
fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
}
}
};
截图如下
