ZoomCharts使用方法

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

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

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();
}