博客
关于我
记录使用echarts的graph类型绘制流程图全过程(二)- 多层关系和圆形图片的设置
阅读量:458 次
发布时间:2019-03-06

本文共 4362 字,大约阅读时间需要 14 分钟。

本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置

图片的设置

如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态,即圆形就显示圆形的,矩形就显示矩形的,而案例中的图片是矩形的(如上图所示)。但是尼,我们在流程图的绘制过程中,一般用到的又是圆形,所以这时候就需要我们自己进行剪切了。主要运用cavans的clip功能,以下是具体的代码实现:

let picList = [];        let tempNodes = [];        for (let i in this.nodesObj) {          let item = this.nodesObj[i];          // 设置已知的信息          let obj = {            x: item.x,            y: item.y,            name: item.name,            id: item.id,            symbolSize: this.size,            category:              item.id === this.startNode || item.id === this.endNode ? 0 : 1          };                    // 如果有图标信息,进行图片处理,没有的直接放到节点信息中          if (item.icon) {            let p = this.getImgData(item.icon);            picList.push(p);            tempNodes.push(obj);          } else {            this.nodes.push(obj);          }        }                // 将图片处理放在promise中,然后使用promise.all,当所有的图片都剪切完毕后,赋值        if (picList.length > 0) {          let that = this;          Promise.all(picList).then(images => {            for (let i = 0, len = tempNodes.length; i < len; i++) {              tempNodes[i].symbol = 'image://' + images[i];              that.nodes.push(tempNodes[i]);            }            // console.log(this.nodes);            // 再设置节点            that.setLinks();            // 把数据设置到Echart中data            if (this.graphChart) {              var option = this.graphChart.getOption();              option.series[0].nodes = this.nodes;              option.series[0].links = this.links;              this.graphChart.setOption(option);            }          });        } else {          // 设置节点          this.setLinks();        }
// 获取icon的图片信息    getImgData (imgSrc) {      var fun = function (resolve) {        const canvas = document.createElement('canvas');        const contex = canvas.getContext('2d');        const img = new Image();        img.crossOrigin = '';        img.onload = function () {          // 设置图形宽高比例          let center = {            x: img.width / 2,            y: img.height / 2          };          let diameter = img.width;          let radius = diameter / 2; // 半径          canvas.width = diameter;          canvas.height = diameter;          contex.clearRect(0, 0, diameter, diameter);          contex.save();          contex.beginPath();          contex.arc(radius, radius, radius, 0, 2 * Math.PI); // 画出圆          contex.clip();          contex.drawImage(            img,            center.x - radius,            center.y - radius,            diameter,            diameter,            0,            0,            diameter,            diameter          ); // 在刚刚裁剪的园上画图          contex.restore(); // 还原状态          resolve(canvas.toDataURL('image/png', 1));        };        img.src = imgSrc;      };      var promise = new Promise(fun);      return promise;    }

实现效果:

多关系合并

echarts的关系最多支持2条显示,所以当2个节点之间存在多个关系的时候,可以把同一个指向的关系合并到一起如下图,周杰伦与刘德华的关系是偶像和同窗,刘德华和周杰伦的关系是好友

也就是获取两个节点之间同方向的线条的关系,然后进行合并,再显示在一条关系线上即可。

// 设置线条    setLinks () {      this.links = [];      this.relationList.forEach(item => {        let obj = {          source: item.source,          target: item.target,          value: item.relName,          label: {            show: true,            formatter: '{c}'          }        };        if (item.sameTotal >= 2) {          let hasLink = this.links.find(link => {            if (link.source === item.source && link.target === item.target) {              return true;            }          });          if (!hasLink) {            let res = this.findSameLinkRelation(              item.source,              item.target,              item.sameTotal            );            obj.value = res.value;            if (res.setLineStyle) {              obj.lineStyle = {                normal: {                  curveness: 0.2                }              };            }            this.links.push(obj);          }        } else {          this.links.push(obj);        }      });}
findSameLinkRelation (sid, tid, total) {      let value = [];      let setLineStyle = true;      this.relationList.forEach(item => {        if (item.source === sid && item.target === tid) {          value.push(item.relName);        }      });      if (total === value.length) {        setLineStyle = false;      }      value = value.join('、');      return {        value,        setLineStyle      };}

转载地址:http://zfubz.baihongyu.com/

你可能感兴趣的文章
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
mutiplemap 总结
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>