云模管理系统图表修改

ys_int/src/views/detection/maintenance.vue

@@ -73,7 +73,7 @@
                         <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>
                     </div> -->
-                    <div id="myChart2" :style="{ height: '300px'}"></div>
+                    <div id="myChart2" :style="{ height: '400px'}"></div>
                 </el-col>
             </el-col>
 
@@ -518,7 +518,9 @@
                                 trigger: 'axis'
                             },
                             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%',
+                                y: '-5'
                             },
                             toolbox: {
                                 right: '20',
@@ -526,36 +528,76 @@
                                     saveAsImage: {show: true}
                                 }
                             },
-                            xAxis: {
-                                type: 'category',
-                                data: []
-                            },
+                            grid: [
+                                {
+                                    left: '0%',
+                                    right: '55%',
+                                    top: '15%',
+                                    bottom: '15%',
+                                    containLabel: true
+                                },
+                                {
+                                    gridindex: 1,
+                                    left: '48%',
+                                    right: '3%',
+                                    top: '15%',
+                                    bottom: '15%',
+                                    containLabel: true
+                                }
+                            ],
+                            xAxis: [
+                                {
+                                    type: 'category',
+                                    data: [],
+                                },
+                                {
+                                    gridIndex: 1,
+                                    type: 'category',
+                                    data: []
+                                }
+                            ],
                             yAxis: [
                                 {
                                     name: this.$t('runTest.sec') + '（s）',
-                                    type: 'value'
+                                    type: 'value',
                                 },
                                 {
+                                    gridIndex: 1,
                                     name: this.$t('runTest.openNum'),
                                     type: 'value'
                                 },
                             ],
                             dataZoom: [
                                 {
-                                    type: 'inside',
-                                    start: 0,
-                                    end: 30
-                                }, {
+                                    type: "slider",
+                                    xAxisIndex: [0,1],
+                                    bottom: "0",
                                     start: 0,
-                                    end: 30,
-                                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-                                    handleSize: '80%',
+                                    end: 40,
+                                    left:"center",
+                                    handleIcon: "M0,0 v9.7h5 v-9.7h-5 Z",
                                     handleStyle: {
-                                        color: '#fff',
-                                        shadowBlur: 3,
-                                        shadowColor: 'rgba(0, 0, 0, 0.6)',
-                                        shadowOffsetX: 2,
-                                        shadowOffsetY: 2
+                                        color: "#40bcf9",
+                                        borderColor: "#1fb2fb"
+                                    },
+                                    backgroundColor: "#e2f3ff",
+                                    dataBackground: {
+                                        lineStyle: {
+                                            color: "#000000"
+                                        },
+                                        areaStyle: {
+                                            color: "#d4d9dd"
+                                        }
+                                    },
+                                    fillerColor: "rgba(31,178,251,0.2)",
+                                    labelFormatter: function (value, params) {
+                                        var str = "";
+                                        if (params.length > 4) {
+                                            str = params.substring(0, 4) + "…";
+                                        } else {
+                                            str = params;
+                                        }
+                                        return str;
                                     }
                                 }
                             ],
@@ -616,6 +658,7 @@
                                     name: this.$t('runTest.openNum'),
                                     type: 'bar',
                                     barWidth : 30,
+                                    xAxisIndex: 1,
                                     yAxisIndex: 1,
                                     data: [],
                                     itemStyle : { 
@@ -663,7 +706,8 @@
                                 }
                             }
                         }
-                        option.xAxis.data = xData;
+                        option.xAxis[0].data = xData;
+                        option.xAxis[1].data = xData;
                         option.series[0].data = max;
                         option.series[1].data = min;
                         option.series[2].data = avg;