forked from integrated_whb/integrated_whb_vue
87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="title">隐患整改情况统计</div>
|
|
<div id="main3"></div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
let myChart1;
|
|
|
|
const annualTraining = () => {
|
|
myChart1 = echarts.init(document.querySelector("#main3"));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
bottom: "0%",
|
|
left: "center",
|
|
textStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0%",
|
|
right: "8%",
|
|
bottom: "0%",
|
|
top: "35%",
|
|
containLabel: true,
|
|
},
|
|
series: [
|
|
{
|
|
name: "Access From",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 2,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
textStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
|
|
data: [
|
|
{ value: 1048, name: "未整改" },
|
|
{ value: 735, name: "已整改" },
|
|
{ value: 484, name: "已验收" },
|
|
{ value: 300, name: "已过期" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart1.setOption(option);
|
|
};
|
|
onMounted(() => {
|
|
annualTraining();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrap {
|
|
width: 50%;
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
#main3 {
|
|
width: 330px;
|
|
height: 350px;
|
|
}
|
|
}
|
|
</style>
|