echarts词云图

<template>
	<div>
		<div class="fxbodyblock3">
			<div class="main3">
        <div
          class="fxplain3"
          ref="fxplain_ref3"
          :style="{ height: zoomNum * 300 + 'px', zoom: 1 / zoomNum }"
        ></div>
      </div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'',
		data(){
			return{
				zoomNum: window.screen.width / 1920, //1440x900		
			}		
		},
		methods:{
		fxplain3() {
			     const colorList = [
    "#2084D9",
    "#17BB51",
    "#8B70F5",
    "#00FCFF",
    "#F9BD3D",
    '#FD626C'
   
]
      let plains = this.$echarts.init(this.$refs.fxplain_ref3);
      plains.setOption({
    tooltip: {
        backgroundColor: "#fff",
        axisPointer: {
            type: "none"
        },
        textStyle: {
            color: "#565656",
            lineHeight: 28
        },
        padding: 12,
        extraCssText: "box-shadow: 0px 2px 8px 0px #cacaca;border-radius: 4px;opacity: 0.9;",
        formatter: function(p) {
            return `行业：${p.data.count}<br/>趋势：${(
              p.data.heat_diff_num / 100
            ).toFixed(2)}%`;
        }
    },
    series: [{
        type: "wordCloud",
        shape: "diamond",// cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形  triangle三角形，pentagon五角形，star五角星形
        left: "center",
        top: "center",
        width: "80%",
        height: "80%",
        right: null,
        bottom: null,
        sizeRange: [20, 40],  
		rotationRange: [0, 0],
        gridSize: 20,
        drawOutOfBound: false,
		
	
        textStyle: {
            normal: {
                fontFamily: "sans-serif",
                color: function() {
                    let index = Math.floor(Math.random() * colorList.length);
                    return colorList[index];
                }
            },
            emphasis: {
                fontWeight: "bold"
            }
        },
        data: [{
            
            "count": 1,//对应弹出框的行业
            "heat_diff_num": 200,//对应弹出框的趋势，换算后百分比显示
            "name": "餐饮业",//页面中显示的文字
            "value": 4,//必要的值
        }, {
           
            "count": 1,
            "heat_diff_num": 667,
            "name": "专业技术",
            "value": 2
        }, {
           
            "count": 512,
            "heat_diff_num": 511,
            "name": "零售业",
            "value": 1
        }, {
          
            "count": 961,
            "heat_diff_num": 479.5,
            "name": "科技推广",
            "value": 3
        }, {
         
            "count": 11753,
            "heat_diff_num": 404,
            "name": "批发业",
            "value": 4
        }, {
        
            "count": 3083,
            "heat_diff_num": 384,
            "name": "文化艺术",
            "value": 3
        }, {
        
            "count": 615,
            "heat_diff_num": 306.5,
            "name": "居民服务业",
            "value": 3
        }, {
          
            "count": 4405,
            "heat_diff_num": 292,
            "name": "专业技术",
            "value": 9
        }, {
           
            "count": 989,
            "heat_diff_num": 196.8,
            "name": "专业技术",
            "value": 3
        }, {
         
            "count": 1630,
            "heat_diff_num": 180,
            "name": "互联网行业",
            "value": 4
        }, {
		
			"count": 532,
            "heat_diff_num": 176,
            "name": "服务业",
            "value": 5
        }, {
           
            "count": 748,
            "heat_diff_num": 148.6,
            "name": "专业技术",
            "value": 4
        }, {
        
            "count": 1232,
            "heat_diff_num": 111,
            "name": "专业技术",
            "value": 2
        }, {
        
            "count": 817,
            "heat_diff_num": 101.125,
            "name": "专业技术",
            "value": 3
        }, {
          
            "count": 1522,
            "heat_diff_num": 100,
            "name": "专业技术",
            "value": 2
        }, {
 
            "count": 464,
            "heat_diff_num": 76,
            "name": "专业技术",
            "value": 7
        }, {
         
            "count": 463,
            "heat_diff_num": 65,
            "name": "专业技术",
            "value": 6
        },  ]
    }]

      });
    },	
		},
		mounted: function(){
			this.fxplain3()
		}
	}
</script>
<style type="text/css">
.fxgk .fxbodyblock3{
	width: 100%;
	height: 100%;
}
	.fxgk .main3{
		width: 100%;
		height: 305px;
	}
	.fxgk .fxplain3{
		width: 100%;
	}
</style>