ss

src/views/quality/components/tendencyChart.vue

@@ -48,9 +48,10 @@ export default {
       this.echartsOption = {
         color: ['#3AA1FF'],
         tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
-        grid: { left: '0', right: '0', top: '5%', bottom: '0', containLabel: true },
+        grid: { left: '0', right: '0', top: '5%', bottom: this.chartData.xaxis && this.chartData.xaxis.length > 30 ? '70px' : '0', containLabel: true },
         xAxis: [{ type: 'category', data: this.chartData.xaxis, axisLabel: { interval: this.chartData.xaxis.length > 15 ? 1 : 0, rotate: 15 }, axisTick: { alignWithLabel: true }}],
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
+        dataZoom: [{ 'type': 'slider', 'show': this.chartData.xaxis && this.chartData.xaxis.length > 30, 'startValue': 0, 'endValue': 30, 'handleSize': 8, 'bottom': '10%' }],
         series: [
           {
             name: this.typeTitle, type: 'line', barWidth: '20px', smooth: true, data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],

src/views/quality/defectStatistics.vue

@@ -503,13 +503,10 @@ export default {
       this.echartsOption3 = {
         color: ['#3AA1FF'],
         tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
-        grid: { left: '0', right: '0', top: '5%', bottom: '0', containLabel: true },
+        grid: { left: '0', right: '0', top: '5%', bottom: this.chart3Data.xaxis && this.chart3Data.xaxis.length > 40 ? '70px' : '0', containLabel: true },
         xAxis: [{ type: 'category', data: this.chart3Data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
-        dataZoom: [
-          { show: true, realtime: true, start: 0, end: 50 },
-          { type: 'inside', realtime: true, start: 0, end: 50 }
-        ],
+        dataZoom: [{ 'type': 'slider', 'show': this.chart3Data.xaxis && this.chart3Data.xaxis.length > 40, 'startValue': 0, 'endValue': 40, 'handleSize': 8, 'bottom': '10%' }],
         series: [
           {
             name: '缺陷数量', type: 'line', barWidth: '20px', smooth: true, data: this.chart3Data.yaxis[0] && this.chart3Data.yaxis[0].data || [],