const init = async () => {
const maskImage = new Image()
maskImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAABjJJREFUeF7tnYFx1TAMht1JoJMAkwCTQCeBTlKYBJgEqmt8DX5xbMfWL1tS7nq960vzYuuT/EuOnbvgh+keuDPdem98cACMQ+AAOACme+D91vofVnvBegR42gz/wQGw1wPk/XsATEYByxHgWwjh08b99xDCZ3s+EMxmAW9DCL92Bv+9AWAuCliNAHvvjxyYjAJWAfh7EO4pCpAYpN9mDosAfA0hfMlY2FwUsAjAkfdHHsj77824f7AnAkn10/h/djw8f0hRwsRhLQKQ8qcM4OwwFQUsAVDj/REMqgmQHlB/WAKgxvvNaQErALR4f4SAUkL1hSErAFDNP8781YZ1E1rAAgBXvN9MFLAAwBXvjwDQEKB6qlg7APsp39rQn56nWgtoB6DH+01EAc0AjPB+9VpAMwBHU75XhwG1k0SaATib9GkFQe0DI1oBGOn9ERaVUUArACO9f18eVvfAiEYAzh74aA396fnqooBGADi8X+0kkTYAesq+tdFB1VSxNgBapnxrDZ6ep2qSSBMACO9X98CIJgAQ3q9OC2gBAOn9qsrDWgAYMenTqglUaAENAEh4v5oooAEACe9XM1W8OgAjp3xbhwAVUWB1ACS9X0UUWBmAdI3/VQ8e8X/LPja2MgAcU75XYVh2kmhlADgnfVpBWHZvgZUAiIs66Tet729d6NFq1NbzKQo8bv9EQCyx0cQsAJBR9z/Uj28O/tZqFOnzIwgRhp8JIOKQcAOw99poYOqDd1tHzObFEsBECCIsf7boEf/Ouj6xBwCtXisBQek7U0jo/CHR5AgA99qSOeb9PI0axWhyBADnM3Xzdp2NO7tJV3MRgCZYcjtp2egqfa08XOia0wA0DFChxUWaDhCyq5zPRCBBQLX20qZKOrpIbytOn1soZQEOwdpgFJe0lQCg5s806bK2OfB3X5ykqgGAblvyqRt8t+n4xqLxqZm1ANC5nh6uA0b14pUWAByCNQBomppuBYD0gNcI5gWheVOrVgCiKPQawXwQNBu/VQPsm+zp4VwAXF6jcCUCxKY7BHNAUMz1z26zBwCvEcwBQFW6l7vVXgC8RiALQZfxezRA2myvEeBBqM71OYeA/bUdAhwETbk+CgCvEWAAuJTucWqAND30GgEfCEONP1IDeI2Az+jxypdzfdQQ4BDwQdCV60sA4DWCsTB0p3soDZB+jz9H0A8Cm/G5NIDXCPqNHq8wJNeXGgK8RtAHwrBcfwYAvEbQBsPwdE9KA3iNoM3wdDbM+CgN4OlhPQQsuf4MQ4BDUIaALdefDQCvERxbhDXdm0EDeI0g74oixpfQAF4juIWAPdefcQjY39NMu32VR+rxZ9xLbig14pGwni7xUvHLy6lZ9wGaOQI4ACE8PBuInqYSOaQjwEy7fYoYAF34SRspDQDyNS9SBi59L7z4s78haQCsC0CyhVkAZtjrv+SdqM/FhKBkBHAB+IqXSQBcAL4CIJYJSEYAB+AVAOgU8Cwi0DOAV0uICUHJCOAZwP8SU6QkLAWAC8Db/EJECDoAqESv/D0iQlAKABeAt0CICEEpAFwA3gIgIgSlAHABaBgALwHn9QBcCEpEAM8AjAPgAjAPADwTkIgADkAeAHgmIAGAZwB5AOCZgAQAngGcF4WgJWE0ALMJwPi2zplejgXNBKwCkK7Dm+ktaVAhiAZAWgCWFmDOAAJUCKIBkBKAZHjyLNp1o+agoeqj0HsToUIQDQBaALYaPoUjvh0F+e5EtQAgS8DUiY/P1hyx4oaMT/dOr9JFgQATgsgIgMgARho+jQZIEFQCwCkAOQ1/BELUCFwRAZYJICMABwBIwyNBgGUCSABGZgCShs+BQBph1AETgkgARmQAMxmeGwRISRgFQK8AnNnwXCBAhOAKAMAE0aj4vV2nd3dUSLtRAFwRgJAOGGz0o8tdBQEiBFEAtAhALYbvHRogQhAFQI0AjLV6arjmozYiqAGgVAK2YvgrEYFdCCIiQC4DoDGONknU7vGlaEYRgWoI1E/poQKAVAC64Y+ROAKBXQ8hIkAEwA1figUvn+9BYM8EEAA8bQ9jiO2GWdfv050VQaBhku1AAMB2837h/h5wAPr7cOkrOABLm6//5h2A/j5c+gr/ANTnRZCIJjYeAAAAAElFTkSuQmCC'
maskImage.onload = async () => {
const chart = await chartRef.value.init(echarts)
chart.setOption({
series: [{
type: 'wordCloud',
// 由于许多平台无法创建离屏canvas,故在lime-chart里使用canvas标签,但由于生成的数据为异步。所以需要设置等待时间。
wait: 100,
shape: 'circle',
maskImage: maskImage,
left: 'center',
top: 'center',
// width: '70%',
// height: '80%',
// right: null,
// bottom: null,
sizeRange: [12, 60],
rotationRange: [-90, 90],
rotationStep: 45,
gridSize: 8,
drawOutOfBound: false,
layoutAnimation: true,
textStyle: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
color: function () {
// Random color
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
focus: 'self',
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [{
name: '幸运转盘',
value: 10
},
{
name: '返回顶部',
value: 85
},
{
name: '心电图',
value: 8
},
{
name: '彩纸礼炮',
value: 60
},
{
name: 'LimeImage',
value: 90
},
{
name: '瀑布流',
value: 60
},
{
name: '颜色选择器',
value: 80
},
{
name: '图片剪刀',
value: 40
},
{
name: '图片压缩',
value: 85
},
{
name: '浮动气泡',
value: 20
},
{
name: '词云',
value: 800
},
{
name: 'LimeUi',
value: 150
},
{
name: 'LimeFileUtils',
value: 150
},
{
name: '文本省略',
value: 80
},
{
name: '小球飞入',
value: 20
},
{
name: '水波进度球',
value: 10
},
{
name: 'wordcloud',
value: 250
},
{
name: '电力',
value: 120
},
{
name: '翻滚文本动效',
value: 30
},
{
name: '徽标',
value: 90
},
{
name: '侧边栏',
value: 70
},
{
name: '浮动面板',
value: 50
},
{
name: 'indexes',
value: 70
},
{
name: 'resize',
value: 110
},
{
name: '拖拽排序',
value: 30
},
{
name: 'LimeShared',
value: 90
},
{
name: 'LimeIcon',
value: 120
},
{
name: '弹幕',
value: 130
},
{
name: 'pag',
value: 60
},
{
name: 'barcodegen',
value: 80
},
{
name: '录音管理',
value: 50
},
{
name: 'LimeCamera',
value: 30
},
{
name: 'LimeQrcode',
value: 10
},
{
name: 'echarts',
value: 110
},
{
name: 'LimeTheming',
value: 30
},
{
name: 'LimeSvga',
value: 20
},
{
name: 'dayuts',
value: 90
},
{
name: '进度环',
value: 40
},
{
name: 'chortcut',
value: 70
},
{
name: 'animateIt',
value: 80
},
{
name: 'LimeScan',
value: 60
},
{
name: 'LimeCall',
value: 70
},
{
name: '海报画板',
value: 120
},
{
name: 'clipboard',
value: 80
},
{
name: 'audio',
value: 90
},
{
name: '手写板',
value: 100
},
{
name: '防盗水印',
value: 30
},
{
name: 'loading',
value: 180
},
{
name: 'qrcodegen',
value: 10
},
{
name: 'tinycolor',
value: 10
}
]
}]
});
}
}
如何设置背景图片 好像报错?
0 个回复