126 lines
2.7 KiB
Vue
126 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<!-- 质量问题 -->
|
||
|
|
<div class="qualityProblem">
|
||
|
|
<div class="titleTxt">{{ title }}</div>
|
||
|
|
<div class="myChart" ref="myChart" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import echarts from "echarts4";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: "default title"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.initMyChart();
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
initMyChart() {
|
||
|
|
const myChart = echarts.init(this.$refs.myChart);
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
subtext: "质量问题",
|
||
|
|
textAlign: 'center',
|
||
|
|
x: '29%',
|
||
|
|
y: '43%',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
type: 'scroll',
|
||
|
|
orient: 'vertical',
|
||
|
|
right: 50,
|
||
|
|
top: 'center',
|
||
|
|
itemWidth: 10, // 设置宽度
|
||
|
|
itemHeight: 10, // 设置高度
|
||
|
|
selectedMode: true,
|
||
|
|
icon: 'circle',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "pie",
|
||
|
|
radius: ["50%", "65%"],
|
||
|
|
center: ['30%', '50%'],
|
||
|
|
avoidLabelOverlap: true,
|
||
|
|
// itemStyle: {
|
||
|
|
// borderRadius: 8,
|
||
|
|
// borderColor: '#11316c',
|
||
|
|
// borderWidth: 6,
|
||
|
|
// },
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: "center",
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
fontSize: "20",
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: "bold",
|
||
|
|
},
|
||
|
|
scaleSize: 12,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 15, name: "文明施工" },
|
||
|
|
{ value: 2, name: "未分类" },
|
||
|
|
{ value: 5, name: "安全管理" },
|
||
|
|
{ value: 6, name: "施工安全" },
|
||
|
|
{ value: 20, name: "基础工程" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.setOption(option);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.qualityProblem {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid #0081c3;
|
||
|
|
|
||
|
|
.titleTxt {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #6ee4f0;
|
||
|
|
margin-top: 5px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.myChart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|