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

原文转载：http://www.shaoqun.com/a/598585.html

跨境电商：https://www.ikjzd.com/

五洲会海购：https://www.ikjzd.com/w/1068

epc：https://www.ikjzd.com/w/488

echarts绘制词云方法echarts官网第一步安装echarts依赖，通过npm获取echarts,npminstallecharts--save,具体操作可以看echarts官网;第二步安装echarts词云插件，npminstallecharts-wordcloud--save;第三步下载好依赖之后在main.js引入文件，我这里最后将echarts写在原型prototype上import
淘粉8：https://www.ikjzd.com/w/1725
netporter：https://www.ikjzd.com/w/2132
点通：https://www.ikjzd.com/w/1913
口述：摄像头里女友威胁他要自杀(3/3)：http://lady.shaoqun.com/m/a/108521.html
亚马逊运营QA集锦（1394-1403）：https://www.ikjzd.com/home/132035
玩转站内CPC广告：https://www.ikjzd.com/tl/8427