• Echarts树图定制详解


    本文讲的是如何定制Echarts的tree图。主要包括下载、全局变量名修改、左键菜单添加、右键菜单添加、内容缩放、文本过滤高亮等。

    一 说明

    Echarts中提供了tree图,但实际项目中,该tree图并不一定能完全满足项目需求。例如:需要在鼠标右键到节点上添加一个下拉菜单,并且能进行操作。因此,就需要要对该图表进行定制。

    二 代码下载

    实际项目开发中,可能只需要一个tree图,就没必要下载全量的Echarts代码包了,因为完整的Echarts代码包非常大,10多万行代码呢,为提高项目性能,建议只下载用到的图标和组件。

    而Echarts也非常人性化的提供了在线定制构建能力,可以实现按需下载:http://www.echartsjs.com/builder.html

    三 全局变量名修改

    实际项目中可能已经引入了Echarts,但该Echarts版本存在问题:当前使用的Echarts版本太老了,该版本中还没有我们将要用到的Tree图,而要将整个版本升级到最新版本,或者有Tree图的版本,可能会导致之前图表出现接口不一致导致的BUG,尤其是已经上线或者即将上线的项目,这种升级风险很大。

    一个比较好的解决方案就是:引入两套Echarts代码。

    但必须解决两套Echarts图表代码冲突的问题,而这个冲突主要是Echarts对外提供的全局变量windows.echarts。只需要将一个Echarts代码包中的全局变量修改掉,然后使用修改后的全局变量生成图表即可。

    在下载的Echarts包中(uglify混淆后的包),搜echarts,将下边位置的echarts修改为dlgTreeEcharts:

     

    没有做uglify混淆压缩的Echarts包中,修改echarts的位置如下:

    定制完后,生成图表代码如下:

    var myChart = dlgTreeEcharts.init(document.getElementById('main'));

    四 hover菜单

     Echarts提供了比较多的事件接口,其中click、mouseover等是最基础的事件。

    详细参考:http://www.echartsjs.com/api.html#events

     1     myChart.on('mouseover', function (params) {
     2         console.log(params);
     3         $('.left-hover-menu').css({
     4             'display': 'block',
     5             'left': params.event.offsetX + 15,
     6             'top' : params.event.offsetY + 15
     7         });
     8     });
     9     myChart.on('mouseout', function (params) {
    10         console.log('out');
    11         $('.left-hover-menu').css({
    12             'display': 'none',
    13             'left': '-9999px',
    14             'top' : '-9999px'
    15         });
    16     });

    上边代码中,mouseover用于显示绝对定位的菜单,并设置其位置;mouseout用于隐藏菜单。

    五 右键菜单

    Echarts还提供了一个contextmenu事件,用于鼠标右击时触发。

    详细见:

    http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

    http://www.echartsjs.com/api.html#events

    注意:在添加右键菜单时,首先要给整个树图外层容器DOM绑定一个右键事件,返回false,避免浏览器默认事件触发,出现默认菜单。

     1     $('.tree-container').bind("contextmenu", function () { return false; });//防止默认菜单弹出
     2     myChart.on('contextmenu', function (params) {
     3         $('.right-click-menu').css({
     4             'display': 'block',
     5             'left': params.event.offsetX + 15,
     6             'top' : params.event.offsetY + 15
     7         });
     8     });
     9     $('.tree-container').click(function () {
    10         $('.right-click-menu').css({
    11             'display': 'none',
    12             'left': '-9999px',
    13             'top' : '-9999px'
    14         });
    15     })

    六 缩放功能

    Echarts中专门提供了用于缩放的组件datazoom,但tree图并没用用到该组件。这点令不少人大感恼火,研究尝试很久,使用datazoom配置到tree图后就是不生效甚至报错。最后,无意中看到tree的series中有个配置项是roam,用于控制缩放和平移,不按套路出牌啊,藏得真深。

    很简单,设置roam为true,缩放和平移功能都有了。

    roam官方介绍:http://www.echartsjs.com/option.html#series-tree.roam

    七 文字过滤高亮

    实际项目中,有这样的需求:由于树的节点特别多,需要提供搜索功能,例如:输入‘报表’,需要查找所有节点name中包含‘报表’两个字的,并将其高亮显示。

    这个可以通过Echarts提供的富文本标签和Tree组件的series.label.formatter来实现。

    http://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE

    http://www.echartsjs.com/option.html#series-tree.label.formatter

    http://www.echartsjs.com/option.html#series-tree.label.rich

    详细代码如下:

     1      label : {
     2         normal: {
     3             position: 'left',
     4             verticalAlign: 'middle',
     5             align: 'right',
     6             fontSize: 15,
     7             formatter: function (param) {
     8                 if (param.name.match('Tra')) {
     9                     return '{a|' + param.name + '}'
    10                 } else {
    11                     return param.name;
    12                 }
    13             },
    14             rich: {
    15                 a: {
    16                     color: 'red',
    17                     lineHeight: 10
    18                 }
    19             }
    20         }
    21     }

    代码说明:上边代码中,formatter通过设置为函数,对name进行判断,看是否有匹配的关键字‘Tra’(用户搜索的关键字,Tra只是举个例子),如果匹配上了,就返回一个匹配富文本的格式;下边的rich就是富文本样式设置。

    实际效果如下:

    八 各级文字位置设置

    Echarts对各级文字位置有个自适应设置:该节点展开时,文字自动放到左侧;节点收起来时,文字自动放到右侧了。

    实际项目中,为了达到视觉上整齐效果,需要无论节点是否展开都将文字设置为一个位置。

    实现方法:

    data接口中,有个label属性,label属性中的position用于设置当前节点的文字位置,可以通过这个接口将该级文本设置为固定位置。

    注意:不要设置label.align属性,否则可能位置有偏差。

    设置方法如下:

    效果如下:

    八 完整示例代码

    说明:由于data数据很多,没有在下边显示,可以参考Echarts官网示例数据:http://www.echartsjs.com/examples/editor.html?c=tree-basic

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Title</title>
      6     <script src="echarts.min.js"></script>
      7     <script src="jquery.js"></script>
      8     <style>
      9         .tree-container {
     10             border: 1px solid grey;
     11             position: relative;
     12         }
     13 
     14         .left-hover-menu {
     15             position: absolute;
     16             border: 1px solid grey;
     17             left: -99999px;
     18             top: -999999px;
     19         }
     20 
     21         .right-click-menu {
     22             position: absolute;
     23             border: 1px solid blue;
     24             left: -99999px;
     25             top: -999999px;
     26         }
     27     </style>
     28 </head>
     29 <body>
     30 <div class="tree-container">
     31     <div id="main" style=" 1200px;height:1000px;"></div>
     32 </div>
     33 
     34 <div class="left-hover-menu">
     35     <div>中文名: 报表</div>
     36     <div>英文名:data charts</div>
     37     <div>产品域定义:用于记录各种数据.</div>
     38 </div>
     39 
     40 <div class="right-click-menu">
     41     <div>新增业务对象</div>
     42     <div>编辑</div>
     43     <div>删除</div>
     44 </div>
     45 
     46 <script type="text/javascript">
     47 
     48     var myChart = dlgTreeEcharts.init(document.getElementById('main'));
     49 
     50     myChart.setOption(option = {
     51         tooltip: {
     52             show: false
     53         },
     54         series: [
     55             {
     56                 type: 'tree',
     57                 data: [data],
     58                 top: '1%',
     59                 left: '7%',
     60                 bottom: '1%',
     61                 right: '20%',
     62                 symbolSize: 7,
     63                 label: {
     64                     normal: {
     65                         position: 'left',
     66                         verticalAlign: 'middle',
     67                         align: 'right',
     68                         fontSize: 15,
     69                         formatter: function (param) {
     70                             if (param.name.match('Tra')) {
     71                                 return '{a|' + param.name + '}'
     72                             } else {
     73                                 return param.name;
     74                             }
     75                         },
     76                         rich: {
     77                             a: {
     78                                 color: 'red',
     79                                 lineHeight: 10
     80                             }
     81                         }
     82                     },
     83                     emphasis: {
     84                         fontSize: 25
     85                     }
     86                 },
     87                 leaves: {
     88                     label: {
     89                         normal: {
     90                             position: 'right',
     91                             verticalAlign: 'middle',
     92                             align: 'left'
     93                         },
     94 
     95                     }
     96                 },
     97                 expandAndCollapse: true,
     98                 roam: true,  // 缩放
     99                 animationDuration: 550,
    100                 animationDurationUpdate: 750
    101             }
    102         ]
    103     });
    104 
    105     myChart.on('mouseover', function (params) {
    106         console.log(params);
    107         $('.left-hover-menu').css({
    108             'display': 'block',
    109             'left': params.event.offsetX + 15,
    110             'top': params.event.offsetY + 15
    111         });
    112     });
    113     myChart.on('mouseout', function (params) {
    114         console.log('out');
    115         $('.left-hover-menu').css({
    116             'display': 'none',
    117             'left': '-9999px',
    118             'top': '-9999px'
    119         });
    120     });
    121 
    122     $('.tree-container').bind("contextmenu", function () {
    123         return false;
    124     });//防止默认菜单弹出
    125     myChart.on('contextmenu', function (params) {
    126         $('.right-click-menu').css({
    127             'display': 'block',
    128             'left': params.event.offsetX + 15,
    129             'top': params.event.offsetY + 15
    130         });
    131     });
    132     $('.tree-container').click(function () {
    133         $('.right-click-menu').css({
    134             'display': 'none',
    135             'left': '-9999px',
    136             'top': '-9999px'
    137         });
    138     });
    139 </script>
    140 </body>
    141 </html>

    参考资料&内容来源:

    Echarts官网:http://www.echartsjs.com/option.html#title

  • 相关阅读:
    数据结构课后
    idea 使用java 链接sqlservice 2008
    超链接 a href 提交表单通过post方式
    课程主页之课程接口
    课程主页之课程表数据
    课程表分析
    课程前端简单页面
    前台的登录注册
    ORM常用字段及参数与查询 -刘
    Celery配置与使用
  • 原文地址:https://www.cnblogs.com/zhaoweikai/p/9950691.html
Copyright © 2020-2023  润新知