fix:chart图优化

components/add-inquiry-dialog/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		<u-modal :show="showModal" ref="uModal" :title="(editOrAdd === 'add' || editOrAdd === 'receptFormAdd') ? '新增' : '编辑'" :asyncClose="false" showCancelButton @cancel="closeDialog" cancelColor="#909399" :confirmText="'确定'" confirmColor="#2979ff" @confirm="confirm" @close="closeDialog" :closeOnClickOverlay="false">
+            <u--text type="info" text="输入型号可查看价格趋势"></u--text>
             <view class="modal_wrap">
                 <text @click="handleBrandClick" class="item" :class="info.dictLabel ? 'brand' : 'brand placeholder'">{{ info.dictLabel || '品牌' }}</text>
                 <text class="divider">|</text>
@@ -19,8 +20,10 @@
             </view>
             <u--input v-if="editOrAdd === 'edit'" class="price" placeholder="价格" border="bottom" v-model="info.price" clearable></u--input>
             <view class="charts_box" v-show="chartShow">
-                <qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true"
-                    width="700rpx" height="200rpx" backgroundColor="#ffffff" />
+                 <u--text type="primary" :text="`最大价格：${Math.max(...maxPrice)}元`"></u--text>
+                 <u--text type="warning" :text="`最小价格：${Math.min(...minPrice)}元`"></u--text>
+                <qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true" tooltipFormat="tooltipFormatPrice"
+                    width="700rpx" height="500rpx" backgroundColor="#ffffff" />
             </view>
         </u-modal>
         <brandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></brandList>
@@ -77,15 +80,14 @@ export default {
                 ]
             },
             chartData:{},
