graph 关系图拖动问题ECharts Gallery

20:11:45图表已生成
代码
     // 区域数
            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'
                }
            }
        };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
