- 复制文件到前端页面目录，
- 引入需要显示的页面treeMind
- npm install错误的解决方案
<template> <div id="container"></div> </template> <script> import insertCss from "insert-css"; import G6 from "@antv/g6"; export default {
name: "treeMind", props: {
// 数据 data: {
type: Object, default() {
return {
}; } }, //高 height: {
type: Number, default() {
return 500; } } }, data() {
return {
} }, mounted() {
}, methods: {
init
(
mockData) {
insertCss(` .g6-component-tooltip { background-color: rgba(0,0,0, 0.65); padding: 10px; box-shadow: rgb(174, 174, 174) 0px 0px 10px; width: fit-content; color: #fff; border-radius = 4px; } `); const colors = {
BLUE: '#5B8FF9', RED: '#F46649', YELLOW: '#EEBC20', GREEN: '#5BD8A6', DARKGREY: '#A7A7A7', BROWN: '#A98847', }; // 组件props const props = {
data: mockData ? mockData : this.data, config: {
padding: [20, 50], defaultLevel: 3, defaultZoom: 0.8, modes: {
default: ['zoom-canvas', 'drag-canvas']}, }, }; const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 600; // 默认配置 const defaultConfig = {
width, height, modes: {
default: ['zoom-canvas', 'drag-canvas'], }, fitView: true, animate: true, defaultNode: {
type: 'flow-rect', }, defaultEdge: {
type: 'cubic-horizontal', style: {
stroke: '#CED4D9', }, }, layout: {
type: 'indented', direction: 'LR', dropCap: false, indent: 300, getHeight: () => {
return 60; }, }, }; // 自定义节点、边 const registerFn = () => {
/** * 自定义节点 */ G6.registerNode( 'flow-rect', {
shapeType: 'flow-rect', draw(cfg, group) {
const {
name = '', qty, collapsed, unit, color, rate } = cfg; const grey = '#CED4D9'; const rectConfig = {
width: 140, height: 50, lineWidth: 1, fontSize: 12, fill: '#fff', radius: 4, stroke: grey, opacity: 1, }; const nodeOrigin = {
x: -rectConfig.width / 2, y: -rectConfig.height / 2, }; const textConfig = {
//center / end / left / right / start textAlign: 'center', //top / middle / bottom / alphabetic / hanging textBaseline: 'bottom', }; const rect = group.addShape('rect', {
attrs: {
x: nodeOrigin.x, y: nodeOrigin.y, ...rectConfig, }, }); const rectBBox = rect.getBBox(); // name group.addShape('text', {
attrs: {
...textConfig, x: 0 , y: 20 + nodeOrigin.y, text: name.length > 28 ? name.substr(0, 28) + '...' : name, fontSize: 12, opacity: 0.85, fill: '#000', cursor: 'pointer', }, name: 'name-shape', }); // qty const qtyLabel = group.addShape('text', {
attrs: {
...textConfig, //调整数量的宽 x: -4, y: rectBBox.maxY - 12, text: qty, fontSize: 12, fill: '#000', opacity: 0.85, }, }); // unit group.addShape('text', {
attrs: {
...textConfig, //调整单位的宽 x: qtyLabel.getBBox().maxX +20, y: rectBBox.maxY - 12, text: unit, fontSize: 12, fill: '#000', opacity: 0.75, }, }); // bottom line background const bottomBackRect = group.addShape('rect', {
attrs: {
x: nodeOrigin.x, y: rectBBox.maxY - 4, width: rectConfig.width, height: 4, radius: [0, 0, rectConfig.radius, rectConfig.radius], fill: '#E0DFE3', }, }); // bottom percent const bottomRect = group.addShape('rect', {
attrs: {
x: nodeOrigin.x, y: rectBBox.maxY - 4, width: rate * rectBBox.width, height: 4, radius: [0, 0, rectConfig.radius, rectConfig.radius], fill: colors[color], }, }); // collapse rect if (cfg.children && cfg.children.length) {
group.addShape('rect', {
attrs: {
x: rectConfig.width / 2 - 8, y: -8, width: 16, height: 16, stroke: 'rgba(0, 0, 0, 0.25)', cursor: 'pointer', fill: '#fff', }, name: 'collapse-back', modelId: cfg.id, }); // collpase text group.addShape('text', {
attrs: {
x: rectConfig.width / 2, y: 0, textAlign: 'center', textBaseline: 'middle', text: collapsed ? '+' : '-', fontSize: 16, cursor: 'pointer', fill: 'rgba(0, 0, 0, 0.25)', }, name: 'collapse-text', modelId: cfg.id, }); } this.drawLinkPoints(cfg, group); return rect; }, update(cfg, item) {
const {
level, color, name} = cfg; const group = item.getContainer(); let mask = group.find(ele => ele.get('name') === 'mask-shape'); let maskLabel = group.find(ele => ele.get('name') === 'mask-qty-shape'); if (level === 0) {
group.get('children').forEach(child => {
if (child.get('name')?.includes('collapse')) return; child.hide(); }) if (!mask) {
mask = group.addShape('rect', {
attrs: {
x: -101, y: -30, width: 202, height: 60, opacity: 0, fill: colors[color] }, name: 'mask-shape', }); maskLabel = group.addShape('text', {
attrs: {
fill: '#fff', fontSize: 20, x: 0, y: 10, text: name.length > 28 ? name.substr(0, 16) + '...' : name, textAlign: 'center', opacity: 0, }, name: 'mask-qty-shape', }); const collapseRect = group.find(ele => ele.get('name') === 'collapse-back'); const collapseText = group.find(ele => ele.get('name') === 'collapse-text'); collapseRect?.toFront(); collapseText?.toFront(); } else {
mask.show(); maskLabel.show(); } mask.animate({
opacity: 1}, 200); maskLabel.animate({
opacity: 1}, 200); return mask; } else {
group.get('children').forEach(child => {
if (child.get('name')?.includes('collapse')) return; child.show(); }) mask?.animate({
opacity: 0}, {
duration: 200, callback: () => mask.hide() }); maskLabel?.animate({
opacity: 0}, {
duration: 200, callback: () => maskLabel.hide() }); } this.updateLinkPoints(cfg, group); }, setState(name, value, item) {
if (name === 'collapse') {
const group = item.getContainer(); const collapseText = group.find((e) => e.get('name') === 'collapse-text'); if (collapseText) {
if (!value) {
collapseText.attr({
text: '-', }); } else {
collapseText.attr({
text: '+', }); } } } }, getAnchorPoints() {
return [ [0, 0.5], [1, 0.5], ]; }, }, 'rect', ); G6.registerEdge( 'flow-cubic', {
getControlPoints(cfg) {
let controlPoints = cfg.controlPoints; // 指定controlPoints if (!controlPoints || !controlPoints.length) {
const {
startPoint, endPoint, sourceNode, targetNode} = cfg; const {
x: startX, y: startY, coefficientX, coefficientY} = sourceNode ? sourceNode.getModel() : startPoint; const {
x: endX, y: endY} = targetNode ? targetNode.getModel() : endPoint; let curveStart = (endX - startX) * coefficientX; let curveEnd = (endY - startY) * coefficientY; curveStart = curveStart > 40 ? 40 : curveStart; curveEnd = curveEnd < -30 ? curveEnd : -30; controlPoints = [ {
x: startPoint.x + curveStart, y: startPoint.y}, {
x: endPoint.x + curveEnd, y: endPoint.y}, ]; } return controlPoints; }, getPath(points) {
const path = [];
标签： g14hdcrq流量传感器