+            color:[],
             opts: {
-                color: ["#f9ae3d"],
-                padding: [10, 10, 0, 0],
-                dataLabel: false,
-                dataPointShape: false,
+                color: this.color,
+                padding: [20, 10, 20, 0],
+                dataLabel: true,
+                dataPointShape: true,
                 enableScroll: true,
-                legend: {
-                    show: false
-                },
+                
                 xAxis: {
                     disableGrid: true,
                     scrollShow: true,
@@ -97,6 +99,20 @@ export default {
                     gridType: "dash",
                     dashLength: 7,
                 },
+                legend: {
+                    show: false,
+                    type: 'scroll',
+                    orient: 'horizontal',
+                    pageSize: 3,
+                    pageIconSize: 12,
+                    pageIconColor: '#666',
+                    pageIconInactiveColor: '#ccc',
+                    pageTextStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    },
+                    bottom: 0
+                },
                 extra: {
                     line: {
                         type: "curve",
@@ -105,10 +121,16 @@ export default {
                         linearType: "custom",
                         onShadow: true,
                         animation: "horizontal"
+                    },
+                    tooltip:{
+                        legendShow: true,
+                        bgOpacity: 0.6
                     }
                 }
             },
-            chartShow: false
+            chartShow: false,
+            maxPrice: [],
+            minPrice: [],
 		}
 	},
 	watch: {
@@ -120,6 +142,125 @@ export default {
 		}
 	},
 	methods: {
+        getChartData() {
+            uni.$u.api.inquiryChart({
+                model: this.info.model,
+            }).then(res => {
+                if (res.code == 200) {
+                    const response = res.data
+                    this.maxPrice = []
+                    this.minPrice = []
+                    // const response = [
+                    //     {
+                    //         model:'AAA',
+                    //         list:[
+                    //             {
+                    //                 recycleTime: '2023-07-30',
+                    //                 price: 300,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-07-31',
+                    //                 price: 500,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-01',
+                    //                 price: null,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-02',
+                    //                 price: 200,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-03',
+                    //                 price: 300,
+                    //             }
+                    //         ]
+                    //     },
+                    //     {
+                    //         model:'BBB',
+                    //         list:[
+                    //             {
+                    //                 recycleTime: '2023-08-01',
+                    //                 price:400,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-02',
+                    //                 price: 100,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-03',
+                    //                 price: 200,
+                    //             }
+                    //         ]
+                    //     },
+                    //     {
+                    //         model:'CCC',
+                    //         list:[
+                    //             {
+                    //                 recycleTime: '2023-08-01',
+                    //                 price: 500,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-02',
+                    //                 price: 400,
+                    //             },
+                    //             {
+                    //                 recycleTime: '2023-08-03',
+                    //                 price: 600,
+                    //             }
+                    //         ]
+                    //     }
+                    // ]
+                    this.color = []
+                    const categories = []
+                    const dateMap = {}
+                    response.forEach(item => {
+                        this.maxPrice.push(item.max)
+                        this.minPrice.push(item.min)
+                        item.list.forEach(i => {
+                            if (!dateMap[i.recycleTime]) {
+                                dateMap[i.recycleTime] = true
+                                categories.push(i.recycleTime)
+                            }
+                        })
+                    })
+                    const series = response.map((item) => {
+                        const color = this.getRandomColor()
+                        this.color.push(color)
+                        const data = categories.map(date => {
+                            const itemData = item.list.find(i => i.recycleTime === date)
+                            return itemData ? itemData.price : null
+                        })
+                        return {
+                            name: item.model,
+                            data: data,
+                            setShadow: [
+                                3,
+                                8,
+                                15,
+                                color
+                            ],
+                        }
+                    })
+                    this.opts.color = this.color
+                    const chartData = {
+                        categories: categories,
+                        series: series
+                    }
+                    this.chartData = JSON.parse(JSON.stringify(chartData))
+                    this.chartShow = true
+                }
+            })
+            
+        },
+        getRandomColor(){
+            var letters = '0123456789ABCDEF';
+            var color = '#';
+            for (var i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+        },
         // 编辑回显
         initData() {
             this.$nextTick(()=>{
@@ -241,33 +382,6 @@ export default {
                 this.getChartData()
             }
         },
-        getChartData() {
-            uni.$u.api.inquiryChart({
-                model: this.info.model,
-            }).then(res => {
-                if (res.code == 200) {
-                    const reverseData = res.data.reverse()
-                    let data = {
-                        categories: reverseData.map(item=>item.recycleTime),
-                        series: [
-                            {
-                                name: this.info.model+'价格',
-                                data: reverseData.map(item=>item.price),
-                                setShadow: [
-                                    3,
-                                    8,
-                                    15,
-                                    "#f9ae3d"
-                                ],
-                            }
-                        ]
-                    }
-                    this.chartData = JSON.parse(JSON.stringify(data))
-                    this.chartShow = true
-                }
-            })
-            
-        },
 	}
 };
 </script>

pages/wareHouse/components/edit.vue

@@ -38,8 +38,8 @@
                     </u-form-item>
                     <u-form-item label="商品描述（详细的描述让用户更好的了解您的产品）" required prop="desc" borderBottom>
                         <u--textarea v-model="formData.desc" clearable placeholder="95新 WHZ19219H CHANEL香奈儿链条单肩包
-                        21开 牛皮 尺寸25 4 15
-                        配件中溯卡" count autoHeight maxlength="250" height="100" confirmType="done"></u--textarea>
+21开 牛皮 尺寸25 4 15
+配件中溯卡" count autoHeight maxlength="250" :height="150" confirmType="done"></u--textarea>
                     </u-form-item>
                     <u-form-item label="来源" prop="origin" borderBottom>
                         <u--textarea v-model="formData.origin" clearable placeholder="请输入来源" count autoHeight maxlength="250" height="100" confirmType="done"></u--textarea>
@@ -254,7 +254,7 @@
             </view>
         </view>
         <view :class="['btn_group', {'col-2': formData.stockStatus == '1'}]">
-            <u-button plain type="primary" @click="submitForm('onlyIn')">{{ formData.stockStatus == '0' ? '待入库' : '仅入库' }}</u-button>
+            <u-button plain type="primary" @click="submitForm('onlyIn')">保存</u-button>
             <u-button type="primary" @click="submitForm('inAndUp')" v-if="formData.stockStatus == '1'">入库并上架</u-button>
         </view>
     </view>
@@ -297,6 +297,7 @@ export default {
                 productCondition: '1',
                 detailPicFileList: [],//细节图片
                 // detailVideoFileList:[],
+                title:'',
                 productNo: '',
                 productAttribute: '1',
                 stock: 1,
@@ -497,6 +498,9 @@ export default {
                     this.echoInfoProductAttribute = res.data.productAttribute || '1'
                     this.echoInfoProductCondition = res.data.productCondition || '1'
                     this.echoInfoStockStatus = res.data.stockStatus || '0'
+                    this.$nextTick(()=>{
+                        this.$refs.addForm.resetFields();
+                    })
                 });
             }
         })

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -71,6 +71,9 @@ const cfu = {
         return series[index].name+'：'+series[index].data+'元'
       }
     },
+	'tooltipFormatPrice':function(item, category, index, opts){
+		return item.name + category.substring(2) + '：' + item.data + '元'
+    },
   },
   //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
   "demotype":{

uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js

@@ -2785,6 +2785,14 @@ function drawBarToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
 
 
 function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
+  // let newTextList = {
+  //   "text": '价格趋势',
+  //   color: '#e61414ff'
+  // }
+  textList[0].text = textList[0].text.split("/")[0]
+  // textList.push(newTextList)
+  textList = textList.reverse();
+
   var toolTipOption = assign({}, {
     showBox: true,
     showArrow: true,