vue使用echarts画组织结构图


Posted in Vue.js onFebruary 06, 2021

昨天,写了一篇关于圆环进度条的博客(请移步:Vue圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!!

这种需求,自己用div+css也是可以实现的,但是没有什么动画效果,我的css3又很差劲,而且项目中已经使用到了折线图、饼状图、柱状图之类的图表,用的还是百度的echarts,所以这个组织结构图之类的需求也就用了百度的echarts来实现了。

以前用echarts写折线图、柱状图、饼状图的较多,它的API还算比较熟悉,但是画组织结构这样的树状图就很苦逼了,没用过啊,而且设计给的树状图的展示效果跟echarts树状图的展示效果相去甚远,我滴孩,又得一通费时费力的研究,设计图如下:

vue使用echarts画组织结构图

如图所示,一个树节点中可能会有两种不同的背景色,还有两种不同的文字颜色,每个节点展示的还是圆角矩形。有同学说了,echarts有设置圆角的API啊,直接设置不就完事了。我想说的是,它是提供的有这样的API,但是按照正常的套路实现不了啊。

从图上还可以看到一个几乎实现不了的效果,就是连接每个节点之间的线的拐角处都是直角而不是平滑的,而且echarts没有给出可以设置拐角处是直角的API,只是给了一个curveness(API的描述是树图边的曲度),这玩意儿使用了之后,也还是实现不了的。

从网上查了资料,有人说可以修改echarts的源码,这种解决办法我不推荐,是因为在vue或react项目中,echarts是需要通过安装在package.json中的,如果是多人并行开发,那么别人安装的echarts就不是你修改后的echarts,这就是问题所在。

最后用echarts画出来的效果还是很不错的,唯一没有实现的就是连接每个节点的线的拐角处不是直角,有好的解决办法的,还望不吝赐教,谢谢!展示一下最终的成果:

vue使用echarts画组织结构图

说了那么多,还是上代码吧,该代码是基于vue的,如果要使用在react中,稍微修改一下就可以了。

组件tree.vue:

<template>
 <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import { debounce } from "@/utils";

export default {
 props: {
  className: {
   type: String,
   default: "chart"
  },
  width: {
   type: String,
   default: "100%"
  },
  height: {
   type: String,
   default: "500px"
  },
  chartData: {
   type: Object,
   required: true
  }
 },
 data() {
  return {
   chart: null,
  };
 },
 watch: {
  chartData: {
   deep: true,
   handler(val) {
    this.setOptions(val);
   }
  }
 },
 mounted() {
  this.initChart();
  //是否需要自适应-加了防抖函数
  this.__resizeHandler = debounce(() => {
   if (this.chart) {
    this.chart.resize();
   }
  }, 100);
  window.addEventListener("resize", this.__resizeHandler);

  // 监听侧边栏的变化以实现自适应缩放
  const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
  sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler);
 },
 beforeDestroy() {
  if (!this.chart) {
   return;
  }
  window.removeEventListener("resize", this.__resizeHandler);
  this.chart.dispose();
  this.chart = null;

  const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
  sidebarElm.removeEventListener("transitionend", this.sidebarResizeHandler);
 },
 methods: {
  initChart() {
   this.chart = echarts.init(this.$el, "macarons");
   this.setOptions(this.chartData);
  
   const nodes = this.chart._chartsViews[0]._data._graphicEls;
   let allNode = 0;
   for(let index = 0; index < nodes.length; index++) {
    const node = nodes[index];
    if (node === undefined) {
     continue
    }
    allNode++;
   }
   
   const height = window.innerHeight;
   const width = window.innerWidth - 1000;
   const currentHeight = 85 * allNode;
   const currentWidth = 220 * allNode;
   const newHeight = Math.max(currentHeight, height);
   const newWidth = Math.max(currentWidth, width);
   const tree_ele = this.$el;
   // tree_ele.style.height = newHeight + 'px'; //设置高度自适应
   tree_ele.style.width = newWidth + 'px';  //设置宽度自适应
   this.chart.resize();

   this.chart.on('click', this.chartData.clickCallback);  //节点点击事件
  },
  setOptions(data) {
   this.chart.setOption({
    //提供数据视图、还原、下载的工具
    // toolbox: {
    //  show : true,
    //  feature : {
    //   mark : {show: true},
    //   dataView : {show: true, readOnly: false},
    //   restore : {show: true},
    //   saveAsImage : {show: true}
    //  }
    // },
    series: [
     {
      name: "统一授信视图",
      type: "tree",
      orient: "TB", //竖向或水平  TB代表竖向 LR代表水平
      top: '10%',
      initialTreeDepth: 10, //树图初始展开的层级(深度)
      expandAndCollapse: false,  //点击节点时不收起子节点,default: true
      symbolSize: [135, 65],
      itemStyle: {
       color: 'transparent',
       borderWidth: 0,
      },
      lineStyle: {
       color: '#D5D5D5',
       width: 1,
       curveness: 1,
      },
      data: [data]
     }
    ]
   });
  },
  sidebarResizeHandler(e) {
   if (e.propertyName === "width") {
    this.__resizeHandler();
   }
  }
 }
};
</script>

使用tree.vue的方法:

<template>
  <tree :chartData="treeData" />
</template>

<script>
import tree from './tree';

