KPI分析

ruoyi-ui/src/views/kpi/inAnalysis/indexByTime.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true">
-      <el-form-item label="仓库" prop="warehouseId"> <!-- 仓库 -->
-        <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> <!-- 请选择仓库 -->
-          <el-option
-            v-for="item in warehouseOptions"
-            :key="item.warehouseId"
-            :label="item.warehouseName"
-            :value="item.warehouseId"
-          />
-        </el-select>
-      </el-form-item>
+<!--      <el-form-item label="仓库" prop="warehouseId"> &lt;!&ndash; 仓库 &ndash;&gt;-->
+<!--        <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable> &lt;!&ndash; 请选择仓库 &ndash;&gt;-->
+<!--          <el-option-->
+<!--            v-for="item in warehouseOptions"-->
+<!--            :key="item.warehouseId"-->
+<!--            :label="item.warehouseName"-->
+<!--            :value="item.warehouseId"-->
+<!--          />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
       <el-form-item label="时间范围" prop="dateRange"> <!-- 时间范围 -->
         <el-date-picker
           v-model="dateRange"
@@ -62,6 +62,8 @@ export default {
         xAxis: [],
         series: []
       },
+      // 图表颜色
+      chartColors: ['#409EFF', '#67C23A'],
       queryWarehouseParam:{
         pageNum: 1,
         pageSize: 99,
@@ -115,27 +117,54 @@ export default {
     updateChart() {
       const option = {
         title: {
-          text: '入库数量统计' // 入库数量统计
+          text: '入库数量统计' // 入库数量统计（按巷道）
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: this.chartData.series.map(item => item.name),
+          top: 25
+        },
+        grid: {
+          top: 80,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
         xAxis: {
           type: 'category',
-          data: this.chartData.xAxis
+          boundaryGap: false,
+          data: this.chartData.xAxis,
+          axisLabel: {
+            rotate: 0
+          }
         },
         yAxis: {
           type: 'value',
-          name: '入库数量' // 入库数量
-        },
-        series: [{
           name: '入库数量', // 入库数量
+          minInterval: 1
+        },
+        series: this.chartData.series.map((item, index) => ({
+          name: item.name,
           type: 'line',
-          data: this.chartData.series,
-          smooth: true
-        }]
+          data: item.data,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 6,
+          itemStyle: {
+            color: this.chartColors[index % this.chartColors.length]
+          },
+          lineStyle: {
+            width: 2
+          }
+        }))
       }
-      this.chart.setOption(option)
+      this.chart.setOption(option, true)
     },
     /** 处理日期范围变化 */
     handleDateRangeChange(val) {