ZoomCharts使用方法

本篇没有讲解，只是自己的小笔记，有看到的网友想明白具体用法的可以来私信我

html 复制代码

  <div class="zoomChartsComponent">
    <div id="zoomCharts-demo"></div>
  </div>

javascript 复制代码

var ZoomChartsLicense = '';
var ZoomChartsLicenseKey = '';

var chart = null;

onMounted(() => {
  initialChart();
});

onBeforeUnmount(() => {
  document.getElementById("zoomCharts-demo").innerHTML = "";
  chart.remove();

  window.chart = null;
  chart = null;
});

// ========================================== 数据说明 ===================================
// {
// nodes:[
//     {
//         id:'唯一值',
//         name:"节点名称"，
//         image：'节点的图标'，
//         fillColor："更改节点的背景颜色"
//         LabelBgColor：修改节点标签的背景颜色，
// 	       TextColor：修改节点标签的字体颜色
// 	       TextSize: 修改节点标签的字体大小
//     }
// ]
// links:[
//     {
//         id:"线的唯一值",
//         from:"从那个节点出发，内容写节点的id",
//         to:"线到那个节点结束，内容是节点的id",
//         TextColor："标签的颜色"，
//         style:{
//   	       label:"添加标签",
//             toDecoration:"arrow" 表示线结束时使用箭头
//             fillColor：线的颜色
//         }
//     }
// ]
// }
// ======================================= 数据说明结束 ==================================
const initialChart = () => {
  if (window.chart) return false;

  chart = new ZoomCharts.NetChart({
    container: document.getElementById("zoomCharts-demo"),
    area: {
      height: null,
      style: { fillColor: "rgba(14,33,40,0)" },
    },
    auras: {
      cellSize: 10,
      overlap: true,
      enabled: true,
      defaultStyle: {
        showInLegend: true,
        shadowBlur: 35,
      },
      style: {},
    },
    data: {
      url: window.URLS.ZoomChartApi,
    },
    interaction: {
      selection: {
        allowMoveNodesOffscreen: false,
        lockNodesOnMove: false,
      },
      resizing: {
        enabled: true,
      },
      zooming: {
        zoomExtent: [0.3, 6],
        autoZoomExtent: [0.8, 3],
        autoZoomSize: 0.9,
        wheel: window.top === window,
        initialAutoZoom: "false",
      },
    },
    style: {
      nodeStyleFunction: function (node) {
        // 处理节点
        node.aura = node.data.auras;
        node.label = node.data.name;
        node.fillColor = node.data.fillColor || "";

        // 这块是处理图片的，如果传来的是base64则需要修改程base64的添加图片方法
        node.image = node.data.image;

        let _labelStyle = node.labelStyle;

        node.labelStyle = {
          ..._labelStyle,
          backgroundStyle: {
            fillColor: node.data.LabelBgColor || "",
            lineColor: null,
          },
          textStyle: {
            fillColor: node.data.TextColor || "#fff",
            font: `${node.data.TextSize || 10}px Arial`,
          },
        };
      },
      linkStyleFunction: function (link) {
        // 处理线的节点
        let _labelStyle = link.labelStyle;

        link.labelStyle = {
          ..._labelStyle,
          backgroundStyle: {
            fillColor: link.data.LabelBgColor || "",
            lineColor: null,
          },
          textStyle: {
            fillColor: link.data.TextColor || "#fff",
            font: `${link.data.TextSize || 7}px 微软雅黑`,
          },
        };
      },
      node: {
        radius: 20,
        imageCropping: true,
        shadowBlur: 12,
        display: "image",
        shadowColor: "#262626",
        fillColor: "rgba(44,233,233,0.8)",
      },
      nodeHovered: {
        shadowColor: "white",
        shadowBlur: 15,
      },
      nodeSelected: {
        lineColor: null,
      },
      selection: {
        fillColor: null,
        lineColor: null,
      },
      nodeFocused: {
        fillColor: "white",
        lineColor: null,
        shadowColor: "white",
        shadowBlur: 10,
      },
    },
    legend: {
      enabled: true,
      padding: 6,
      marker: { size: 22 },
      maxLineSymbols: 12,
    },
    nodeMenu: {
      enabled: false,
      showData: false,
    },
    events: {
      //   onClick: updatePieChart,
      //   onSelectionChange: netChartSelectionChange
    },
    navigation: {
      // 如果想要刷新展示全部数据，请把这  mode: "manual", 行代码注释
      mode: "manual",
      initialNodes: ["m-1"],
    },
    theme: NetChart.themes.dark,
  });
  window.chart = chart;

  setTimeout(() => {
    let DVSLBarLeft = document.getElementsByClassName("DVSL-bar-left")[0];
    DVSLBarLeft.style.display = "none";
    DVSLBarLeft.remove();
    let DVSLFontHeight = document.getElementsByClassName("DVSL-font-height")[0];
    DVSLFontHeight.remove();
  }, 200);
};
function netChartSelectionChange(event, args) {
  return false;
}
function updatePieChart() {}

function setupResizer() {
  function updateHeight() {
    chart.updateSettings({
      area: { height: Math.max(100, window.innerHeight) },
    });
  }
  window.addEventListener("resize", updateHeight);
  window.addEventListener("orientationchange", updateHeight);
  updateHeight();
}