2***@qq.com
2***@qq.com
  • 发布:2024-10-30 17:28
  • 更新:2024-10-30 17:28
  • 阅读:69

#插件讨论# 【 echarts-wordcloud 词云 - 陌上华年 】设置maskImage 报错

分类:uni-app
关联插件: echarts-wordcloud 词云
const init = async () => {  
  const maskImage = new Image()  
  maskImage.src = 'data:image/png;base64,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'  

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

如何设置背景图片 好像报错?

2024-10-30 17:28 负责人:无 分享
已邀请:

要回复问题请先登录注册