<template>
<div class="cloud-wrap">
<div class="cloud-box" ref="cloudEl" />
</div>
</template>
<script>
import echarts from "echarts";
import wordcloud from "echarts-wordcloud";
export default {
props: {},
data() {
return {
wordcloud: wordcloud,
cloudData: [
{ value: 100, name: "文字" },
{ value: 400, name: "图片" },
{ value: 333, name: "参考" },
{ value: 855, name: "音视频" },
{ value: 343, name: "新媒体" },
{ value: 343, name: "测试1" },
{ value: 43, name: "测试2" },
{ value: 543, name: "测试3" },
{ value: 333, name: "测试4" },
{ value: 323, name: "测试5" },
{ value: 33, name: "测试6" },
{ value: 13, name: "测试7" },
{ value: 543, name: "测试8" },
{ value: 66, name: "测试9" },
{ value: 666, name: "测试10" },
],
};
},
mounted() {
this.drawCloud(this.$refs.cloudEl, this.cloudData);
},
methods: {
drawCloud(wrapEl, data) {
let myChart = echarts.init(wrapEl);
var option = {
tooltip: {
show: true,
},
series: [
{
name: "热词",
type: "wordCloud",
sizeRange: [10, 30],
rotationRange: [-20, 20],
shape: "circle",
left: "center",
top: "center",
width: "100%",
height: "80%",
gridSize: 3,
textPadding: 0,
autoSize: {
enable: true,
minSize: 6,
},
textStyle: {
normal: {
color: function () {
return (
"rgb(" +
[
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
].join(",") +
")"
);
},
},
emphasis: {
shadowBlur: 10,
shadowColor: "#333",
},
},
data: data,
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.cloud-wrap {
width: 490px;
height: 366px;
text-align: left;
.cloud-box {
width: 100%;
height: 100%;
}
}
</style>
延时向子组件传值
<wordCloudChart v-if="datas.bdrscy.length" :datas="datas.bdrscy"></wordCloudChart>
配置项
1 pie: {2 center : ['50%', '50%'], //默认全局居中
3 radius : [0, '75%'],4 clockWise : false, //默认逆时针
5 startAngle: 90,6 minAngle: 0, //最小角度改为0
7 selectedOffset: 10, //选中是扇区偏移量
8 itemStyle: {9 normal: {10 //color: 各异,
11 borderColor: '#fff',12 borderWidth: 1,13 label: {14 show: true,15 position: 'outer'
16 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
17 },18 labelLine: {19 show: true,20 length: 20,21 lineStyle: {22 //color: 各异,
23 width: 1,24 type: 'solid'
25 }26 }27 },28 emphasis: {29 //color: 各异,
30 borderColor: 'rgba(0,0,0,0)',31 borderWidth: 1,32 label: {33 show: false
34 //position: 'outer'
35 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
36 },37 labelLine: {38 show: false,39 length: 20,40 lineStyle: {41 //color: 各异,
42 width: 1,43 type: 'solid'
44 }45 }46 }47 }48 },49
50 map: {51 mapType: 'china', //各省的mapType暂时都用中文
52 mapLocation: {53 x : 'center',54 y : 'center'
55 //width // 自适应
56 //height // 自适应
57 },58 showLegendSymbol : true, //显示图例颜色标识(系列标识的小圆点)，存在legend时生效
59 itemStyle: {60 normal: {61 //color: 各异,
62 borderColor: '#fff',63 borderWidth: 1,64 areaStyle: {65 color: '#ccc'//rgba(135,206,250,0.8)
66 },67 label: {68 show: false,69 textStyle: {70 color: 'rgba(139,69,19,1)'
71 }72 }73 },74 emphasis: { //也是选中样式
75 //color: 各异,
76 borderColor: 'rgba(0,0,0,0)',77 borderWidth: 1,78 areaStyle: {79 color: 'rgba(255,215,0,0.8)'
80 },81 label: {82 show: false,83 textStyle: {84 color: 'rgba(139,69,19,1)'
85 }86 }87 }88 }89 },90
91 force : {92 //数据map到圆的半径的最小值和最大值
93 minRadius : 10,94 maxRadius : 20,95 density : 1.0,96 attractiveness : 1.0,97 //初始化的随机大小位置
98 initSize : 300,99 //向心力因子，越大向心力越大
100 centripetal : 1,101 //冷却因子
102 coolDown : 0.99,103 //分类里如果有样式会覆盖节点默认样式
104 itemStyle: {105 normal: {106 //color: 各异,
107 label: {108 show: false
109 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
110 },111 nodeStyle : {112 brushType : 'both',113 color : '#f08c2e',114 strokeColor : '#5182ab'
115 },116 linkStyle : {117 strokeColor : '#5182ab'
118 }119 },120 emphasis: {121 //color: 各异,
122 label: {123 show: false
124 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
125 },126 nodeStyle : {},127 linkStyle : {}128 }129 }130 },131
132 chord : {133 radius : ['65%', '75%'],134 center : ['50%', '50%'],135 padding : 2,136 sort : 'none', //can be 'none', 'ascending', 'descending'
137 sortSub : 'none', //can be 'none', 'ascending', 'descending'
138 startAngle : 90,139 clockWise : false,140 showScale : false,141 showScaleText : false,142 itemStyle : {143 normal : {144 label : {145 show : true
146 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
147 },148 lineStyle : {149 width : 0,150 color : '#000'
151 },152 chordStyle : {153 lineStyle : {154 width : 1,155 color : '#666'
156 }157 }158 },159 emphasis : {160 lineStyle : {161 width : 0,162 color : '#000'
163 },164 chordStyle : {165 lineStyle : {166 width : 2,167 color : '#333'
168 }169 }170 }171 }172 },173
174 island: {175 r: 15,176 calculateStep: 0.1 //滚轮可计算步长 0.1 = 10%
177 },178
179 markPoint : {180 symbol: 'pin', //标注类型
181 symbolSize: 10, //标注大小，半宽(半径)参数，当图形为方向或菱形则总宽度为symbolSize * 2
182 //symbolRotate : null, // 标注旋转控制
183 itemStyle: {184 normal: {185 //color: 各异，
186 //borderColor: 各异, // 标注边线颜色，优先于color
187 borderWidth: 2, //标注边线线宽，单位px，默认为1
188 label: {189 show: true,190 position: 'inside' //可选为'left'|'right'|'top'|'bottom'
191 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
192 }193 },194 emphasis: {195 //color: 各异
196 label: {197 show: true
198 //position: 'inside' // 'left'|'right'|'top'|'bottom'
199 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
200 }201 }202 }203 },204
205 markLine : {206 //标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
207 symbol: ['circle', 'arrow'],208 //标线起始和结束的symbol大小，半宽(半径)参数，当图形为方向或菱形则总宽度为symbolSize * 2
209 symbolSize: [2, 4],210 //标线起始和结束的symbol旋转控制
211 //symbolRotate : null,
212 itemStyle: {213 normal: {214 //color: 各异, // 标线主色，线色，symbol主色
215 //borderColor: 随color, // 标线symbol边框颜色，优先于color
216 borderWidth: 2, //标线symbol边框线宽，单位px，默认为2
217 label: {218 show: false,219 //可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
220 position: 'inside',221 textStyle: { //默认使用全局文本样式，详见TEXTSTYLE
222 color: '#333'
223 }224 },225 lineStyle: {226 //color: 随borderColor, // 主色，线色，优先级高于borderColor和color
227 //width: 随borderWidth, // 优先于borderWidth
228 type: 'solid',229 shadowColor : 'rgba(0,0,0,0)', //默认透明
230 shadowBlur: 5,231 shadowOffsetX: 3,232 shadowOffsetY: 3
233 }234 },235 emphasis: {236 //color: 各异
237 label: {238 show: false
239 //position: 'inside' // 'left'|'right'|'top'|'bottom'
240 //textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
241 },242 lineStyle : {}243 }244 }245 },246
247 textStyle: {248 decoration: 'none',249 fontFamily: 'Arial, Verdana, sans-serif',250 fontFamily2: '微软雅黑', //IE8- 字体模糊并且不支持不同字体混排，额外指定一份
251 fontSize: 12,252 fontStyle: 'normal',253 fontWeight: 'normal'
254 },
