|
@@ -5,21 +5,27 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
- <div ref="pieChart" style="height: 400px;"></div>
|
|
|
+ <div ref="pieChart" style="height: 400px;margin-top: 36px;"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
+ <el-select v-model="type" placeholder="请选择" @change="changeType">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<div ref="pieChart2" style="height: 400px;"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
import moment from "moment";
|
|
|
-import { getBreakDownCountByMonth, getAirplaneModelCountByMonth, getMajorCountByMonth } from "@/api/showInfo/breakdown";
|
|
|
+import { getBreakDownCountByMonth, getAirplaneModelCountByMonth, getMajorCountByMonth, getUnitCountByMonth } from "@/api/showInfo/breakdown";
|
|
|
export default {
|
|
|
name: "BrakDownShow",
|
|
|
data() {
|
|
@@ -27,15 +33,24 @@ export default {
|
|
|
lineChartData: [],
|
|
|
pieChartData: [],
|
|
|
pieChartData2: [],
|
|
|
+ type:1,
|
|
|
+ typeOptions:[
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '部件'
|
|
|
+ },{
|
|
|
+ value: 2,
|
|
|
+ label: '专业'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentDate: '',
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initLineChartData(); // 初始化图表数据
|
|
|
let date = moment().format('YYYY-MM');
|
|
|
this.initPieChartData(date);
|
|
|
- // this.initPieChart();
|
|
|
this.initPieChartData2(date);
|
|
|
- // this.initPieChart2();
|
|
|
},
|
|
|
methods: {
|
|
|
/**
|
|
@@ -129,7 +144,7 @@ export default {
|
|
|
formatter: function (params) {
|
|
|
return params.data // 显示具体数值
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
}]
|
|
|
};
|
|
|
// 上述代码中,在title、xAxis、yAxis和series的属性中都添加了textStyle或color属性,并将其设置为白色。这样就可以改变文字颜色了。如果你需要修改其他部分的颜色,可以根据需要查找对应的属性设置。
|
|
@@ -140,6 +155,7 @@ export default {
|
|
|
myChart.on('click', function (params) {
|
|
|
that.initPieChartData(params.name)
|
|
|
that.initPieChartData2(params.name)
|
|
|
+ that.currentDate = params.name
|
|
|
})
|
|
|
},
|
|
|
|
|
@@ -192,12 +208,29 @@ export default {
|
|
|
myChart.setOption(pieChartOption);
|
|
|
},
|
|
|
|
|
|
+ changeType(){
|
|
|
+ let date = this.currentDate? this.currentDate : moment().format('YYYY-MM')
|
|
|
+ this.initPieChartData2(date)
|
|
|
+ },
|
|
|
+
|
|
|
initPieChartData2(date) {
|
|
|
- getMajorCountByMonth(date).then(resp => {
|
|
|
- this.initPieChart2(date, resp.data); // 初始化图表
|
|
|
- });
|
|
|
+ if(this.type===1){
|
|
|
+ getUnitCountByMonth(date).then(resp => {
|
|
|
+ this.initPieChart2(date, resp.data); // 初始化图表
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ getMajorCountByMonth(date).then(resp => {
|
|
|
+ this.initPieChart2(date, resp.data); // 初始化图表
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
initPieChart2(date, pieChartData){
|
|
|
+ let chartTitle = '';
|
|
|
+ if(this.type===1){
|
|
|
+ chartTitle = `月度故障部件统计(${date})`
|
|
|
+ } else {
|
|
|
+ chartTitle = `月度故障专业统计(${date})`
|
|
|
+ }
|
|
|
const chartDom = this.$refs.pieChart2;
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
|
@@ -210,7 +243,7 @@ export default {
|
|
|
|
|
|
let pieChartOption = {
|
|
|
title: {
|
|
|
- text: `月度故障专业统计(${date})`,
|
|
|
+ text: chartTitle,
|
|
|
textStyle: {
|
|
|
color: 'white'
|
|
|
}
|