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"}]