export default {
 data() {
  return {
   treeData: {
    label: {
     backgroundColor: '#F4F4F4',
     borderRadius: [0, 0, 5, 5],
     formatter: [
      '{first|综合授信额度}',
      '{second|(CR20190912000013)\n获批金额:100\n币种:人民币}',
     ].join('\n'),
     rich: {
      first: {
       backgroundColor: '#078E34',
       color: '#fff',
       align: 'center',
       width: 135,
       height: 30,
       borderRadius: [5, 5, 0, 0],
      },
      second: {
       color: '#888',
       align: 'center',
       lineHeight: 17,
      },
     }
    },
    children: [
     {
      label: {
       formatter: [
        '{first|渠道额度}',
       ].join('\n'),
       rich: {
        first: {
         backgroundColor: '#3AC082',
         color: '#fff',
         align: 'center',
         width: 135,
         height: 65,
         borderRadius: 5,
        },
       }
      },
      children: [{
       label: {
        formatter: [
         '{first|保理额度}',
        ].join('\n'),
        rich: {
         first: {
          backgroundColor: '#3AC082',
          color: '#fff',
          align: 'center',
          width: 135,
          height: 65,
          borderRadius: 5,
         },
        }
       },
       children: [{
        label: {
         backgroundColor: '#F4F4F4',
         borderRadius: [0, 0, 5, 5],
         formatter: [
          '{first|反向保理}',
          '{second|(CR20190912000013)\n获批金额:100\n币种:人民币}',
         ].join('\n'),
         rich: {
          first: {
           backgroundColor: '#078E34',
           color: '#fff',
           align: 'center',
           width: 135,
           height: 30,
           borderRadius: [5, 5, 0, 0],
          },
          second: {
           color: '#888',
           align: 'center',
           lineHeight: 17,
          },
         }
        },
       }]
      }]
     },
     {
      label: {
       formatter: [
        '{first|担保/(乐)集团/其他额度}',
       ].join('\n'),
       rich: {
        first: {
         backgroundColor: '#3AC082',
         color: '#fff',
         align: 'center',
         width: 135,
         height: 65,
         borderRadius: 5,
        },
       }
      },
      children: [{
       label: {
        formatter: [
         '{first|保理额度}',
        ].join('\n'),
        rich: {
         first: {
          backgroundColor: '#3AC082',
          color: '#fff',
          align: 'center',
          width: 135,
          height: 65,
          borderRadius: 5,
         },
        }
       },
       children: [{
        label: {
         backgroundColor: '#F4F4F4',
         borderRadius: [0, 0, 5, 5],
         formatter: [
          '{first|正向保理}',
          '{second|(CR20190912000013)\n获批金额:100\n币种:人民币}',
         ].join('\n'),
         rich: {
          first: {
           backgroundColor: '#B8D87E',
           color: '#fff',
           align: 'center',
           width: 135,
           height: 30,
           borderRadius: [5, 5, 0, 0],
          },
          second: {
           color: '#888',
           align: 'center',
           lineHeight: 17,
          },
         }
        },
       }]
      },
      {
       label: {
        formatter: [
         '{first|租赁额度}',
        ].join('\n'),
        rich: {
         first: {
          backgroundColor: '#3AC082',
          color: '#fff',
          align: 'center',
          width: 135,
          height: 65,
          borderRadius: 5,
         },
        }
       },
       children: [
        {
         label: {
          backgroundColor: '#F4F4F4',
          borderRadius: [0, 0, 5, 5],
          formatter: [
           '{first|车辆租赁}',
           '{second|(CR20190912000013)\n获批金额:100\n币种:人民币}',
          ].join('\n'),
          rich: {
           first: {
            backgroundColor: '#FF6C6A',
            color: '#fff',
            align: 'center',
            width: 135,
            height: 30,
            borderRadius: [5, 5, 0, 0],
           },
           second: {
            color: '#888',
            align: 'center',
            lineHeight: 17,
           },
          }
         },
        },
       ]
      }]
     }
    ]
   }
  }
 },
 components: {
  tree,
 }
};
</script>

看着代码不多,但是实现起来,各种查echarts的API和网上的资料,而且,由于效果图中一个节点处的文字可能会换行,文字的颜色也不同,同时有些节点处的背景色还会有两种,以及每个节点处显示的样式和文字都是不固定的,所以我们可能还要面临着将接口返回的数据再改造处理成我们想要的数据的繁琐问题,就如同传递给树节点的treeData的格式一样,相当麻烦,如果每个节点的样式都是一样的,那就好办多了,如官网的一个树状图的例子:https://www.echartsjs.com/examples/zh/editor.html?c=tree-vertical

从echarts的v4.7.0版本开始,给配置项series中加入一个API:edgeShape:'polyline'可实现树形图表连接每个节点的线的拐角处呈直角。

以上就是vue使用echarts画组织结构图的详细内容,更多关于vue 画组织结构图的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
如何封装Vue Element的table表格组件
Feb 06 #Vue.js
Vue实现圆环进度条的示例
Feb 06 #Vue.js
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
You might like
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
图解js图片轮播效果
2015/12/20 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
Python实现把数字转换成中文
2015/06/29 Python
目前最全的python的就业方向
2018/06/05 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python Django基础二之URL路由系统
2019/07/18 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
kfc实习自我鉴定
2013/12/14 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
会计入职心得体会
2016/01/22 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书