vue实现词云图
1、echarts实现
安装
注意版本
echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4
npm install echarts@5
npm install echarts-wordcloud@2
代码部分
<template>
<div class="cloud-wrap">
<div
ref="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: "",//传过来的id
chartData: {},//数据
},
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:1
keepAspect: 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>
<div
ref="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>