Vue uses ecahrts word cloud chart

echarts word cloud chart is an extension of echarts

Install and use

1. Install dependencies

 npm install echarts

 npm install echarts-wordcloud

2.Introduce
main.js

import echarts from 'echarts';
Vue.prototype.$echarts = echarts

Introduce extensions into used components

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min"; 

</script>

3. Prepare a container for the word cloud diagram

<div class="wp-1 h-26">
 <div id="char2" ref="chart2" class="wp-1 hp-1"></div>
</div>

4. Add the initCharts() method to define the word cloud chart

export default{
data(){
	//定义需要展示的词语和数值（数值越大，字体会越大）
	worddata:[
                {
                    name: "Java",
                    value: 2300
                },
                {
                    name: "python",
                    value: 2000
                },
                
            ]
}，
mounted(){
this.initCharts() //调用定义词云图方法
},
methods:{
	//定义词云图并插入容器内
	initCharts(){
		let myChart2 = this.$echarts.init(this.$refs.chart2);
		let dou_live_word_result = this.worddata
		myChart2.setOption({
                        title: {
                            x: "center"
                        },
                        backgroundColor: "#fff",
                        
                        
                        series: [{
                            type: "wordCloud",
                            //用来调整词之间的距离
                            gridSize: 10,
                            //用来调整字的大小范围
                        
                            sizeRange: [14, 60],                                                                           
                            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                            // rotationRange: [-45, 0, 45, 90],
                            // rotationRange: [ 0,90],
                            rotationRange: [0, 0],
                            //随机生成字体颜色 
                            textStyle: {
                                normal: {
                                    color: function() {
                                        return(
                                            "rgb(" +
                                            Math.round(Math.random() * 255) +
                                            ", " +
                                            Math.round(Math.random() * 255) +
                                            ", " +
                                            Math.round(Math.random() * 255) +
                                            ")"
                                        );
                                    }
                                }
                            },
                            //位置相关设置 
                            left: "center",
                            top: "center",
                            right: null,
                            bottom: null,
                            width: "200%",
                            height: "200%",
                            //数据
                            data: dou_live_word_result
                        }]

                    })
	}
}
}

5. Complete the picture