echarts-wordcloud 热词云使用

1.安装

npm install echartsnpm install echarts-wordcloud

注意版本：echarts版本5只能和wordcloud版本2的一起使用；echarts版本4只能和wordcloud版本1的一起使用

2.在main.js引入

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

3.使用

<template><div id="echartsWordcloud" style="width:200px;height:200px;background-color:#0d071f"></div>
</template>
<script>
var run = 999var createRandomItemStyle2 = function () {var colorArr = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];var flag = parseInt(Math.random() * 10);return {normal: {fontFamily: '微软雅黑',color:colorArr[flag]}};
}
var createRandomItemStyle1 = function (params) {　　　　//此方法与下方配置中的第一个textStle下的color等同var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];return colors[parseInt(Math.random() * 10)];
}
export default{data() {return {data : [{name: "小区",value: "283"},{name: "留言板",value: "101"},{name: "业主",value: "148"},{name: "同学",value: "283"},{name: "老师",value: "101"},{name: "话痨",value: "148"}]}},mounted(){this.initEcharts(this.data)},methods:{initEcharts(data){let echartsWordcloud = this.$echarts.init(document.getElementById("echartsWordcloud"));let option = {title: {text: "标题",x: "center"},// backgroundColor: "#fff",series: [{type: "wordCloud",//用来调整词之间的距离gridSize: 10,//用来调整字的大小范围sizeRange: [14, 26],rotationRange: [0, 0],//随机生成字体颜色// textStyle: {//     fontFamily: 'sans-serif',//     // fontWeight: 'bold',//     // Color can be a callback function or a color string//     color: function () {//         // Random color//         return 'rgb(' + [//             Math.round(Math.random() * 160),//             Math.round(Math.random() * 160),//             Math.round(Math.random() * 160)//         ].join(',') + ')';//     }// },// 也可以自己定制颜色textStyle: {fontFamily: '微软雅黑',color: function () {var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];return colors[parseInt(Math.random() * 10)];}},// textStyle: {//     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: "100%",height: "100%",//数据data: data}]};echartsWordcloud.setOption(option);//点击事件echartsWordcloud.on("click",function(e){alert(e)})}}
}
</script>

效果图：

插件地址：echarts-wordcloud

echarts-wordcloud 热词云使用相关推荐

java怎么画词云_Matplotlib学习---用wordcloud画词云（Word Cloud）
画词云首先需要安装wordcloud(生成词云)和jieba(中文分词). 先来说说wordcloud的安装吧,真是一波三折.首先用pip install wordcloud出现错误,说需要安装Vis ...
python词云模糊_用Python和WordCloud绘制词云（内附让字体清晰的秘笈）
环境及模块: Win7 64位 Python 3.6.4 WordCloud 1.5.0 Pillow 5.0.0 Jieba 0.39 目标: 绘制安徽省2018年某些科技项目的词云,直观展示热点. ...
python应用学习（四）——wordcloud生成词云
python应用学习(四)--wordcloud生成词云前言一.准备二.导入库三.基本功能实现四.爬取书评并制作词云最后前言朋友最近在公众号发一些好书好剧推荐,然后我想着帮帮忙,做一个 ...
python心形词云_用Python和WordCloud绘制词云
环境及模块: Win7 64位 Python 3.6.4 WordCloud 1.5.0 Pillow 5.0.0 Jieba 0.39 目标: 绘制安徽省2018年某些科技项目的词云,直观展示热点. ...
网易云音乐评论生成Wordcloud（词云）
网易云音乐评论生成Wordcloud(词云) 1 前言 1.1 目的本篇主要介绍网易云音乐爬取歌曲知足的评论生成词云,可以结合新浪微博生成词云学习. 1.2 工具 Wordcloud 词云(pip ...
python词云库wordcloud自定义词云制作步骤详解
读书使人充实,讨论使人机智,笔记使人准确-.凡有所学,皆成性格. ---- (英国)培根文章目录 wordcloud库常规方法第三方库读取文件自定义绘制指定形状的词云 wordcloud库常规 ...
利用pyecharts的wordcloud实现词云（可结合Pandas数据分析和jieba分词）
pyecharts的wordcloud使用 1.主文件 WordCut.py # 导入pandas,用于数据提取 import pandas as pd # 导入jieba分词,可用于文章分词 imp ...
java使用wordcloud生成词云
1.引入maven依赖 <dependency><groupId>com.kennycason</groupId><artifactId>kumo-co ...
echarts社区热词图、echart金字塔图
目录热词图+会轻盈的浮动金字塔占比图三层金字塔图带label的4层金字塔图+背影普通三层三种颜色金字塔热词图+会轻盈的浮动 let colorList = ['#CF4645','#B58 ...
python——读取docx文档wordcloud生成词云并进行词频统计
文章目录环境准备导入库读取docx并进行分词词频词云设置背景图片(可选) 生成词云保存词云并显示环境准备 # 不是docx,是python-docx!!!!!!! pip instal ...

echarts-wordcloud 热词云使用

1.安装

2.在main.js引入

3.使用

echarts-wordcloud 热词云使用相关推荐

最新文章

热门文章