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 },
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容