颜色多样的echarts词云图
时间: 2023-09-29 10:02:47 浏览: 55
可以通过设置 echarts 中 wordCloud 的 textStyle 属性来实现颜色多样的词云图。具体步骤如下:
1. 在 echarts 中引入 wordCloud 组件。
```javascript
// 引入echarts
import echarts from 'echarts'
// 引入wordCloud组件
import 'echarts-wordcloud'
```
2. 定义词云图的数据。
```javascript
const data = [
{ name: 'JavaScript', value: 100 },
{ name: 'Java', value: 80 },
{ name: 'Python', value: 70 },
{ name: 'PHP', value: 60 },
{ name: 'C++', value: 50 },
{ name: 'C#', value: 40 },
{ name: 'HTML', value: 30 },
{ name: 'CSS', value: 20 },
{ name: 'React', value: 10 }
]
```
3. 定义词云图的配置项,其中设置 textStyle 属性为一个函数,在函数中根据词的 value 值设置不同的颜色。
```javascript
const option = {
series: [{
type: 'wordCloud',
data: data,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(',') + ')'
}
}
}
}]
}
```
4. 在页面中创建一个容器,并使用 echarts 初始化一个词云图。
```html
<div id="wordCloud" style="width: 600px; height: 400px;"></div>
```
```javascript
// 初始化echarts实例
const myChart = echarts.init(document.getElementById('wordCloud'))
// 设置词云图的配置项和数据
myChart.setOption(option)
```
这样,就可以实现颜色多样的 echarts 词云图了。需要注意的是,由于颜色是随机生成的,每次生成的词云图都会有不同的颜色分布。