|
|
|
|
@ -2,16 +2,22 @@
|
|
|
|
|
<div class="dpiePanel" id="dpieWrap">
|
|
|
|
|
<div class="dpieLegend">
|
|
|
|
|
<div class="dpieRow" v-for="item in data" :key="item.name">
|
|
|
|
|
<div class="flex-center">
|
|
|
|
|
<div
|
|
|
|
|
class="dpieIcon"
|
|
|
|
|
:style="{ backgroundColor: item.itemStyle.color }"
|
|
|
|
|
:style="{ backgroundImage: `url(${item.itemStyle.icon})` }"
|
|
|
|
|
></div>
|
|
|
|
|
|
|
|
|
|
<div class="dpieNameWrap">
|
|
|
|
|
<div class="dpieName">{{ item.name }}</div>
|
|
|
|
|
<div
|
|
|
|
|
class="dpieValue"
|
|
|
|
|
:style="{
|
|
|
|
|
color: item.itemStyle.tcolor,
|
|
|
|
|
textShadow: item.itemStyle.textShadow,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
{{ item.value }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dpieValue">{{ item.value }}</div>
|
|
|
|
|
<div class="dpieRate">
|
|
|
|
|
{{ ((100 * item.value) / total).toFixed(0) }}%
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -21,7 +27,6 @@
|
|
|
|
|
:style="{
|
|
|
|
|
height: parseInt(viewH) + 'px',
|
|
|
|
|
width: 2 * viewH + 'px',
|
|
|
|
|
marginLeft: parseInt(0.5 * viewH) + 'px',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<div ref="dpieWrapRef" class="dpieWrap"></div>
|
|
|
|
|
@ -37,17 +42,33 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
name: "按照要求整改",
|
|
|
|
|
value: 528,
|
|
|
|
|
name: "已整改",
|
|
|
|
|
value: 228,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#FFC052",
|
|
|
|
|
color: "#378DFF",
|
|
|
|
|
icon: require("@/assets/images/team/yzgi.png"),
|
|
|
|
|
tcolor: "##E3F6FF",
|
|
|
|
|
textShadow: "0px 0px 9px rgba(87,207,255,0.88)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "安全隐患企业",
|
|
|
|
|
value: 128,
|
|
|
|
|
name: "未按要求整改",
|
|
|
|
|
value: 21,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#FF745A",
|
|
|
|
|
color: "#DC4E4E",
|
|
|
|
|
icon: require("@/assets/images/team/wzgi.png"),
|
|
|
|
|
tcolor: "#FF7757",
|
|
|
|
|
textShadow: "0px 0px 9px rgba(255,119,87,0.88)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "整改中",
|
|
|
|
|
value: 50,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#EBCD6C",
|
|
|
|
|
icon: require("@/assets/images/team/zgzi.png"),
|
|
|
|
|
tcolor: "#FFF5E3",
|
|
|
|
|
textShadow: "0px 0px 9px rgba(255,202,87,0.88)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
@ -62,7 +83,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let temp = this.getHeight();
|
|
|
|
|
let height = parseInt(temp / 3);
|
|
|
|
|
let height = parseInt(temp / 5);
|
|
|
|
|
this.viewH = 2 * height;
|
|
|
|
|
console.log(height);
|
|
|
|
|
|
|
|
|
|
@ -162,10 +183,10 @@ export default {
|
|
|
|
|
show: false,
|
|
|
|
|
boxHeight: boxHeight, //圆环的高度
|
|
|
|
|
left: 0,
|
|
|
|
|
top: -18, //3d饼图的位置
|
|
|
|
|
top: -22, //3d饼图的位置
|
|
|
|
|
viewControl: {
|
|
|
|
|
//3d效果可以放大、旋转等，请自己去查看官方配置
|
|
|
|
|
alpha: 24, //角度
|
|
|
|
|
alpha: 22, //角度
|
|
|
|
|
distance: 120, //调整视角到主体的距离，类似调整zoom
|
|
|
|
|
rotateSensitivity: 0, //设置为0无法旋转
|
|
|
|
|
zoomSensitivity: 0, //设置为0无法缩放
|
|
|
|
|
@ -183,7 +204,7 @@ export default {
|
|
|
|
|
series.sort((a, b) => {
|
|
|
|
|
return b.pieData.value - a.pieData.value;
|
|
|
|
|
});
|
|
|
|
|
return (height * 50) / series[0].pieData.value;
|
|
|
|
|
return (height * 60) / series[0].pieData.value;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
|
|
|
@ -280,7 +301,7 @@ export default {
|
|
|
|
|
radius: ["80%", "80%"],
|
|
|
|
|
center: ["50%", "50%"], //指示线的位置
|
|
|
|
|
itemStyle: {
|
|
|
|
|
opacity: 0,
|
|
|
|
|
opacity: 1,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
@ -313,7 +334,7 @@ export default {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: vw(30);
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 200px;
|
|
|
|
|
width: 140px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
@ -321,26 +342,21 @@ export default {
|
|
|
|
|
padding: vw(6) vw(8);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
background-color: rgba(108, 128, 151, 0.1);
|
|
|
|
|
.dpieIcon {
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 38px;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
}
|
|
|
|
|
.dpieName {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #d0deee;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #fff5e3;
|
|
|
|
|
}
|
|
|
|
|
.dpieValue {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
.dpieRate {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
loveflow
11 months ago
