TBtools-商品价格走势

htmldev/TBTools/src/views/modules/tools/tools-analyze.vue

@@ -248,7 +248,8 @@ export default {
         totalPayNum: 0
       },
       liuliangSource: [],
-      zhishuData: []
+      zhishuData: [],
+      chartLine: null
     }
   },
   computed: {
@@ -439,6 +440,11 @@ export default {
       }
       return wbout
     }
+  },
+  beforeDestroy () {
+    if (this.chartLine) {
+      this.chartLine.dispose()
+    }
   }
 }
 </script>

htmldev/TBTools/src/views/modules/tools/tools-pricetrend.vue

@@ -8,24 +8,96 @@
         </el-form-item>
       </el-form>
     </el-col>
+    <el-col :offset="1">
+      <p>商品ID：{{ itemId }}</p>
+      <p>最高价：{{ maxPrice }}</p>
+      <p>最低价：{{ minPrice }}</p>
+    </el-col>
+    <!--折线图-->
+    <el-col :span="24">
+      <div class="chart-box" ref="myChartLineBox"></div>
+    </el-col>
   </el-row>
 </template>
 
 <script>
+import echarts from 'echarts'
+
 export default {
   name: 'tools-pricetrend',
   data () {
     return {
       formData: {
-        productId: '' // 测试ID：562665685690
+        productId: '602950702411' // 测试ID：602950702411
       },
       isDisabled: false,
       rules: {
         productId: [{ required: true, message: '输入商品ID', trigger: 'blur' }]
-      }
+      },
+      itemId: '',
+      maxPrice: '',
+      minPrice: '',
+      lastDate: '',
+      total: 0,
+      priceList: []
+    }
+  },
+  activated () {
+    if (this.chartLine) {
+      this.chartLine.resize()
     }
   },
   methods: {
+    // 折线图
+    initChartLine () {
+      const option = {
+        'title': {
+          'text': '价格趋势',
+          show: false
+        },
+        'tooltip': {
+          'trigger': 'axis'
+        },
+        'legend': {
+          'data': ['价格'],
+          'selectedMode': 'single'
+        },
+        'grid': {
+          'left': '3%',
+          'right': '4%',
+          'bottom': '3%',
+          'containLabel': true
+        },
+        'toolbox': {
+          'feature': {
+            'saveAsImage': {}
+          }
+        },
+        'xAxis': {
+          'type': 'category',
+          'boundaryGap': false,
+          'data': Object.keys(this.priceList)
+        },
+        'yAxis': {
+          'type': 'value'
+        },
+        'series': [
+          {
+            'name': '价格',
+            'type': 'line',
+            'stack': '总量',
+            'data': Object.values(this.priceList)
+          }
+        ]
+      }
+      if (!this.chartLine) {
+        this.chartLine = echarts.init(this.$refs.myChartLineBox)
+      }
+      this.chartLine.setOption(option)
+      window.addEventListener('resize', () => {
+        this.chartLine.resize()
+      })
+    },
     onSubmit () {
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
@@ -44,6 +116,16 @@ export default {
         }).then(({ data }) => {
           this.isDisabled = false
           if (data.status) {
+            const { itemId, maxPrice, minPrice, lastDate, total, priceList } = data.data
+            this.itemId = itemId
+            this.maxPrice = maxPrice
+            this.minPrice = minPrice
+            this.lastDate = lastDate
+            this.total = total * 1
+            this.priceList = priceList
+            this.$nextTick(() => {
+              this.initChartLine()
+            })
             return
           }
           this.$message.error(data.msg)
@@ -52,6 +134,11 @@ export default {
         })
       })
     }
+  },
+  beforeDestroy () {
+    if (this.chartLine) {
+      this.chartLine.dispose()
+    }
   }
 }
 </script>
@@ -75,4 +162,8 @@ $--color-primary: #3E8EF7;
     }
   }
 }
+
+.chart-box {
+  min-height: 400px;
+}
 </style>