VUE根据图片做图片形状的词云效果

VUE根据图片形状制作词云效果

针筒图片：（是png）

 效果图：（文章底部有完整代码）

限制横竖显示， 在两种颜色中随机。

爱心图片：（是白底的png）

效果图：完全随机颜色，看下面代码

 盾牌图片：

 效果图：

使用 echarts-wordcloud

npm install echarts
npm install echarts-wordcloud

 需要注意版本号，echarts-wordcloud 需要是2.0以上，echarts需要是5.0以上

代码：

<template><div class="char2" id="char2" ref="chart"></div>
</template>
<script>import * as echarts from 'echarts';import 'echarts-wordcloud';//转换图片为base64函数function getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);return dataURL;}export default {data() {return {worddata: [],image: ""};},mounted() {let list = []let i = 1;for (i; i < 80; i++) {let aa = {name: 'word' + i,value: i}list.push(aa)}this.worddata = list;var image = new Image();image.src = require('@/assets/xin.png');image.setAttribute("crossOrigin", 'Anonymous')image.onload = ()=> {var base64 = getBase64Image(image);this.initCharts(base64); //初始化}},beforeDestroy() {// if (!this.chart) {//   return;// }// this.chart.dispose();// this.chart = null;},methods: {initCharts(base64) {var maskImage = new Image();console.log(base64);maskImage.src = base64console.log(this.worddata);let a = this.$refs.chart;let myChart2 = echarts.init(a);myChart2.setOption({title: {//text: "center"},backgroundColor: "#E6E6FA",tooltip: {},series: [{type: 'wordCloud',shape: 'circle',keepAspect: false,//此处添加图片的base64格式maskImage: maskImage,left: 'center',top: '-15px',width: '98%',height: '100%',right: null,bottom: null,sizeRange: [18, 60],rotationRange: [-90, 90],rotationStep: 45,gridSize: 1,drawOutOfBound: false,layoutAnimation: true,textStyle: {fontFamily: 'sans-serif',fontWeight: 'bold',color: function() {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {// focus: 'self',textStyle: {textShadowBlur: 5,textShadowColor: '#333'}},//数据data: this.worddata,}, ],});//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});//点击事件   myChart2.on('click', function(params) {alert(params.name);});},},};
</script>
<style scoped>.char2 {width: 600px;height: 600px;}
</style>

针筒图片代码：

横竖显示， 在两种颜色中随机。

<template><div class="char2" id="char2" ref="chart"></div>
</template>
<script>import * as echarts from 'echarts';import 'echarts-wordcloud';//转换图片为base64函数function getBase64Image(img) {let width =500;let height =200;var canvas = document.createElement("canvas");// canvas.width = img.width;// canvas.height = img.height;	canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);return dataURL;}export default {data() {return {worddata: [],image: ""};},mounted() {let list = []let i = 1;for (i; i < 220; i++) {let aa = {name: 'word' + i,value: i}list.push(aa)}this.worddata = list;var image = new Image();image.src = require('@/assets/msdebookh5/isPublic/zhen4.png');// image.src = require('@/assets/msdebookh5/isPublic/zhen.png');image.setAttribute("crossOrigin", 'Anonymous')image.onload = ()=> {var base64 = getBase64Image(image);this.initCharts(base64); //初始化}},beforeDestroy() {// if (!this.chart) {//   return;// }// this.chart.dispose();// this.chart = null;},methods: {initCharts(base64) {var maskImage = new Image();console.log(base64);maskImage.src = base64// console.log(this.worddata);let a = this.$refs.chart;let myChart2 = echarts.init(a);console.log('myChart2',myChart2);myChart2.setOption({title: {//text: "center"},backgroundColor: "#ffffff",tooltip: {},series: [{type: 'wordCloud',shape: 'circle',keepAspect: false,//此处添加图片的base64格式maskImage: maskImage,left: 'center',top: '-15px',width: '98%',height: '100%',right: null,bottom: null,// sizeRange: [0, 0],sizeRange: [2, 20],rotationRange: [90, 0],// rotationRange: [0, 90],// rotationRange: [-90, 90],rotationStep: 90,gridSize: 1,drawOutOfBound: false,layoutAnimation: true,textStyle: {// fontFamily: 'sans-serif',// fontWeight: 'bold',normal:{color: function() {let arr = ['a', 'b']let index = Math.floor(Math.random() * arr.length)let yanse =  index=='1'?'#38A0E7':'#50C6A3'return yanse;}}},emphasis: {// focus: 'self',textStyle: {textShadowBlur: 5,textShadowColor: '#333'}},//数据data: this.worddata,}, ],});//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});//点击事件   myChart2.on('click', function(params) {alert(params.name);});},},};
</script>
<style scoped>.char2 {width: 500px;height: 200px;}
</style>