add pie chart
This commit is contained in:
parent
cd437ed7d3
commit
d63d49ccc9
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
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>
|
@ -47,7 +47,7 @@
|
|||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
@confirm="submitForm">
|
@confirm="submitForm">
|
||||||
<div class="visualization" v-if="visualizationOpen">
|
<div class="visualization" v-if="visualizationOpen">
|
||||||
<h1>设备可视化</h1>
|
<pie-chart v-for="item in list" :key="item.id" :value="item" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="trendOpen">
|
<div v-if="trendOpen">
|
||||||
<h1>查看趋势</h1>
|
<h1>查看趋势</h1>
|
||||||
@ -59,11 +59,12 @@
|
|||||||
<script>
|
<script>
|
||||||
// import moment from 'moment';
|
// import moment from 'moment';
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import PieChart from './components/pieChart.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EfficiencyAnalysis',
|
name: 'EfficiencyAnalysis',
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin],
|
||||||
components: {},
|
components: { PieChart },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -410,4 +411,9 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
.visualization {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user