|
@@ -73,6 +73,14 @@
|
|
<el-date-picker v-model="openCycle" style="float:right;width:125px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
<el-date-picker v-model="openCycle" style="float:right;width:125px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
@change='changeOpen(2)' size="mini" :clearable="false" type="date" :placeholder="$t('el.datepicker.selectDate')"></el-date-picker>
|
|
@change='changeOpen(2)' size="mini" :clearable="false" type="date" :placeholder="$t('el.datepicker.selectDate')"></el-date-picker>
|
|
</div> -->
|
|
</div> -->
|
|
|
|
+ <div id="btnCharts">
|
|
|
|
+ <el-checkbox-group v-model="checkList" @change="changeCheck">
|
|
|
|
+ <el-checkbox :label="$t('runTest.maxOpenCycle')"></el-checkbox>
|
|
|
|
+ <el-checkbox :label="$t('runTest.minOpenCycle')"></el-checkbox>
|
|
|
|
+ <el-checkbox :label="$t('runTest.avgOpenCycle')"></el-checkbox>
|
|
|
|
+ <el-checkbox :label="$t('runTest.theoryCycle')"></el-checkbox>
|
|
|
|
+ </el-checkbox-group>
|
|
|
|
+ </div>
|
|
<div id="myChart2" :style="{ height: '400px'}"></div>
|
|
<div id="myChart2" :style="{ height: '400px'}"></div>
|
|
</el-col>
|
|
</el-col>
|
|
</el-col>
|
|
</el-col>
|
|
@@ -271,6 +279,10 @@
|
|
exportFormVisible: false,
|
|
exportFormVisible: false,
|
|
exportTime: [],
|
|
exportTime: [],
|
|
exportType: '开合次数数据',
|
|
exportType: '开合次数数据',
|
|
|
|
+
|
|
|
|
+ checkList: [this.$t('runTest.maxOpenCycle'),this.$t('runTest.minOpenCycle'),this.$t('runTest.avgOpenCycle'),this.$t('runTest.theoryCycle')],
|
|
|
|
+ option: null,
|
|
|
|
+
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -555,7 +567,8 @@
|
|
legend: {
|
|
legend: {
|
|
data:[this.$t('runTest.maxOpenCycle'),this.$t('runTest.minOpenCycle'),this.$t('runTest.avgOpenCycle'),this.$t('runTest.theoryCycle')],//,this.$t('runTest.openNum')
|
|
data:[this.$t('runTest.maxOpenCycle'),this.$t('runTest.minOpenCycle'),this.$t('runTest.avgOpenCycle'),this.$t('runTest.theoryCycle')],//,this.$t('runTest.openNum')
|
|
x: '30%',
|
|
x: '30%',
|
|
- y: '-4'
|
|
|
|
|
|
+ y: '-4',
|
|
|
|
+ show: false
|
|
},
|
|
},
|
|
toolbox: {
|
|
toolbox: {
|
|
right: '20',
|
|
right: '20',
|
|
@@ -567,7 +580,7 @@
|
|
{
|
|
{
|
|
left: '0%',
|
|
left: '0%',
|
|
right: '55%',
|
|
right: '55%',
|
|
- top: '15%',
|
|
|
|
|
|
+ top: '10%',
|
|
bottom: '15%',
|
|
bottom: '15%',
|
|
containLabel: true
|
|
containLabel: true
|
|
},
|
|
},
|
|
@@ -575,7 +588,7 @@
|
|
gridindex: 1,
|
|
gridindex: 1,
|
|
left: '48%',
|
|
left: '48%',
|
|
right: '3%',
|
|
right: '3%',
|
|
- top: '15%',
|
|
|
|
|
|
+ top: '10%',
|
|
bottom: '15%',
|
|
bottom: '15%',
|
|
containLabel: true
|
|
containLabel: true
|
|
}
|
|
}
|
|
@@ -725,6 +738,16 @@
|
|
]
|
|
]
|
|
};
|
|
};
|
|
// this.drawEchart(2,JSON.stringify(option));
|
|
// this.drawEchart(2,JSON.stringify(option));
|
|
|
|
+ var selectOption = {} , array = [];
|
|
|
|
+ for(var i in option.legend.data) {
|
|
|
|
+ if(this.checkList.indexOf(option.legend.data[i]) == -1) {
|
|
|
|
+ selectOption[option.legend.data[i]] = false;
|
|
|
|
+ } else {
|
|
|
|
+ selectOption[option.legend.data[i]] = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ option.legend.selected = selectOption;
|
|
|
|
+ this.option = option;
|
|
myChart.setOption(option);
|
|
myChart.setOption(option);
|
|
} else {
|
|
} else {
|
|
this.$message({
|
|
this.$message({
|
|
@@ -740,6 +763,19 @@
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ changeCheck() {
|
|
|
|
+ var selectOption = {};
|
|
|
|
+ for(var i in this.option.legend.data) {
|
|
|
|
+ if(this.checkList.indexOf(this.option.legend.data[i]) == -1) {
|
|
|
|
+ selectOption[this.option.legend.data[i]] = false;
|
|
|
|
+ } else {
|
|
|
|
+ selectOption[this.option.legend.data[i]] = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.option.legend.selected = selectOption;
|
|
|
|
+ this.echarts2.setOption(this.option);
|
|
|
|
+ },
|
|
|
|
|
|
drawEchart(type,option) {
|
|
drawEchart(type,option) {
|
|
},
|
|
},
|
|
@@ -841,4 +877,76 @@
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
color: #333;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ #btnCharts {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin: 5px 0 30px;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss">
|
|
|
|
+ #btnCharts {
|
|
|
|
+ .el-checkbox:nth-child(1) {
|
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
|
+ background-color: #F26F7C;
|
|
|
|
+ border-color: #F26F7C;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
|
+ border-color: #F26F7C;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__label {
|
|
|
|
+ color: #F26F7C;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
|
+ color: #F26F7C;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-checkbox:nth-child(2) {//95F8FB
|
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
|
+ background-color: #7FE0D9;
|
|
|
|
+ border-color: #7FE0D9;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
|
+ border-color: #7FE0D9;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__label {
|
|
|
|
+ color: #7FE0D9;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
|
+ color: #7FE0D9;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-checkbox:nth-child(3) {//C4E486
|
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
|
+ background-color: #C4E486;
|
|
|
|
+ border-color: #C4E486;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
|
+ border-color: #C4E486;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__label {
|
|
|
|
+ color: #C4E486;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
|
+ color: #C4E486;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-checkbox:nth-child(4) {//FFA44D
|
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
|
+ background-color: #FFA44D;
|
|
|
|
+ border-color: #FFA44D;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
|
+ border-color: #FFA44D;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__label {
|
|
|
|
+ color: #FFA44D;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
|
+ color: #FFA44D;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|