Vue引入Echarts词云图实现数据可视化（实现源码+案例）

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>

效果

其他样式

1. 代码中通过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是一样的