vue 词云 echarts-wordcloud

<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 },