Vue使用echarts-wordcloud生成词云_vue中使用 chartjs-chart-wordcloud

介绍

Echarts词云控件，可方便的对词组进行可视化的显示。

源码工程地址：WordCloud

效果图

安装

npm install echarts
npm install echarts-wordcloud
1
2

使用方式

let echarts = require('echarts/lib/echarts')
require('echarts-wordcloud');
import 'echarts/theme/macarons.js'

export default {
  name: 'word_cloud_index',
  data: () => ({
    word_cloud_view: null,
    word_cloud_options: {},
    word_list: [{"name": "需求", "value": 10927}, {"name": "修改", "value": 5902}]
  }),
  methods: {
    draw_word_cloud_view() {
      if (this.word_cloud_view) {
        this.word_cloud_view.dispose();
      }
      this.word_cloud_view = document.getElementById('word_cloud_view_id') && echarts.init(document.getElementById('word_cloud_view_id'), 'macarons');
      this.word_cloud_view && this.word_cloud_view.setOption(this.word_cloud_options);
    },
    init_view_data() {
      let word_cloud_series = [{
        type: 'wordCloud',
        shape: 'circle',
        //maskImage: maskImage,
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [6, 60],
        rotationRange: [-45, 90],
        autoSize: {
          enable: true,
          minSize: 6
        },
        textPadding: 0,
        // rotationStep: 45,
        // gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function () {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 256),
                Math.round(Math.random() * 256),
                Math.round(Math.random() * 256)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: this.word_list
      }]

      this.word_cloud_options = {
        series: word_cloud_series
      }
      this.word_cloud_view.setOption(this.word_cloud_options)
    },
  },
  mounted() {
    this.draw_word_cloud_view()
    this.init_view_data()
  },
  render(h) {
    return h('div', {
      attrs: {id: 'word_cloud_view_id'},
      style: {
        height: '400px',
        width: '400px'
      }
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

参数说明

插件地址：echarts-wordcloud