我在vue中引入viser-vue ，写的是词云，没有报错，也不显示词云，刷新页面偶尔会显示词云，有一点不稳定

[yangmeiz]

import { registerShape } from 'viser-vue'; import * as $ from 'jquery'; const DataSet = require('@antv/data-set');

const scale = [ { dataKey: 'x', nice: false }, { dataKey: 'y', nice: false }, ];

registerShape('point', 'cloud', { draw(cfg, container) { return container.addShape('text', { attrs: { fillOpacity: cfg.opacity, fontSize: cfg.origin._origin.size, rotate: cfg.origin._origin.rotate, text: cfg.origin._origin.text, textAlign: 'center', fontFamily: cfg.origin._origin.font, fill: cfg.color, textBaseline: 'Alphabetic', ...cfg.style, x: cfg.x, y: cfg.y, }, }); } }); var data = [{"value":9,"name":"AntV"},{"value":8,"name":"F2"},{"value":8,"name":"G2"},{"value":8,"name":"G6"},{"value":8,"name":"DataSet"},{"value":8,"name":"墨者学院"},{"value":6,"name":"Analysis"},{"value":6,"name":"Data Mining"},{"value":6,"name":"Data Vis"},{"value":6,"name":"Design"},{"value":6,"name":"Grammar"},{"value":6,"name":"Graphics"},{"value":6,"name":"Graph"},{"value":6,"name":"Hierarchy"},{"value":6,"name":"Labeling"},{"value":6,"name":"Layout"},{"value":6,"name":"Quantitative"},{"value":6,"name":"Relation"},{"value":6,"name":"Statistics"},{"value":6,"name":"可视化"},{"value":6,"name":"数据"},{"value":6,"name":"数据可视化"},{"value":4,"name":"Arc Diagram"},{"value":4,"name":"Bar Chart"},{"value":4,"name":"Canvas"},{"value":4,"name":"Chart"},{"value":4,"name":"DAG"},{"value":4,"name":"DG"},{"value":4,"name":"Facet"},{"value":4,"name":"Geo"},{"value":4,"name":"Line"},{"value":4,"name":"MindMap"},{"value":4,"name":"Pie"},{"value":4,"name":"Pizza Chart"},{"value":4,"name":"Punch Card"},{"value":4,"name":"SVG"},{"value":4,"name":"Sunburst"},{"value":4,"name":"Tree"},{"value":4,"name":"UML"},{"value":3,"name":"Chart"},{"value":3,"name":"View"},{"value":3,"name":"Geom"},{"value":3,"name":"Shape"},{"value":3,"name":"Scale"},{"value":3,"name":"Animate"},{"value":3,"name":"Global"},{"value":3,"name":"Slider"},{"value":3,"name":"Connector"},{"value":3,"name":"Transform"},{"value":3,"name":"Util"},{"value":3,"name":"DomUtil"},{"value":3,"name":"MatrixUtil"},{"value":3,"name":"PathUtil"},{"value":3,"name":"G"},{"value":3,"name":"2D"},{"value":3,"name":"3D"},{"value":3,"name":"Line"},{"value":3,"name":"Area"},{"value":3,"name":"Interval"},{"value":3,"name":"Schema"},{"value":3,"name":"Edge"},{"value":3,"name":"Polygon"},{"value":3,"name":"Heatmap"},{"value":3,"name":"Render"},{"value":3,"name":"Tooltip"},{"value":3,"name":"Axis"},{"value":3,"name":"Guide"},{"value":3,"name":"Coord"},{"value":3,"name":"Legend"},{"value":3,"name":"Path"},{"value":3,"name":"Helix"},{"value":3,"name":"Theta"},{"value":3,"name":"Rect"},{"value":3,"name":"Polar"},{"value":3,"name":"Dsv"},{"value":3,"name":"Csv"},{"value":3,"name":"Tsv"},{"value":3,"name":"GeoJSON"},{"value":3,"name":"TopoJSON"},{"value":3,"name":"Filter"},{"value":3,"name":"Map"},{"value":3,"name":"Pick"},{"value":3,"name":"Rename"},{"value":3,"name":"Filter"},{"value":3,"name":"Map"},{"value":3,"name":"Pick"},{"value":3,"name":"Rename"},{"value":3,"name":"Reverse"},{"value":3,"name":"sort"},{"value":3,"name":"Subset"},{"value":3,"name":"Partition"},{"value":3,"name":"Imputation"},{"value":3,"name":"Fold"},{"value":3,"name":"Aggregate"},{"value":3,"name":"Proportion"},{"value":3,"name":"Histogram"},{"value":3,"name":"Quantile"},{"value":3,"name":"Treemap"},{"value":3,"name":"Hexagon"},{"value":3,"name":"Binning"},{"value":3,"name":"kernel"},{"value":3,"name":"Regression"},{"value":3,"name":"Density"},{"value":3,"name":"Sankey"},{"value":3,"name":"Voronoi"},{"value":3,"name":"Projection"},{"value":3,"name":"Centroid"},{"value":3,"name":"H5"},{"value":3,"name":"Mobile"},{"value":3,"name":"K线图"},{"value":3,"name":"关系图"},{"value":3,"name":"烛形图"},{"value":3,"name":"股票图"},{"value":3,"name":"直方图"},{"value":3,"name":"金字塔图"},{"value":3,"name":"分面"},{"value":3,"name":"南丁格尔玫瑰图"},{"value":3,"name":"饼图"},{"value":3,"name":"线图"},{"value":3,"name":"点图"},{"value":3,"name":"散点图"},{"value":3,"name":"子弹图"},{"value":3,"name":"柱状图"},{"value":3,"name":"仪表盘"},{"value":3,"name":"气泡图"},{"value":3,"name":"漏斗图"},{"value":3,"name":"热力图"},{"value":3,"name":"玉玦图"},{"value":3,"name":"直方图"},{"value":3,"name":"矩形树图"},{"value":3,"name":"箱形图"},{"value":3,"name":"色块图"},{"value":3,"name":"螺旋图"},{"value":3,"name":"词云"},{"value":3,"name":"词云图"},{"value":3,"name":"雷达图"},{"value":3,"name":"面积图"},{"value":3,"name":"马赛克图"},{"value":3,"name":"盒须图"},{"value":3,"name":"坐标轴"},{"value":3,"name":""},{"value":3,"name":"Jacques Bertin"},{"value":3,"name":"Leland Wilkinson"},{"value":3,"name":"William Playfair"},{"value":3,"name":"关联"},{"value":3,"name":"分布"},{"value":3,"name":"区间"},{"value":3,"name":"占比"},{"value":3,"name":"地图"},{"value":3,"name":"时间"},{"value":3,"name":"比较"},{"value":3,"name":"流程"},{"value":3,"name":"趋势"},{"value":2,"name":"亦叶"},{"value":2,"name":"再飞"},{"value":2,"name":"完白"},{"value":2,"name":"巴思"},{"value":2,"name":"张初尘"},{"value":2,"name":"御术"},{"value":2,"name":"有田"},{"value":2,"name":"沉鱼"},{"value":2,"name":"玉伯"},{"value":2,"name":"画康"},{"value":2,"name":"祯逸"},{"value":2,"name":"绝云"},{"value":2,"name":"罗宪"},{"value":2,"name":"萧庆"},{"value":2,"name":"董珊珊"},{"value":2,"name":"陆沉"},{"value":2,"name":"顾倾"},{"value":2,"name":"Domo"},{"value":2,"name":"GPL"},{"value":2,"name":"PAI"},{"value":2,"name":"SPSS"},{"value":2,"name":"SYSTAT"},{"value":2,"name":"Tableau"},{"value":2,"name":"D3"},{"value":2,"name":"Vega"},{"value":2,"name":"统计图表"}] const dv = new DataSet.View().source(data); console.log(dv.range('value')); const range = dv.range('value'); console.log("range" + range); const min = range[0]; console.log(min); const max = range[1]; const imageMask = new Image(); imageMask.crossOrigin = ''; imageMask.src =require('../assets/timg.jpg') console.log(imageMask.src) imageMask.onload = () => { dv.transform({ type: 'tag-cloud', fields: ['name', 'value'], size: [640, 400], imageMask, font: 'Verdana', padding: 0, timeInterval: 5000, // max execute time rotate() { let random = ~~(Math.random() 4) % 4; if (random == 2) { random = 0; } return random 90; // 0, 90, 270 }, fontSize(d) { if (d.value) { return ((d.value - min) / (max - min)) * (32 - 8) + 8; } return 0; } }); this.$data.data = dv.rows; }

这是我写的代码

[evilucifero]

Thanks for sharing code. We will try to find out the problem. Otherwise, use code block(```) in markdown writing to display code is a good idea.

[evilucifero]

The code you given is just a part of an App. I can't run it in my environment. Would you like to paste a full component's code here ?