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();
}
相关推荐
wan5555cn3 小时前
多张图片生成视频模型技术深度解析
人工智能·笔记·深度学习·算法·音视频
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
雁于飞4 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
Ro Jace5 小时前
心灵笔记:第一性原理学习与实践
笔记
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习