zooomcharts的使用 （1.18.8版本 + ts ）

zooomcharts的使用 （1.18.8版本 + ts ）

1. 在index.html里面引用 ZoomChartsLicense 和 ZoomChartsLicenseKey

2. 在页面的使用 因为父级没设置高度 图出现无限下来的问题

解决： 在父级上加position:relative 子级上加position: absolute

<div id="demo" style="width: 100%;height: 96%;position: absolute"></div>

3.方法的调用

        let zoomcharts =  require('../../zoomchart/zoomcharts/zoomcharts')     
        // zoomchart包的引用   都用的是本地的包
        let ac =  require('../../zoomchart/zoomcharts/assets/zc.css')
          // zoomchart 样式的引用

        this.chart = new zoomcharts.NetChart(
          {
            style: {
              node: {
                display: "image",
                lineWidth: 2,
                lineColor: "#2fc32f",
                // imageCropping: true,
                imageCropping: false
              },
              link: {
                toDecoration: "arrow", // 加箭头
                length: 1.5,
                width: 1,
              },
               "nodeStyleFunction": (node) => {
              if (node.data.color === "" || !node.data.color) {
                node.fillColor = "#D6DBDB";
              }

              // 当前点击的时候背景是黄色
              if (node.data.roles === 'master') {
                node.fillColor = "#FCFC7E";
              }

              // 显示什么头像
              node.image = require("../../assets/images/common/" + node.data.label + ".png")
              node.background = true;
              // 每个头像的名称
              if (node.data.label === 'account') {
                node.label = node.data.name; 
              } else if (node.data.label === 'device') {
                node.label = node.data.device_model;
              }
              // 点击的时候记录轨迹和标记颜色
              if (this.stpArr.length > 0) {
                this.stpArr.map(v => {
                  if (node.data.id === v.id) {
                    node.fillColor = "#FCFC7E";
                    node.label = node.label + "（轨迹" + v.sttp + ")";
                    node.labelStyle.textStyle.fillColor = '#7E7EFF';
                  }
                })
              }
                 // 记录背景标记的记录
              if (this.chamgeColorArr.length > 0) {
                this.chamgeColorArr.map(v => {
                  if (node.data.id === v.id) {
                    node.fillColor = v.color;
                  }
                })

              }
            }
              "linkStyleFunction": (links) => {
                links.label=  links.data.label
              }
            },
            container: document.getElementById("demo"),
            data: {
              preloaded: {
                nodes: this.nodes,
                links: this.links
              }
            },
            toolbar: {
              fullscreen: true,
              enabled: true
            },
            interaction: {selection: {lockNodesOnMove: true}},
           events: {   // 方法
               onClick: this.clickEvent,
              onHoverChange: this.hoverEvent,
              onDoubleClick: this.doubleClickEvent
            }
          }
        )

4. 在项目中使用到了双击头像标记背景

    //  点击标记背景颜色
  private doubleClickEvent(event) {
    if (event.clickNode) {
      this.$message.success("标记当前节点成功");
      event.clickNode.data.color = this.chamgeColor;
      this.chamgeColorArr.push({
        color: this.chamgeColor,
        id: event.clickNode.data.id
      })
    }
  }

5.在项目中使用到点击向下钻取数据

  // 点击重新获取数据
  private clickEvent(event) {
    if (event.clickNode) {
        let nodeName = event.clickNode.data.name
        let type = event.clickNode.data.label
        this.submitForm(nodeName, type, event.clickNode.data, true)
    }
  }

6.在项目中使用到了浮动显示数据

// 浮动nodes 和 links 显示数据
  private hoverEvent(event) {
    if (event.hoverNode !== null) {
      if (event.hoverNode.data) {
        this.nodesObj = event.hoverNode.data
        this.linksObj = {}
      }
    }
    if (event.hoverLink !== null) {
      if (event.hoverLink.data) {
        this.linksObj = event.hoverLink.data
        this.nodesObj = {}
      }
    }
  }

7. 因为我的项目出现dom加载延迟的问题 调用的时候

this.$nextTick(()=>{
            this.zoomChart()
          })

8. 点击重置标记

  // 点击重置标记
    private resColor(event){
      let exportedData = this.chart.exportData(false);
      exportedData.nodes.forEach(function(item){
        item.color = "";
      });
      this.$message.success("重置节点成功");
      this.chart.updateStyle();

    }