99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
|
<!--
|
||
|
|
filename: pieChart.vue
|
||
|
|
author: liubin
|
||
|
|
date: 2023-09-06 15:02:49
|
||
|
|
description: 饼图
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'pieChart',
|
||
|
|
components: {},
|
||
|
|
props: ['value'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chart: null,
|
||
|
|
config: {
|
||
|
|
grid: {
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '0%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 10,
|
||
|
|
},
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: this.value.equipmentName || 'Default',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '75%'],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center',
|
||
|
|
},
|
||
|
|
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
|
||
|
|
name: ['工作时长', '停机时长', '故障时长'][index],
|
||
|
|
value: this.value[v],
|
||
|
|
})),
|
||
|
|
// data: [
|
||
|
|
// { value: 1048, name: 'Search Engine' },
|
||
|
|
// { value: 735, name: 'Direct' },
|
||
|
|
// { value: 580, name: 'Email' },
|
||
|
|
// { value: 484, name: 'Union Ads' },
|
||
|
|
// { value: 300, name: 'Video Ads' },
|
||
|
|
// ],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (!this.chart) {
|
||
|
|
this.chart = echarts.init(this.$el);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.chart.setOption(this.config);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.chart) this.chart.dispose();
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.pie-chart {
|
||
|
|
padding: 12px;
|
||
|
|
min-height: 320px;
|
||
|
|
background: #f1f1f1;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pie-chart::before {
|
||
|
|
content: attr(data-eqname);
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1;
|
||
|
|
position: absolute;
|
||
|
|
top: -16px;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
</style>
|