In data processing projects, word cloud is often seen, this article will teach you how to make an Echarts word cloud in a VUE project. An image from Github.
Import the cloud map API
npm install echarts
npm install echarts-wordcloud
Copy the codeAdd Echart to main.js
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
require('echarts-wordcloud');
Copy the code
Use cloud images in your pages
type:”wordCloud”,
Data Format
[{
"value": 112,
"name": "08 was good to go."
},
{
"value": 231,
"name": "08 Strong"
},
{
"value": 131,
"name": "Start with lavida 08"
},
{
"value": 223,
"name": "1.0T2.0 is just right"
}]
Copy the codeThe complete Echart function
drawLine() {
let myChart = this.$echarts.init(
document.getElementById("myecharts-wordcloud")
);
let option = {
title: {
text: "Hot word".
textStyle: {
color: "#148D75".
},
top: 14,
left: 26,
},
series: [
{
type: "wordCloud".
size: ["80%"."80%"].
rotationRange: [0, 0],
textPadding: 0,
autoSize: {
enable: true.
minSize: 14,
},
left: "center".
top: "center".
right: null,
bottom: null,
textStyle: {
normal: {
color: function() {
return "#056E71"
},
},
},
data: [{
"value": 112,
"name":"The 08 runs fine"
},
{
"value": 231,
"name":"Strong paragraph 08"
},
{
"value": 131,
"name":"08 Lavida start with"
},
{
"value": 223,
"name":"1.0 t2.0 just right"
}
].
},
].
};
myChart.setOption(option, true);
},
Copy the codeCall the echarts function
this.drawLine();
- The value can be mounted or createdCopy the codeThe effect
The words in name are randomly colored
Modify the return value of textStyle
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(', ') + ') ';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '# 333'
}
},
Copy the code
Reference: https://github.com/ecomfe/echarts-wordcloud