老规矩,先上图
由于echarts2以后的版本中都没有字符云,所以在使用的时候需要先把字符云组件引入
首先下载字符云 cnpm install echarts-wordcloud
下载完成后,在main.js中引入字符云插件,前提是已经引入的echarts,关于echarts的部分请看https://blog.csdn.net/Chris__wang/article/details/85329799
//添加字符云,前提要有echarts
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
至此,我们就可以使用字符云了,下面是字符云的全部代码
<template>
<div id="wordCloud" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
this.drawCloud()
},
methods:{
drawCloud(){
let wordCloud = this.$echarts.init(document.getElementById('wordCloud'));
function createRandomItemStyle() {
return {
normal: {
color: 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
};
}
let text = ['Sam S Club','Macys','Amy Schumer','Jurassic World','Charter Communications','Chick Fil A','Planet Fitness','Pitch Perfect','Express','Home','Johnny Depp','Lena Dunham','Lewis Hamilton','KXAN','Mary Ellen Mark','Farrah Abraham','Rita Ora','Serena Williams','NCAA baseball tournament','Point Break']
let data = [];
for(var i = 0; i < text.length; i++){
let obj = {};
obj.name = text[i];
obj.value = Math.random()*10000;
data.push(obj)
}
console.log(data)
let option = {
title: {
text: 'Google Trends',
link: ''
},
tooltip: {
show: true
},
series: [{
name: 'Google Trends',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation : [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
textStyle: {//文字样式设置
normal: {
color: function() {//颜色
return 'rgb(' + [//返回随机生成的颜色
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {//鼠标划入样式
shadowBlur: 10,//文字阴影模糊度
shadowColor: '#333'//文字阴影颜色
}
},
data:data
}]
}
wordCloud.setOption(option)
}
}
}
</script>