Vue 繪制echarts 詞雲和 Highcharts 詞雲

echarts繪制詞雲方法

echarts官網

• 第一步安裝echarts依賴，通過npm獲取echarts,npm install echarts --save,具體操作可以看echarts官網;
• 第二步安裝echarts詞雲插件，npm install echarts-wordcloud --save;
• 第三步下載好依賴之后在main.js引入文件，我這里最后將echarts寫在原型prototype上

  import echarts from 'echarts'
  require('echarts-wordcloud')
  Vue.prototype.$echarts = echarts

• 第四步繪制詞雲

  <template>
    <div id="echartsWordcloud" style="width:400px;height:400px;"></div>
  </template>
  <script>
  export default{
    mounted(){
      this.initEcharts()
    },
    methods:{
      initEcharts(data){
          let echartsWordcloud=this.$echarts.init(document.getElementById("echartsWordcloud"));
          let option = {
            title: {
              text: "",
              x: "center"
            },
            series: [
              {
                type: "wordCloud",
                //用來調整詞之間的距離
                gridSize: 10,
                //用來調整字的大小范圍
                sizeRange: [14, 26],
                rotationRange: [0, 0],
                //隨機生成字體顏色
                textStyle: {
                  normal: {
                    color: function() {
                      return (
                        "rgb(" +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ")"
                      );
                    }
                  }
                },
                //位置相關設置
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                width: "300%",
                height: "300%",
                //數據
                data: data
              }
            ]
          };
          echartsWordcloud.setOption(option);
          //點擊事件
          echartsWordcloud.on("click",function(e){})
      }
    }
  }
  </script>

效果圖

Highcharts繪制詞雲方法

Highcharts官網
第一步下載highcharts，可以選擇文件下載方式和npm安裝方式（npm install highcharts --save），官網都有教程，我選擇是文件下載方式。
第二步引入highcharts文件

  <script src="./lib/highcharts/highcharts.js"></script>
  <script src="./lib/highcharts/wordcloud.js"></script>

第三步繪制詞雲

  <template>
    <div id="highchartsWordcloud" style="width:400px;height:400px;"></div>
  </template>
  <script>
  export default{
    mounted(){
      this.initEcharts()
    },
    methods:{
      initEcharts(data){
         Highcharts.chart("highchartsWordcloud", {
           colors: ["#6A7AFE", "#9DBBEC", "#FFDB35", "#FFFFFF"],
           tooltip: {
             enabled: false
           },
           chart: {
             plotBackgroundColor: null,
             backgroundColor: null
           },
           title: {
             text: null
             // fontWeight: "400"
           },
           credits: {
             enabled: false // 禁用版權信息
           },
           exporting:{enabled:false},
           series: [
             {
               type: "wordcloud",
               data: data,
               cursor: "pointer",
               rotation: {
                 from: 0,
                 to: 0,
                 orientations: 5
               },
              //點擊事件
               events: {
                 click: function(e) {}
               }
             }
           ]
         });
      }
    }
  }
  </script>

效果圖

渲染數據格式舉例

data = [{name: "小區",value: "283"},{name: "留言板",value: "101"},...,{name: "業主",value: "148"}]