|
|
|
@ -15,12 +15,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, onMounted, onBeforeUnmount } from "vue"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import "echarts-liquidfill"; |
|
|
|
import "echarts-liquidfill/src/liquidFill.js"; |
|
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import 'echarts-liquidfill'; |
|
|
|
import 'echarts-liquidfill/src/liquidFill.js'; |
|
|
|
defineOptions({ |
|
|
|
name: "RiskInspectionCard", |
|
|
|
name: 'RiskInspectionCard' |
|
|
|
}); |
|
|
|
const problemEchartRef = ref(); |
|
|
|
const questEchartRef = ref(); |
|
|
|
@ -33,144 +33,147 @@ const handleResize = () => { |
|
|
|
onMounted(() => { |
|
|
|
leftChart = echarts.init(problemEchartRef.value); |
|
|
|
|
|
|
|
const color = ["#FFBC37", "#429BF4"]; |
|
|
|
const color = ['#FFBC37', '#429BF4']; |
|
|
|
const dataStyle = { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
shadowBlur: 40, |
|
|
|
borderWidth: 10, |
|
|
|
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 |
|
|
|
}, |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影 |
|
|
|
} |
|
|
|
}; |
|
|
|
const placeHolderStyle = { |
|
|
|
normal: { |
|
|
|
color: "rgba(255, 255, 255, 0.4)", |
|
|
|
color: 'rgba(255, 255, 255, 0.4)', |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
color: "rgba(255, 255, 255, 0.4)", |
|
|
|
color: 'rgba(255, 255, 255, 0.4)' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
show: false |
|
|
|
} |
|
|
|
}; |
|
|
|
const legendName = ["数量", "问题数"]; |
|
|
|
const legendName = ['数量', '问题数']; |
|
|
|
const pieValue = [98, 56]; |
|
|
|
var pieData: any = []; |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
pieData.push({ |
|
|
|
name: legendName[i], |
|
|
|
value: pieValue[i], |
|
|
|
value: pieValue[i] |
|
|
|
}); |
|
|
|
} |
|
|
|
const leftCenterValue = ['50%', '37%'] |
|
|
|
|
|
|
|
// Chart options for the left side (nested pie) |
|
|
|
const leftOption = { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
formatter: "{b}: {c}", |
|
|
|
trigger: 'item', |
|
|
|
formatter: '{b}: {c}' |
|
|
|
}, |
|
|
|
color: ["#FFBC37", "#FFBC37"], |
|
|
|
color: ['#FFBC37', '#FFBC37'], |
|
|
|
title: { |
|
|
|
text: pieValue[0], |
|
|
|
subtext: "工程总数", |
|
|
|
x: "center", |
|
|
|
y: "20%", |
|
|
|
subtext: '工程总数', |
|
|
|
x: 'center', |
|
|
|
y: '20%', |
|
|
|
textStyle: { |
|
|
|
color: "rgba(0, 0, 0, 0.9)", |
|
|
|
color: 'rgba(0, 0, 0, 0.9)', |
|
|
|
fontSize: 32, |
|
|
|
lineHeight: 32, // 39 |
|
|
|
fontWeight: "bold", |
|
|
|
fontFamily: "DIN", |
|
|
|
fontWeight: 'bold', |
|
|
|
fontFamily: 'DIN' |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
color: "rgba(0, 0, 0, 0.6)", |
|
|
|
color: 'rgba(0, 0, 0, 0.6)', |
|
|
|
fontSize: 14, |
|
|
|
fontWeight: 500, |
|
|
|
lineHeight: 2, // 24 |
|
|
|
padding: [-20, 0, 0, 0], |
|
|
|
fontFamily: "PingFang SC", |
|
|
|
}, |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: true, |
|
|
|
// orient: 'vertical', |
|
|
|
// x: '50%', |
|
|
|
icon: "circle", |
|
|
|
top: "bottom", |
|
|
|
itemGap: 10, // 16 |
|
|
|
icon: 'circle', |
|
|
|
top: 'bottom', |
|
|
|
itemGap: 16, // 16 |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
width: "100%", |
|
|
|
width: '100%', |
|
|
|
textStyle: { |
|
|
|
rich: { |
|
|
|
name: { |
|
|
|
fontSize: 14, |
|
|
|
height: 25, |
|
|
|
width: 40, |
|
|
|
padding: [0, 8, 0, 5], |
|
|
|
color: "rgba(0, 0, 0, 0.55)", |
|
|
|
color: 'rgba(0, 0, 0, 0.55)' |
|
|
|
}, |
|
|
|
rate: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 500, |
|
|
|
fontWeight: 'bold', |
|
|
|
height: 35, |
|
|
|
color: "rgba(0, 0, 0, 0.9)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
padding: [50, 8, 0, -45], |
|
|
|
color: 'rgba(0, 0, 0, 0.9)' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: legendName, |
|
|
|
formatter: function (name: any) { |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
if (name == pieData[i].name) { |
|
|
|
return "{name|" + name + "}{rate|" + pieValue[i] + "}"; |
|
|
|
return '{name|' + name + '}{rate|' + pieValue[i] + '}'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "数量", |
|
|
|
type: "pie", |
|
|
|
name: '数量', |
|
|
|
type: 'pie', |
|
|
|
clockWise: false, |
|
|
|
radius: ["74%", "82%"], |
|
|
|
center: ["50%", "40%"], |
|
|
|
radius: ['70%', '78%'], |
|
|
|
center: leftCenterValue, |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
label: { |
|
|
|
borderRadius: "10", |
|
|
|
borderRadius: '10' |
|
|
|
}, |
|
|
|
color: color[0], |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[1], |
|
|
|
name: "", |
|
|
|
name: '', |
|
|
|
tooltip: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[0], |
|
|
|
name: "数量", |
|
|
|
}, |
|
|
|
], |
|
|
|
name: '数量' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "问题数", |
|
|
|
type: "pie", |
|
|
|
radius: ["54%", "62%"], |
|
|
|
center: ["50%", "40%"], |
|
|
|
name: '问题数', |
|
|
|
type: 'pie', |
|
|
|
radius: ['56%', '64%'], |
|
|
|
center: leftCenterValue, |
|
|
|
clockWise: false, |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -179,123 +182,207 @@ onMounted(() => { |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[0], |
|
|
|
name: "", |
|
|
|
name: '', |
|
|
|
tooltip: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[1], |
|
|
|
name: "问题数", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
name: '问题数' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render left chart |
|
|
|
leftChart.setOption(leftOption); |
|
|
|
|
|
|
|
rightChart = echarts.init(questEchartRef.value); |
|
|
|
const li_qu_legend = ['任务数', '已完成']; |
|
|
|
const taskNum = 98; |
|
|
|
const accomplishNum = 30; |
|
|
|
const li_qu_data = [ |
|
|
|
{ |
|
|
|
name: li_qu_legend[0], |
|
|
|
value: taskNum |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: li_qu_legend[1], |
|
|
|
value: accomplishNum |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
// 占比率 |
|
|
|
const li_qu_count: any = accomplishNum / taskNum; |
|
|
|
|
|
|
|
const titleStyle = { |
|
|
|
fontSize: 32, |
|
|
|
fontWeight: 'bold', |
|
|
|
color: 'rgba(0, 0, 0, 0.9)', |
|
|
|
textAlign: 'center', |
|
|
|
textShadowBlur: '0', |
|
|
|
textShadowOffsetX: 0, |
|
|
|
textShadowOffsetY: 1 |
|
|
|
}; |
|
|
|
const centerValue = ['50%', '37%'] |
|
|
|
// Chart options for the right side (liquidFill) |
|
|
|
const rightOption = { |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
text: (li_qu_count * 100).toFixed(1) + '%', |
|
|
|
subtext: '占比：', |
|
|
|
x: 'center', |
|
|
|
y: 'center', |
|
|
|
subtextStyle: { |
|
|
|
color: 'rgba(0, 0, 0, 0.6)', |
|
|
|
fontSize: 14, |
|
|
|
fontWeight: 'bold', |
|
|
|
align: 'center', |
|
|
|
lineHeight: 16 // 20 |
|
|
|
}, |
|
|
|
left: '50%', |
|
|
|
top: '25%', |
|
|
|
textAlign: 'center', |
|
|
|
textStyle: titleStyle |
|
|
|
} |
|
|
|
], |
|
|
|
legend: { |
|
|
|
icon: 'circle', |
|
|
|
bottom: '2%', |
|
|
|
itemGap: 16, |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 2, // 4 |
|
|
|
borderColor: '#3AFFDE' |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
rich: { |
|
|
|
name: { |
|
|
|
fontSize: 14, |
|
|
|
height: 25, |
|
|
|
width: 40, |
|
|
|
padding: [0, 8, 0, 5], |
|
|
|
color: 'rgba(0, 0, 0, 0.55)' |
|
|
|
}, |
|
|
|
rate: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'bold', |
|
|
|
height: 35, |
|
|
|
padding: [50, 8, 0, -45], |
|
|
|
color: 'rgba(0, 0, 0, 0.9)' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: li_qu_legend, |
|
|
|
formatter: function (name: any) { |
|
|
|
for (var i = 0; i < li_qu_legend.length; i++) { |
|
|
|
if (name == li_qu_data[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "liquidFill", |
|
|
|
radius: "30%", |
|
|
|
type: 'liquidFill', |
|
|
|
radius: '70%', |
|
|
|
z: 4, |
|
|
|
center: ["50%", "50%"], |
|
|
|
center: centerValue, |
|
|
|
amplitude: 5, |
|
|
|
data: [0.5], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: "#28CE8E", |
|
|
|
color: '#28CE8E', |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
backgroundStyle: { |
|
|
|
borderWidth: 0, |
|
|
|
color: "transparent", |
|
|
|
color: 'transparent' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
formatter: "", |
|
|
|
}, |
|
|
|
formatter: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
outline: { |
|
|
|
show: true, |
|
|
|
show: false, |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 0, |
|
|
|
}, |
|
|
|
borderDistance: 0, |
|
|
|
borderWidth: 0 |
|
|
|
}, |
|
|
|
borderDistance: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: legendName[0], |
|
|
|
type: "pie", |
|
|
|
name: li_qu_legend[0], |
|
|
|
type: 'pie', |
|
|
|
z: 1, |
|
|
|
radius: ["0%", "31%"], |
|
|
|
center: ["50%", "50%"], |
|
|
|
radius: ['0%', '72%'], |
|
|
|
center: centerValue, |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
color: ['#fff'], |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
color: 'rgba(255, 255, 255, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: legendName[1], |
|
|
|
type: "pie", |
|
|
|
name: li_qu_legend[1], |
|
|
|
type: 'pie', |
|
|
|
z: 1, |
|
|
|
radius: ["0%", "31%"], |
|
|
|
center: ["50%", "50%"], |
|
|
|
radius: ['0%', '72%'], |
|
|
|
center: centerValue, |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
color: ['#fff'], |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
color: 'rgba(255, 255, 255, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render right chart |
|
|
|
rightChart.setOption(rightOption); |
|
|
|
|
|
|
|
window.addEventListener("resize", handleResize); |
|
|
|
window.addEventListener('resize', handleResize); |
|
|
|
}); |
|
|
|
onBeforeUnmount(() => { |
|
|
|
leftChart?.dispose(); |
|
|
|
rightChart?.dispose(); |
|
|
|
window.removeEventListener("resize", handleResize); |
|
|
|
window.removeEventListener('resize', handleResize); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
|
ruancuihong
1 month ago