wordcloud绘制词云图出现的mask失效问题

今天使用python制作词云图,在使用mask生成词云图的时候出现了mask失效的问题。

 

明明引用了透明底图片cloud.png作为mask,但最终词云图呈现并没有显现出云朵的形状。

 

解决方法: 用photoshop将图片背景改为纯白色,mask生效。

 

 提取图片的渐变颜色并用于词云图生成,最终呈现效果如上图。

要在Vue项目中使用echarts-wordcloud绘制词云图,可以按照以下步骤操作: 1. 安装echarts和echarts-wordcloud插件 ```bash npm install echarts --save npm install echarts-wordcloud --save ``` 2. 在需要使用词云图的组件中引入echarts ```javascript import echarts from 'echarts' ``` 3. 在mounted生命周期中初始化echarts实例,并设置词云图的配置项 ```javascript mounted() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom) const option = { series: [{ type: 'wordCloud', shape: 'circle', sizeRange: [20, 80], rotationRange: [-90, 90], rotationStep: 45, gridSize: 2, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'bold', color: function () { return 'rgb(' + [ Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ].join(',') + ')' } } }, data: [ { name: 'Apple', value: 10000 }, { name: 'Banana', value: 6181 }, { name: 'Orange', value: 4386 }, { name: 'Watermelon', value: 4055 }, { name: 'Pineapple', value: 2467 }, { name: 'Grape', value: 2244 }, { name: 'Mango', value: 1898 }, { name: 'Pear', value: 1484 }, { name: 'Cherry', value: 1001 }, { name: 'Peach', value: 987 }, { name: 'Kiwi', value: 900 } ] }] } myChart.setOption(option) } ``` 4. 在模板中添加echarts实例的容器 ```html <template> <div> <div ref="chart" style="width: 600px; height: 400px;"></div> </div> </template> ``` 以上就是在Vue项目中使用echarts-wordcloud绘制词云图的步骤,需要注意的是,词云图的配置项需要根据实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值