zooomcharts的使用 （1.18.8版本 + ts ）
2024-03-28 22:04:14
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.namelet type = event.clickNode.data.labelthis.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.datathis.linksObj = {}}}if (event.hoverLink !== null) {if (event.hoverLink.data) {this.linksObj = event.hoverLink.datathis.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();}
zooomcharts的使用 （1.18.8版本 + ts ）相关推荐
- 验证：使用node 12.18.4版本安装vue cli4没有问题（先卸载vue cli2再安装）
使用node 12.18.4版本安装vue cli4没有问题
- React 18 RC 版本发布啦，生产环境用起来！
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- 部署Kubernetes集群+Dashboard可视化页面-1.18.6版本
Kubeadm 部署 Kubernetes1.18.6 集群 一.环境说明 主机名 IP地址 角色 系统 k8s-master 192.168.182.150 k8s-master Centos7.6 ...
- linux mint 18内核版本,Linux Mint 18.2用户如何升级到Linux Mint 18.3“Sylvia”
Linux Mint 18.2"Sonya"操作系统的升级路径目前已正式开放,用户可将其升级到最新的Linux Mint 18.3"Sylvia"版本. Lin ...
- Ubuntu 18.04 版本中安装mysql 8的方法
安装说明:用的是Ubuntu的麒麟版本18.04 版本最新的. 数据库:是MySQL Community Server 8.0.11 为什么不安装5.7 版本呢? 因为5.7版本的数据库,支持的最高版 ...
- 小米盒子3刷回老版本，安装32位18.9版本KODI
16年买的小米盒子3,平时只用来看NAS里的视频,盒子不断自行升级到了最新的版本(好像是1.59版),广告即多运行又卡.所有能删的APP都删掉,只留下KODI,即使这样,KODI还是经常打不开. 1. ...
- 部署Kubernetes集群-1.18.6版本
Kubeadm 部署 Kubernetes1.18.6 集群 一.环境说明 主机名 IP地址 角色 系统 k8s-master 192.168.182.150 k8s-master Centos7.6 ...
- mysql8.018_MySQL8.0.18通用版本安装
环境说明: 系统版本:CentOS release 6.8 (Final) MySQL版本:mysql-8.0.18 内存:63G 空间:8T 1 配置本地yum仓库 2 下载安装包:wget htt ...
- 编译nginx1.18稳定版本-sticky-check模块
官网下载nginx源码包 wget http://nginx.org/download/nginx-1.18.0.tar.gz 下载sticky和check模块 编译sticky模块开启即可wget ...
最新文章
- 不止视觉，CMU研究员让机器人学会了听音辨物
- Vivado不同版本打开IP核锁定的解决办法
- Ubuntu侧边任务栏自动隐藏
- python的列表和元组
- PhotoShop更改图片背景色
- 小米造车是智能手机进入红海后的突围之举
- linux打包tar包命令,Linux压缩打包方法连载之一：tar命令
- MySQL如何跨机器迁移数据？
- python-mysql超简单银行转账
- 虚幻的东西_世间一切皆为虚幻
- 第 12 章 组合模式
- 理解SimpleExpandableListAdapter的构造函数
- nlp----基于检索的问答系统（bert相似度模型，倒排表）
- Vue项目npm run dev后 报错Cannot GET /
- JQuery each详细用法
- 用matlab产生hdb3码,MATLAB仿真 HDB3码程序
- Mugeda（木疙瘩）H5案例课—重力感应类H5-岑远科-专题视频课程
- 矩阵迹（trace）与行列式（determinate）的一些性质
- 算法学习的一些个人心得
- 传奇GOM引擎授权过期解决方法.