vue项目中使用echart生成词云图片

首先，安装插件

npm install eachart

npm install echarts-wordcloud

 在main.js中引入echarts-wordcloud

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
require('echarts-wordcloud')

 详细代码示例：

(该代码为上传图片进行OCR并提取关键字之后生成词云图片）

<template>
  <div>
  <div class="hello">
  	<input type="file"  id="files" @change="uploadConfig"  accept="image/*"   multiple >
  </div>
  <div class="container">
     <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      table:[],
    }
    
  },
  methods: {
  	uploadConfig(e){
	    	let filedata = new FormData();
	    	filedata.append('file',e.target.files[0]);
	    	this.axios.post('/file/upload',
					filedata,{
					headers: {
			            'Content-Type': 'multipart/form-data',
			        }
				  }
	    ).then(res => {
					console.log(res.data);
					this.table=res.data;
					this.drawLine();
	    });
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      let option = {
        title: {
          text: '词云结果',
          link: '#'
        },
        tooltip: {
          show: false
        },
        series: [{
          name: 'The Results',
          type: 'wordCloud',
          sizeRange: [30, 60],
          rotationRange: [-45, 90],
          tooltip: {
			        show: false,
			    },
          autoSize: {
            enable: true,
            minSize: 30
          },
          textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        	},
          data:this.table;
        }]
      }
 
      // 为echarts对象加载数据
      myChart.setOption(option) 
      myChart.on('click',function(params){
			    	var name = params.data.name;
			    	var value = params.data.value;
		  });     
    }
 	
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
	 width:100%;
}
.container{
		width:100%;
		position: absolute;
		top:60px;		
}
</style>