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.方法的调用

 if (!this.chart) {
     

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

        this.chart = new zoomcharts.NetChart(
          {
     
            navigation: {
     
              focusNodeExpansionRadius: 2,
              initialNodes: [
                "m-1"
              ],
              mode: "manual"
            },
            style: {
     
              node: {
     
                display: "image",
                lineWidth: 2,
                lineColor: "#2fc32f",
                // imageCropping: true,
                imageCropping: false
              },
              link: {
     
                toDecoration: "arrow", // 加箭头
                length: 1.5,
                width: 1,
              },
              "nodeStyleFunction": (node) => {
     
                node.image = require('../../assets/images/common/Joe.png' )
                 // 这里是node是的头像 本地加载的
                node.label =node.data.name;
              },
              "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}},

          }
        )


      }

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

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