zoukankan      html  css  js  c++  java
  • echarts的树形结构图及参数


    官网代码:

    myChart.showLoading(); //显示Loading标志;

    var myChart = echarts.init(document.getElementById('页面中div的id'));
    $.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading(); //得到数据后隐藏Loading标志

    echarts.util.each(data.children, function (datum, index) {
                                                                                        index % 2 === 0 && (datum.collapsed = true);
                                                                              });    //间隔展开子数据,animate,display,physics,scale,vis是展开的

    myChart.setOption(option = {
                                    tooltip: { //提示框组件
                                               trigger: 'item', //触发类型,默认:item(数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用)。可选:'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的                                             图表中使用。'none':什么都不触发。
                                               triggerOn: 'mousemove' //提示框触发的条件,默认mousemove|click(鼠标点击和移动时触发)。可选mousemove:鼠标移动时,click:鼠标点击时,none:
                                                },
                                    series: [ //系列列表
                                          {
                                                type: 'tree', //树形结构

                                                data: [data], //上面从flare.json中得到的数据

                                                top: '1%', //距离上
                                                left: '7%', //左
                                                bottom: '1%', //下
                                                right: '20%', //右的距离

                                                symbolSize: 7, //标记的大小,就是那个小圆圈,默认7

                                               label: { //每个节点所对应的标签的样式
                                                       normal: {
                                                      position: 'left', //标签的位置
                                                      verticalAlign: 'middle',//文字垂直对齐方式,默认自动。可选:top,middle,bottom
                                                      align: 'right', //文字水平对齐方式,默认自动。可选:top,center,bottom
                                                      fontSize: 9 //标签文字大小
                                                     }
                                               },

                                                leaves: { //叶子节点的特殊配置,如上面的树图示例中,叶子节点和非叶子节点的标签位置不同
                                                        label: {
                                                        normal: {
                                                        position: 'right',
                                                        verticalAlign: 'middle',
                                                        align: 'left'
                                                 }
                                          }
                                  },

                                 expandAndCollapse: true, //子树折叠和展开的交互,默认打开
                                 animationDuration: 550, //初始动画的时长,支持回调函数,默认1000
                                 animationDurationUpdate: 750//数据更新动画的时长,默认300
                            }
                          ]
                });
        });

    可以看到每一层都是以name,children的形式

    附上一段我自己写的代码得到的结果,数据少一点看起来更清晰:

     https://www.easy-mock.com/mock/5d11d32c679aaa1a2f412f0a/example/data

    自己写来用的js代码,该树状图垂直模式:

    myChart.setOption(option = {
                                             tooltip: {
                                                      // show:'true',//默认:true;是否显示提示框组件,包括提示框浮层和 axisPointer。
                                                        trigger: 'item',//默认:item;触发类型。item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴                                                     的图表中使用。'none':什么都不触发。
                                                       triggerOn: 'mousemove'
                                                },
                                              series:[
                                                {
                                                        type: 'tree',

                                                        data: [data],

                                                         left: '2%',
                                                         right: '2%',
                                                         top: '15%',
                                                         bottom: '10%',

                                                         symbol: 'emptyCircle',

                                                         orient: 'vertical',

                                                          expandAndCollapse: true,//默认:true;子树折叠和展开的交互,默认打开 。

                                                           initialTreeDepth:2,//默认:2,树图初始展开的层级(深度)。根节点是第 0 层,然后是第 1 层、第 2 层,... ,直到叶子节点

                                                          label: {
                                                              normal: {
                                                                       position: 'top',//标签的位置。
                                                                       rotate: -90,//标签旋转。从 -90 度到 90 度。正值是逆时针。
                                                                       verticalAlign: 'middle',//文字垂直对齐方式,默认自动。
                                                                       align: 'right',//文字水平对齐方式,默认自动。
                                                                        fontSize: 12,//文字的字体大小
                                                                   }
                                                             },

                                                            leaves: {
                                                                       label: {
                                                                              normal: {
                                                                                     position: 'bottom',
                                                                                     rotate: -90,
                                                                                    verticalAlign: 'middle',
                                                                                     align: 'left',
                                                                                      fontSize: 8,//文字的字体大小
                                                                                 }
                                                                          }
                                                                },

                                                           animationDurationUpdate: 750

                                                       }
                                                   ]
                                          });
     

    再列出一些我觉得可能会用到的参数,方便以后使用:

    series(系列列表)

    1,layout:树图的布局,有 正交 和 径向 两种(正交就是水平或垂直;径向就是以根节点为原点,每一层为一环)

    2,orient:树图中 正交布局 的方向

    3,symbol:标记的图形(默认:emptyCricle)

    4,initialTreeDepth:树图初始展开的层级(深度)(默认:2)

    5,itemStyle:树图中每个节点的样式

    6,label:每个节点所对应的文本标签的样式

    7,rich:自定义富文本样式,在标签中做出非常丰富的效果。

    8,leaves:叶子节点的特殊配置

    9,emphasis:树图中个图形和标签高亮的样式

    10,data:数据格式是树状结构

    11,lineStyle:定义树图边的样式

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    delphi7在windows server 2003企业版上不能打开项目的选项(Options)窗口的解决方法
    简单的两个字“谢谢”,会让我坚持我的写作,我也要谢谢你们
    F41GUT 安装Windows server 2003系统后无法安装显卡驱动的解决办法
    远程桌面无法登录windows server 2003服务器
    F41GUT 安装Windows server 2003系统后无法安装显卡驱动的解决办法
    MS SQL Server 2000版在windows server 2003企业版系统上运行时造成数据库suspect的解决方法
    delphi7在windows server 2003企业版上不能打开项目的选项(Options)窗口的解决方法
    远程桌面无法登录windows server 2003服务器
    MS SQL Server 2000版在windows server 2003企业版系统上运行时造成数据库suspect的解决方法
    关于ajax 和josn
  • 原文地址:https://www.cnblogs.com/wasbg/p/11269636.html
Copyright © 2011-2022 走看看