润乾报表v5力导图

Echarts有丰富且美观的图形，其中力导图也为其一。 润乾报表v5可完美集成Echarts，因此理论上讲可支持所有其已有的统计图类型。

本文主要以实例的形式，说明如何集成echarts，实现力导图效果。

首先看最终效果图：

实现JS及报表文件：

注：以下js可作为模板使用或直接基于报表示例修改

 

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

   <div id='${id}'style="width:${width}px;height:${height}px"></div>

   <!-- ECharts单文件引入 -->

   //<script src="dist/echarts.js"></script>

   <script type="text/javascript">

       // 路径配置

      // require.config({

       //    paths: {

        //       echarts: 'dist'

        //   }

      // });

       

       // 使用

       require(

           [

                'echarts',

                'echarts/chart/force'

,

                'echarts/chart/chord'

 

           ],

           function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart =ec.init(document.getElementById('${id}'));

               

 

var nodes = [];

var links = [];

var constMaxDepth = ${cengji};

var constMaxChildren = 4;

var constMinChildren = 4;

var constMaxRadius = 10;

var constMinRadius = 2;

 

var nodeName = [];             //子节点名称

var nodeSE = [];                  //子节点税额

var nodeChildNum = [];       //所有直接子节点数量

var nodeParentNo = []; //上级序号

var nodeNo = [];   //本级序号

 

nodeName = ${nodeName};

nodeSE = ${nodeSE};

nodeChildNum = ${nodeChildNum};

nodeParentNo = ${nodeParentNo};

nodeNo = ${nodeNo}

//alert(nodeParentNo);

 

//function rangeRandom(min, max) {

//  return Math.random() * (max - min) + min;

//}

 

function createNode(depth,name1,se1,childNum1,no1){

   var node = {

       name : name1 + "," + se1,

       value : se1,//rangeRandom(constMinRadius, constMaxRadius),

       // Custom properties

       childNum:childNum1,

       no:no1,   //本级序号

       id : nodes.length,

       depth : depth,

       category : depth === constMaxDepth ? 0 : 1

    }

   nodes.push(node);

 

   return node;

}

 

function forceMockThreeData() {

       //varrNode=eval(${rNode});//{name:'中国电子信息产业集团有限公司（母公司）',se:1996,childrenNum:30}                     

       //alert(rNode);

   var depth = 0;

   var rootNode = {

       name :${rootName},

       value : ${rootSE},//税额，点大小

       // Custom properties

       childNum:${rootChildNum}, //直接子节点数量

       no:${rootNo}, //本级序号

       id : 0,

       depth : 0,

       category : 2

    }

   nodes.push(rootNode);

 

   function mock(parentNode, depth) {

       //var nChildren = parentNode.childNum; //获取直接子节点数量

       //alert(nChildren);

 

       //过滤出当前节点的直接子节点记录

       var arrNo = [];

       for(var i=0;i<nodeParentNo.length;i++){

                     if(nodeParentNo[i]==parentNode.no){//子节点的上级序号等于父节点的本级序号

                                   arrNo.push(i);//将直接子节点的序号放入arrNo数组

                            }

              }

 

       //alert(arrNo);

       //循环序号数组取名字、税额、子节点数量、本级序号

       for (var i = 0; i < arrNo.length; i++) {

                var n = arrNo[i];

           var childNode =createNode(depth,nodeName[n],nodeSE[n],nodeChildNum[n],nodeNo[n]);

           links.push({

                source : parentNode.id,

                target : childNode.id,

                weight : 1

           });

           if (depth < constMaxDepth) {

                mock(childNode, depth + 1);

           }

       }

    }

 

   mock(rootNode, 0);

}

 

 

forceMockThreeData();

 

option = {

   title : {

       text:${标题},// 'Force',

       subtext: ${副标题},//'Force-directed tree',

       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:['叶子节点','非叶子节点', '根节点']

       //${data}

       

   },

   series : [

       {

           type:'force',

           name : "",//"Force tree",

           ribbonType: false,

           categories ://${categories},

          [

            {

                   name: '叶子节点'

              },

                {

                   name: '非叶子节点'

              },

              {

                    name: '根节点'

               }

         ],

           itemStyle: {

                normal: {

                    label: {

                        show: false

                    },

                    nodeStyle : {

                        brushType : 'both',

                        borderColor :'rgba(255,215,0,0.6)',

                        borderWidth : 1

                    }

                }

           },

           minRadius : constMinRadius,

           maxRadius : constMaxRadius,

           coolDown: 0.995,

           steps: 10,

           nodes : nodes,

           links : links,

           steps: 1

       }

    ]

};            

                // 为echarts对象加载数据

                myChart.setOption(option);

           }

       );

   </script>

报表统计图设计：

注：具体单元格对应关系参见附件报表文件