[ABI 5.2] 请帮忙看看从网上找的力导向图的脚本,怎么在ABI统计图组件的自定义实现?

5131
1

姜糖 初学数据Lv2

发表于2022-9-26 09:42

悬赏1

已解决

楼主
      var  data = [{
                name: 'node01',
                des: 'nodedes01',
                symbolSize: 70,
                category: 0,
            }, {
                name: 'node02',
                des: 'nodedes02',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'node03',
                des: 'nodedes3',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'node04',
                des: 'nodedes04',
                symbolSize: 50,
                category: 1,
            },  {
                name: 'node99',
                des: 'nodedes99',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'node05',
                des: 'nodedes05',
                symbolSize: 50,
                category: 1,
            }];
            var links = [{
                source: 'node01',
                target: 'node02',
                name: 'link01',
                des: 'link01des'
            }, {
                source: 'node01',
                target: 'node03',
                name: 'link02',
                des: 'link02des'
            }, {
                source: 'node01',
                target: 'node04',
                name: 'link03',
                des: 'link03des'
            }, {
                source: 'node04',
                target: 'node99',
                name: 'link99',
                des: 'link99des'
            }, {
                source: 'node01',
                target: 'node05',
                name: 'link04',
                des: 'link05des'
            }];

   var categories = [];
      for (var i = 0; i < 2; i++) {
          categories = {
              name: '类目' + i
          };
      }
         var pieChart = echarts.init(document.getElementById("HHH3"));
         var pieoption = {
             title : {
                 text: '某用户画像分析',
             },
             tooltip : {
                formatter: function (x) {
                  return x.data.des;
              }
             },
              legend: [{
              // selectedMode: 'single',
              data: categories.map(function (a) {
                  return a.name;
              })
          }],
            
             series : [
                 {
                     type:'graph',
                       layout: 'force', //图的布局,类型为力导图
                symbolSize: 40, // 调整节点的大小
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
   
                force: {
                    //力引导图基本配置
                     layoutAnimation:true,
                       // xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
                       // yAxisIndex : 0, //y轴坐标
                       gravity:0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                       edgeLength: 30, //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                       repulsion: 2500 //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
                       // repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
                       // edgeLength: 80 //边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                },
                draggable: true,
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                     
                     data:data,
                     links:links,
                      categories: categories
                 }
             ]            
         };
         pieChart.setOption(pieoption);
      //   $(window).resize(pieChart.resize);

     );

最近看过此主题的会员

esen_4TUELCHD9M

1个回答

只看楼主

两包辣条约吗 数据达人Lv4

发表于2022-9-26 09:42

只看该作者

取消 关注该作者的回复

沙发

参考一下这几个帖子
https://bbs.esensoft.com/thread-134340-1-1.html
https://bbs.esensoft.com/thread-135531-1-1.html

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

400咨询:400-0011-866

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流