<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>
