@TOC
Echarts利用echarts-wordcloud实现
安装依赖
npm install echarts-wordcloud -S页面引入使用
很简单，直接给大家上案例源码
<template>
<div id="container"/>
</template>
<script>
import 'echarts-wordcloud'
export default {
mounted () {
const data = [{
name: '乖巧',
value: 100
}, {
name: '可爱',
value: 90
}, {
name: '纯洁',
value: 80
}, {
name: '机灵',
value: 70
}, {
name: '活泼',
value: 55
}]
const chart = this.$echarts.init(document.getElementById('container'))
chart.setOption({
series: [{
type: 'wordCloud',
data
}]
})
}
}
</script>
<style lang="scss" scoped>
#container {
width: 100%;
height: 100%;
}
</style>
效果
其他样式
- 代码中通过textStyle属性的设置可以让词云呈现不同的颜色
textStyle: {
normal: {
fontFamily: '微软雅黑',
color: function () {
var colors = ['#fda67e', '#81cacc', '#cca8ba', '#88cc81', '#82a0c5', '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
return colors[parseInt(Math.random() * 10)]
}
}
}这样每次刷新都会随机取色生成词云
2.textStyle下设置 emphasis属性设置阴影的效果
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}鼠标移过有阴影效果
v-charts实现
还可以在页面中利用v-cahrts实现更为简单，这里直接贴一个案例的源码
<template>
<ve-wordcloud :data="chartData" height="100%" :settings="settings"/>
</template>
<script>
export default {
data () {
return {
chartData: {
columns: ['name', 'value'],
rows: [{
name: '富强',
value: 100 * Math.random()
}, {
name: '民主',
value: 100 * Math.random()
}, {
name: '文明',
value: 100 * Math.random()
}, {
name: '和谐',
value: 100 * Math.random()
}, {
name: '自由',
value: 100 * Math.random()
}]
},
settings: {
color: ['#fda67e', '#81cacc', '#cca8ba', '#88cc81', '#82a0c5', '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
}
}
}
}
</script>
<style scoped>
</style>
也可以实现上图中的效果，使用更简单，配置属性跟上面使用echarts-wordcloud是一样的
