image.png

npm install echarts
npm install echarts-wordcloud

<template>
  <div id="main" style="height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  name: "worldCloud",
  mounted() {
    const list = [
      {name: "陜西省", value: "111"},
      {name: "安徽省", value: "222"},
      {name: "湖北省", value: "458"},
      {name: "海南省", value: "445"},
      {name: "福建省", value: "456"},
      {name: "山東省", value: "647"},
      {name: "山西省", value: "189"},
      {name: "河南省", value: "864"},
      {name: "四川省", value: "652"},
    ];
    const option = {
      tooltip: {
        show: true
      },
      series: [{
        name: '項目分析',
        type: 'wordCloud',
        sizeRange: [10, 50],//文字范圍
        //文本旋轉范圍，文本將通過rotationStep45在[-90,90]范圍內(nèi)隨機旋轉
        rotationRange: [-45, 90],
        rotationStep: 45,
        textStyle: {
          color: function () {//文字顏色的隨機色
            return 'rgb(' + [
              Math.round(Math.random() * 250),
              Math.round(Math.random() * 250),
              Math.round(Math.random() * 250)
            ].join(',') + ')';
          },
        },
        data: list
      }]
    };
    const myChartFour = echarts.init(document.getElementById('main'));
    //使用制定的配置項和數(shù)據(jù)顯示圖表
    myChartFour.setOption(option);
  }
}
</script>