偏差分析图形调整

src/views/plan/workbench/homePage/formal/analysis/commonLineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:150px;width:100%;margin-top: 0px;" />
+  <div style="height:162px;width:100%;margin-top: 0px;" />
 </template>
 
 <script>
@@ -93,11 +93,43 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.chart.setOption({
         color: ['#126db9'],
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: false, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 10,//默认为100
+          },
+        ],
         grid: {
           top: '10%',
           left: '5%',
-          right: '0%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         legend: {

src/views/plan/workbench/homePage/formal/analysis/index.vue

@@ -60,10 +60,10 @@
 				</div>
 			</el-col>
 			<el-col :span="allTheSingle === '2' ? 16 : 20">
-				<div class="">
+				<div class="analysis-chart-wrapper">
 					<CommonLineChart :dataList="dataList.PerCustomerDeviationDetailItem|| []" />
 				</div>
-				<div class="">
+				<div class="analysis-chart-wrapper" style="margin-top: 20px;">
 					<LineBarChart :dataList="dataList.CustomerDeviationDetailItem || []" />
 				</div>
 			</el-col>
@@ -226,5 +226,9 @@ export default {
 	.parts-table {
 		width: 100%;
 	}
+	.analysis-chart-wrapper {
+		width: 100%;
+		overflow-x: auto;
+	}
 }
 </style>

src/views/plan/workbench/homePage/formal/analysis/lineBarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:150px;width:100%;margin-top:10px;" />
+  <div style="height:162px;width:100%;margin-top:10px;" />
 </template>
 
 <script>
@@ -74,6 +74,38 @@ export default {
 						color: '#fff'
 					}
 				},
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 100,//默认为100
+          },
+        ],
         color: ['#126db9'],
         legend: {
           data: this.seriesArray.map(e=>e.name)
@@ -81,8 +113,8 @@ export default {
         grid: {
           top: '10%',
           left: '5%',
-          right: '0%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {