vue实现词云图（echarts/Highcharts）

vue实现词云图

1、echarts实现
安装
注意版本

echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4npm install echarts@5npm install echarts-wordcloud@2

代码部分

<template><div class="cloud-wrap"><divref="cloudEl"class="cloud-box":id="title"style="height: 200px; width: 200px"></div></div>
</template><script>
import echarts from "echarts";
require('echarts-wordcloud')
// import wordcloud from "echarts-wordcloud";
export default {props: {title: "",//传过来的idchartData: {},//数据},data() {return {bgImg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAABTtJREFUeF7tnQGOnTAMRNmTtT3Ztidre7JWkUDis3xwgjOOJ4O00rYKhHieJ074/P1YdEwdgY+pR6/BLwJgcggEgACYPAKTD18OIAAmj8Dkw5cDCIDJIzD58Gd2gO/LspSfPzsG9r9PgcaMAPxcluXzjboFgF8HKKhBmAmAku2/jWoWCAoo9McsANSIv4k+BQSzAFAyv0BQe9BDMAMAreJvsFDHiHpwa9Zb5/137kDtAuwAPM1+ehdgBqCl8JvOBZgB8Mp+ahdgBcAz+6mXhawAeGc/rQswAtAj+2ldgBGAXtlP6QJsAPTMfkoXYAOgd/bTuQAbAP9qN/sb29PsDjIBcPWcv1Hny9MoYkcxiFUmVPZT1QIsAKCzn6YWYAEAnf00LsAAQFT2U7gAAwBR2U/hAtkBiM7+9C6QHYDo7E/vApkBGCX7U7tAZgBGyf7ULpAVgNGyP60LZAQA8cSvdes43TOCbACMLH7KqSATAKPa/plbpHnJdHQAthc0373N22rVqPM2EEp/Q756PgIA23v6JUjfVmVa3uNDifq0nw2EvzsowuBAATCbyC2Q7CGAweEJwF7kLZuZM7lF5NZzusHRCsAmdrFsidwqq895GxxN32zSAkCmatwnxLmu8qOm4KwBIMMaPJdU/e7WvCFlBUDi9xOr15VNEFgBQH3evlcwZr3uLQQWAJT9efFxAUDZnxeAcueXSW5xAAGQG4DLVYEFgNE+eJFbDvzdCwB8zIfq8TEAmgKG0rP6Zh4DoJ2/6pgPc0LZJi4AvD0sNUA5WXXAMJpW3YgbAHKBqrgP0fhW/Ns14mEYqgWG0NV8E6aHQtYpYOtVEJjjH9rwdgdwu7taAMp5giBU29vOzeLXTgH7ngXBrQ4hDarEfwKAnCBE38tOTXP+8QotU4CcgET8pw6gwnAMEJoy/0kReDZs1QQxMDwS38sBtqFrswgLwWPxvQEo1xMEGAhcxO8BgCDoD4Cb+L0AEAT9IHAVvycAgsAfAnfxewMgCHwgMD3Va+3q6UaQpV8VhpYonbfpKj7CAbREHFh8JACaDupA6J753juB1uFpOriPFEx8tANoOrgXH64Jogg8G7Y+ZHoOQ5el3hV3UQBoKviqCtT6o2qA/bDlAq8QwLMfPt8coNcj5MkB0DTwCkDIdBzS6TpuOYAA0FfM7RgIScaQTuUApwuz6YpArQJeOaj+TL9tX+m6VZQD6IunvuoiADyITnyNqTaCtAQ8JxXuyPAOVQBeehRcD3iHAuASAPhKIAoArQDOOYAXghEAaAXw3gQEQOIq3uPW4SuBCAfQM4CB9mYEgEfe+l4Dqgm0szVOKgCvgYGuBASAb/Z6XA1aCKIB0ArgHhEBcB8j6hbQlQDaAbQCsLEL0wXWkbaAbcqvrWCFIBoArQBsHMDqACQAKgBt4pdWAsAeq6aWJcDl2P9R5s/1/0b4W8iUAIzwIRBLYAsABYZIEGArAeQUELkCsAh/tJJoECDaQDoJXAG0CH8GQoEXfUBWAqwAeAh/FBw9hQmAhpTbirsiVq8DBQIdAD0DhxD+CFTvmgbizpBO1sj1AqCH3Vvdo1ehSLkKKEH13AmMFL73igFi/2UQSAco/Xm4wEjC9wABlv0RADyBYGThvUCAih8FQC0EmYR/AkLIONFTwD5AdwVUSECs1V9lu2HHGgnAEYb9v/cPaSpjPXzz/TOG8HGOAsDwqrHeoABgVdY4LgFgDBRrMwHAqqxxXALAGCjWZgKAVVnjuASAMVCszQQAq7LGcQkAY6BYmwkAVmWN4/oPekPmgYiq8REAAAAASUVORK5CYII=",};},watch: {},mounted() {this.drawCloud(this.title);},methods: {drawCloud(id) {var  myChart = echarts.init(document.getElementById(id));var maskImage = new Image(); //可以根据图片形状生成有形状的词云图maskImage.src = this.bgImg;let arr = this.chartData[this.title];let list = [];arr.map((item) => {let obj = {};obj.name = item.content_info;obj.value = item.frequency;obj.label = item.label_info;list.push(obj);});list.sort(function (a, b) {// return a - b; // 升序的顺序排列return a.value - b.value; // 降序的顺序排列});let colorList = ["#999999", "#666666", "#333333", "#FF060B"];let length = list.length;//按出现频率上色list.map((item, index) => {if (item.label == "不好") {item.color = 3;} else {if (index < length / 3 || index == length / 3) {item.color = 0;} else if (index < (length * 2) / 3 || index == (length * 2) / 3) {item.color = 1;} else {item.color = 2;}}});let option = {title: {text: this.title, //这里的参数是整个图标的标题 后面也可以加注释//   subtext: '888'left: "10%",textStyle: {fontSize: 12,},},tooltip: {show: true,confine:true,//限定在图表范围内},// backgroundColor:'#333944', // 画布背景色series: [{name: "评价",type: "wordCloud",// maskImage: maskImage, // 图片形状//maskImage的横纵比为1:1keepAspect: false,sizeRange: [8, 18], //词云的文字字号范围，默认是[12, 60]。rotationRange: [0, 0], //数据翻转范围shape: "star",width: "180px", //词云的宽高，默认是 75%、80%。height: "100%",// drawOutOfBound: true, // 超出画布的词汇是否隐藏drawOutOfBound: false,color: "#fff",left: "center",top: "center",right: null,bottom: null,// width: "100%",// height: "100%",gridSize: 2, //每个词之间的间距。// textPadding: 10,autoSize: {enable: true,minSize: 6,},textStyle: {normal: {fontFamily: "sans-serif",fontWeight: "bold",color: "#333", // 字体颜色color: function (params) {// 字体颜色return colorList[params.data.color];// return 'rgb(' + [//     Math.round(Math.random() * 160),//     Math.round(Math.random() * 160),//     Math.round(Math.random() * 160)// ].join(',') + ')';},},emphasis: {// focus: 'self',textStyle: {shadowBlur: 10,shadowColor: "#333",},},},data: list,},],};myChart.setOption(option,true);},},
};
</script><style>
.cloud-wrap {width: 100%;height: 100%;background-position: center;background-image: url("../../../../public/img/star.png");background-repeat: no-repeat; background-size:50%,/* background-image:'require(@/public/img/star .png)' ; */
}
.cloud-box {width: 100%;height: 100%;text-align: center;
}
</style>

Highcharts

安装
代码部分

<template><div><divref="cloudEl"class="cloud-box":id="title"style="height: 200px; width: 200px"></div></div>
</template><script>
import Highcharts from "highcharts/highcharts";
import wordcloud from "highcharts/modules/wordcloud";wordcloud(Highcharts);
export default {props: {title: "",chartData: {},},data() {return { };},watch: {},mounted() {this.drawCloud(this.title);},methods: {drawCloud(id) {let arr = this.chartData[this.title];let list=[]arr.map((item) => {let obj = {};obj.name = item.content_info;obj.weight = item.frequency;obj.label = item.label_info;list.push(obj);});list.sort(function (a, b) {// return a - b; // 升序的顺序排列return a.weight - b.weight; // 降序的顺序排列});let colorList = ["#999999", "#666666", "#333333", "#FF060B"];let length = list.length;list.map((item, index) => {if (item.label == "1") {item.color = colorList[3];} else {if (index < length / 3 || index == length / 3) {item.color = colorList[0];} else if (index < (length * 2) / 3 || index == (length * 2) / 3) {item.color = colorList[1];} else {item.color = colorList[2];}}});Highcharts.chart(id, {credits: { enabled: false },//导出exporting: { enabled: false },//提示关闭tooltip: { enabled: true },title: {text: this.title,floating: true,x: -50,style: {fontSize: 12,fontWeight: "600",},},//图形配置chart: {// spacingBottom: 15,spacingTop: 12,spacingLeft: 5,spacingRight: 5,backgroundColor: "rgba(255, 255, 255,0)",},series: [{type: "wordcloud", // 类型data: list,name: this.title,rotation: 90, //字体不旋转maxFontSize: 15,minFontSize: 8,},],});},},
};
</script>

vue实现词云图（echarts/Highcharts）相关推荐

词云图制作（wordcloud pyecharts）
现在,网上很多可视化的方法,有一种就是词云图. 词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,方便领略文本的主旨. ...
echarts 词云图使用 + vue
介绍根据自己定义Echarts词云图背景图,词云图可方便的对词组进行可视化的显示. 效果图一安装 npm install echarts-wordcloud 注意Echarts5.0的版本要对应 ...
vue echarts常用配置: label 换行、词云图、数据差距过大
一.使用柱状图时,因为数据差距过大,导致图表不好看修改: a. 将y轴改为对数轴, b. 数组中值不能为0,需要将值修改为undefined, c. tooltip中将数值为undefined重置为 ...
Echarts词云图
水果店词云图 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
echarts的词云图
echatrs词云图绘制成世界地图的形状这是我选择的形状图片 1.检查 echarts-wordcloud版本号首先,安装echarts和echarts-wordcloud 官网看到的说:echa ...
vue前端生成词云图的方法
我试过很多方法,自定义词云图.echarts-wordcloud.highcharts都是各种各样报错,基本是是找不到wordcloud模块,引入了也会报错,最终发现js2wordcloud可以用 i ...
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图先来看看效果啦重要代码如下所示,必须引入e ...
ECharts：echarts-wordcloud词云图
echarts-wordcloud词云库是基于wordcloud2.js的Apache ECharts版本实现. 词云库的引入 echarts-wordcloud词云库需要配合ECharts一起使用, ...
echarts词云图形状_使用pyecharts绘制词云图-淘宝商品评论展示
一.什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字.色彩.图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息. 制作词云图的网站有很多,简单方便,适合小批量操作. BI ...

vue实现词云图（echarts/Highcharts）

vue实现词云图（echarts/Highcharts）相关推荐

最新文章

热门文章