1.在vue中安装echarts和echarts-wordcloud
npm install echarts
/*注意版本号,echarts5.0.0对应的echarts-woedcloud2.0.0版本*/
npm install echarts-wordcloud@2.0.0
2.在main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.创建子组件wordcloud.vue
<template>
<div id="mywordcloud_positive" :style="{width: '28vw', height: '28vh'}" :data="worddata"></div>
</template>
<script>
import echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
name: "wordcloud",
data () {
return {
msg: '',
worddata: [
{
name: "富强",
value: 1
},
{
name: "民主",
value: 2
},{
name: "文明",
value: 3
},
{
name: "和谐",
value: 4
},
{
name: "自由",
value: 5
},
{
name: "平等",
value: 6
},
{
name: "公正",
value: 7
},
{
name: "法治",
value: 8
}
]
}
},
mounted(){
this.initChart();
},
methods: {
initChart() {
const option = {
title: {
text: "正面关键词",
x: "10%"
},
/*背景色*/
backgroundColor: "",
series: [
{
type: "wordCloud",
//用来调整词之间的距离
gridSize: 10,
//用来调整字的大小范围
sizeRange: [14, 60],
rotationRange: [0, 0],
//随机生成字体颜色
// maskImage: maskImage, //字体以图片形状分布,支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
shape: "circle", //固定的形状
textStyle: {
normal: {
color: function() {
return (
"rgb(" +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
}
}
},
left: "left",
top: "center",
right: null,
bottom: null,
width: "100%",
height: "100%",
//数据
data: this.worddata
}
]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById("mywordcloud_positive"));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
};
},
}
}
</script>
3.在父组件引入
/*调用*/
<my-wordcloud></my-wordcloud>
/*引入*/
import wordcloud from "@/comments/echart/wordcloud.vue"
/*声明*/
components: {
"my-wordcloud": wordcloud,
},