欢迎光临
我的个人博客网站

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> 

效果图
Vue 绘制echarts 词云和 Highcharts 词云

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> 

效果图
Vue 绘制echarts 词云和 Highcharts 词云

渲染数据格式举例

data = [{name: "小区",value: "283"},{name: "留言板",value: "101"},...,{name: "业主",value: "148"}] 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue 绘制echarts 词云和 Highcharts 词云
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