zjh 5 lat temu
rodzic
commit
2ca0d0a57c
3 zmienionych plików z 451 dodań i 180 usunięć
  1. 448 177
      pages/item/item.js
  2. 2 2
      pages/item/item.wxml
  3. 1 1
      project.config.json

+ 448 - 177
pages/item/item.js

@@ -11,271 +11,271 @@ timeData = timeData.map(function (str) {
 });
 
 var app = getApp()
-let chart = null;
+// let chart = null;
 let real=null
 let under=null
 
-function initChart(canvas, width, height, dpr, data) {
-  chart =  echarts.init(canvas, null, {
-    width: width,
-    height: height,
-    devicePixelRatio: dpr // new
-  });
-  canvas.setChart(chart);
-
-  var option ={
-    title: {//标题
-      text: '',
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-          type: 'cross',
-          label: {
-              backgroundColor: '#6a7985'
-          }
-      }
-  },
-    renderAsImage: true, //支持渲染为图片模式
+// function initChart(canvas, width, height, dpr, data) {
+//   const chart  =  echarts.init(canvas, null, {
+//     width: width,
+//     height: height,
+//     devicePixelRatio: dpr // new
+//   });
+//   canvas.setChart(chart);
 
-    color: [data.color, "#80CDF8"],//图例图标颜色
+//   var option ={
+//     title: {//标题
+//       text: '',
+//       left: 'center'
+//     },
+//     tooltip: {
+//       trigger: 'axis',
+//       axisPointer: {
+//           type: 'cross',
+//           label: {
+//               backgroundColor: '#6a7985'
+//           }
+//       }
+//   },
+//     renderAsImage: true, //支持渲染为图片模式
 
-    legend: {
+//     color: [data.color, "#80CDF8"],//图例图标颜色
 
-      show: true,
+//     legend: {
 
-      itemGap: 25,//每个图例间的间隔
+//       show: true,
 
-      // top: 30,
+//       itemGap: 25,//每个图例间的间隔
 
-      x: 30,//水平安放位置,离容器左侧的距离  'left'
+//       // top: 30,
 
-      z: 100,
+//       x: 30,//水平安放位置,离容器左侧的距离  'left'
 
-      textStyle: {
+//       z: 100,
 
-        color: '#383838'
-      },
+//       textStyle: {
 
-    },
+//         color: '#383838'
+//       },
 
-    grid: {//网格
+//     },
 
-      // left: 30,
-      // top:100,
-      containLabel: true,//grid 区域是否包含坐标轴的刻度标签
-    },
+//     grid: {//网格
 
-    xAxis: {//横坐标
+//       // left: 30,
+//       // top:100,
+//       containLabel: true,//grid 区域是否包含坐标轴的刻度标签
+//     },
 
-      type: 'category',
+//     xAxis: {//横坐标
 
-      // nameTextStyle: {//在name值存在下,设置name的样式
+//       type: 'category',
 
-      //   color: 'white',
+//       // nameTextStyle: {//在name值存在下,设置name的样式
 
-      //   fontStyle: 'normal'
+//       //   color: 'white',
 
-      // },
+//       //   fontStyle: 'normal'
 
-      nameLocation:'end',
+//       // },
 
-      splitLine: {//坐标轴在 grid 区域中的分隔线。
+//       nameLocation:'end',
 
-        show: true,
+//       splitLine: {//坐标轴在 grid 区域中的分隔线。
 
-        lineStyle: {
+//         show: true,
 
-          type: 'dashed',
-          color: ['#2B2B2B']
-        }
+//         lineStyle: {
 
-      },
+//           type: 'dashed',
+//           color: ['#2B2B2B']
+//         }
 
-      boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上,即刻度值上
+//       },
 
-      data: data.timeData,
-      axisLine: {onZero: true},
-      axisLabel: {
+//       boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上,即刻度值上
 
-        textStyle: {
+//       data: data.timeData,
+//       axisLine: {onZero: true},
+//       axisLabel: {
 
-          fontSize: 13,
+//         textStyle: {
 
-          color: '#5D5D5D'
+//           fontSize: 13,
 
-        }
+//           color: '#5D5D5D'
 
-      }
+//         }
 
-    },
-    dataZoom: [
-      {
-        type: 'slider',
-        xAxisIndex: 0,
-        filterMode: 'empty',
-        // startValue: data.prediction? data.prediction.length -7:0,
-        // endValue: data.prediction?data.prediction.length:3 ,
-        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-        handleSize: '80%',
-        handleStyle: {
-            color: '#fff',
-            shadowBlur: 3,
-            shadowColor: 'rgba(0, 0, 0, 0.6)',
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-        }
-    },
-    {
-      type: 'inside',
-      realtime: true,
-  }
+//       }
 
-  ],
-    yAxis: {//纵坐标
+//     },
+//     dataZoom: [
+//       {
+//         type: 'slider',
+//         xAxisIndex: 0,
+//         filterMode: 'empty',
+//         // startValue: data.prediction? data.prediction.length -7:0,
+//         // endValue: data.prediction?data.prediction.length:3 ,
+//         handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+//         handleSize: '80%',
+//         handleStyle: {
+//             color: '#fff',
+//             shadowBlur: 3,
+//             shadowColor: 'rgba(0, 0, 0, 0.6)',
+//             shadowOffsetX: 2,
+//             shadowOffsetY: 2
+//         }
+//     },
+//     {
+//       type: 'inside',
+//       realtime: true,
+//   }
 
-      type: 'value',
+//   ],
+//     yAxis: {//纵坐标
 
-      position:'right',
+//       type: 'value',
 
-      // nameTextStyle:{//在name值存在下,设置name的样式
+//       position:'right',
 
-      //   color:'red',
+//       // nameTextStyle:{//在name值存在下,设置name的样式
 
-      //   fontStyle:'normal'
+//       //   color:'red',
 
-      // },
+//       //   fontStyle:'normal'
 
-      splitNumber: 5,//坐标轴的分割段数
+//       // },
 
-      splitLine: {//坐标轴在 grid 区域中的分隔线。
+//       splitNumber: 5,//坐标轴的分割段数
 
-        show: true,
+//       splitLine: {//坐标轴在 grid 区域中的分隔线。
 
-        lineStyle: {
+//         show: true,
 
-          type: 'dashed',
-          color: ['#2B2B2B']
+//         lineStyle: {
 
-        }
+//           type: 'dashed',
+//           color: ['#2B2B2B']
 
-      },
+//         }
 
-      axisLabel: {//坐标轴刻度标签
+//       },
 
-        // formatter: function (value) {
+//       axisLabel: {//坐标轴刻度标签
 
-        //   var xLable = [];
+//         // formatter: function (value) {
 
-        //   if (value == 20) {
+//         //   var xLable = [];
 
-        //     xLable.push('25,883');
+//         //   if (value == 20) {
 
-        //   }
+//         //     xLable.push('25,883');
 
-        //   if (value == 40) {
+//         //   }
 
-        //     xLable.push('26,035');
+//         //   if (value == 40) {
 
-        //   }
+//         //     xLable.push('26,035');
 
-        //   if (value == 60) {
+//         //   }
 
-        //     xLable.push('26,187');
+//         //   if (value == 60) {
 
-        //   }
+//         //     xLable.push('26,187');
 
-        //   if (value == 80) {
+//         //   }
 
-        //     xLable.push('26,339');
+//         //   if (value == 80) {
 
-        //   }
-        //   return xLable
+//         //     xLable.push('26,339');
 
-        // },
+//         //   }
+//         //   return xLable
 
-        textStyle: {
+//         // },
 
-          fontSize: 13,
+//         textStyle: {
 
-          color: '#5D5D5D',
+//           fontSize: 13,
 
-        }
+//           color: '#5D5D5D',
 
-      },
+//         }
 
-      // min: 0,
+//       },
 
-      // max: 100,
+//       // min: 0,
 
-    },
+//       // max: 100,
 
-    series: [{
+//     },
 
-      name: '实际',
+//     series: [{
 
-      type: 'line',
+//       name: '实际',
+
+//       type: 'line',
     
-      // smooth:true,
+//       // smooth:true,
 
-      data:data.actual,
+//       data:data.actual,
 
-      symbol: 'none',
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0,
-          color: data.color
-      }, {
-          offset: 1,
-          color: '#1C1C1C'
-      }])
+//       symbol: 'none',
+//       areaStyle: {
+//         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+//           offset: 0,
+//           color: data.color
+//       }, {
+//           offset: 1,
+//           color: '#1C1C1C'
+//       }])
 
-      },
-      itemStyle: {
+//       },
+//       itemStyle: {
 
-        normal: {
+//         normal: {
 
-          lineStyle: {
+//           lineStyle: {
 
-            color: data.color
+//             color: data.color
 
-          }
+//           }
 
-        }
+//         }
 
-      }
+//       }
 
-    }, {
+//     }, {
 
-      name: '预测',
+//       name: '预测',
 
-      type: 'line',
+//       type: 'line',
 
-      data: data.prediction,
+//       data: data.prediction,
 
-      symbol: 'none',
+//       symbol: 'none',
 
-      itemStyle: {
+//       itemStyle: {
 
-        normal: {
+//         normal: {
 
-          lineStyle: {
+//           lineStyle: {
 
-            color: '#80CDF8'
+//             color: '#80CDF8'
 
-          }
+//           }
 
-        }
+//         }
 
-      }
+//       }
 
-    }],
-  };
+//     }],
+//   };
 
-  chart.setOption(option);
-  return chart;
-}
+//   chart.setOption(option);
+//   return chart;
+// }
 
 Page({
 
@@ -359,6 +359,8 @@ Page({
     var color='object.color'
     var plateId='object.plateId'
     let  Values,colors
+    this.actualComponent = this.selectComponent('#mychart-dom-line-actual');
+    this.underComponnet = this.selectComponent('#mychart-dom-line-under');
     if(JSON.parse(options.row).industryTag){
        Values="+"+JSON.parse(options.row).industryValue.toFixed(2)+"%";
        colors="#D81E06";
@@ -433,21 +435,31 @@ Page({
            newsData:res.data.data.news,
            follow:res.data.data.isFollowed ? "已关注":"关注"
           })
-          initChart(real.detail.canvas, real.detail.width, real.detail.height,real.detail.dpr,that.recursion(res.data.data));
+          // initChart(real.detail.canvas, real.detail.width, real.detail.height,real.detail.dpr,that.recursion(res.data.data));
+          this.actualComponent.init((canvas, width, height) => {
+            // 初始化图表
+            const Chart = echarts.init(canvas, null, {
+              width: width,
+              height: height
+            });
+            Chart.setOption(this.getOption(that.recursion(res.data.data)));
+            return Chart;
+          });
         }
         
       })
     },
-    echartInit(e) {
+
+  //   echartInit(e) {
      
-      real=e
-      // initChart(e.detail.canvas, e.detail.width, e.detail.height,e.detail.dpr,e.target.dataset.record);
-   },
-   echartInitunder(e){
-
-    under=e
-    // initChart(e.detail.canvas, e.detail.width, e.detail.height,e.detail.dpr,e.target.dataset.record);
-   },
+  //     real=e
+  //     // initChart(e.detail.canvas, e.detail.width, e.detail.height,e.detail.dpr,e.target.dataset.record);
+  //  },
+  //  echartInitunder(e){
+
+  //   under=e
+  //   // initChart(e.detail.canvas, e.detail.width, e.detail.height,e.detail.dpr,e.target.dataset.record);
+  //  },
       //获取下周预测数据
       postpredfind:function(row){
         var that = this;
@@ -463,7 +475,16 @@ Page({
             that.setData({
               nextchartData:that.recursion(res.data.data),
             })
-            initChart(under.detail.canvas, under.detail.width, under.detail.height,under.detail.dpr,that.recursion(res.data.data));
+            // initChart(under.detail.canvas, under.detail.width, under.detail.height,under.detail.dpr,that.recursion(res.data.data));
+            this.underComponnet.init((canvas, width, height) => {
+              // 初始化图表
+              const Chart = echarts.init(canvas, null, {
+                width: width,
+                height: height
+              });
+              Chart.setOption(this.getOption(that.recursion(res.data.data)));
+              return Chart;
+            });
           }
         })
       },
@@ -481,7 +502,257 @@ Page({
 
       return {"timeData":a,"actual":b,"prediction":c,"color":d}
       },
-
+      getOption:function(data){
+        return {
+          title: {//标题
+            text: '',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+          renderAsImage: true, //支持渲染为图片模式
+      
+          color: [data.color, "#80CDF8"],//图例图标颜色
+      
+          legend: {
+      
+            show: true,
+      
+            itemGap: 25,//每个图例间的间隔
+      
+            // top: 30,
+      
+            x: 30,//水平安放位置,离容器左侧的距离  'left'
+      
+            z: 100,
+      
+            textStyle: {
+      
+              color: '#383838'
+            },
+      
+          },
+      
+          grid: {//网格
+      
+            // left: 30,
+            // top:100,
+            containLabel: true,//grid 区域是否包含坐标轴的刻度标签
+          },
+      
+          xAxis: {//横坐标
+      
+            type: 'category',
+      
+            // nameTextStyle: {//在name值存在下,设置name的样式
+      
+            //   color: 'white',
+      
+            //   fontStyle: 'normal'
+      
+            // },
+      
+            nameLocation:'end',
+      
+            splitLine: {//坐标轴在 grid 区域中的分隔线。
+      
+              show: true,
+      
+              lineStyle: {
+      
+                type: 'dashed',
+                color: ['#2B2B2B']
+              }
+      
+            },
+      
+            boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上,即刻度值上
+      
+            data: data.timeData,
+            axisLine: {onZero: true},
+            axisLabel: {
+      
+              textStyle: {
+      
+                fontSize: 13,
+      
+                color: '#5D5D5D'
+      
+              }
+      
+            }
+      
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              xAxisIndex: 0,
+              filterMode: 'empty',
+              // startValue: data.prediction? data.prediction.length -7:0,
+              // endValue: data.prediction?data.prediction.length:3 ,
+              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+              handleSize: '80%',
+              handleStyle: {
+                  color: '#fff',
+                  shadowBlur: 3,
+                  shadowColor: 'rgba(0, 0, 0, 0.6)',
+                  shadowOffsetX: 2,
+                  shadowOffsetY: 2
+              }
+          },
+          {
+            type: 'inside',
+            realtime: true,
+        }
+      
+        ],
+          yAxis: {//纵坐标
+      
+            type: 'value',
+      
+            position:'right',
+      
+            // nameTextStyle:{//在name值存在下,设置name的样式
+      
+            //   color:'red',
+      
+            //   fontStyle:'normal'
+      
+            // },
+      
+            splitNumber: 5,//坐标轴的分割段数
+      
+            splitLine: {//坐标轴在 grid 区域中的分隔线。
+      
+              show: true,
+      
+              lineStyle: {
+      
+                type: 'dashed',
+                color: ['#2B2B2B']
+      
+              }
+      
+            },
+      
+            axisLabel: {//坐标轴刻度标签
+      
+              // formatter: function (value) {
+      
+              //   var xLable = [];
+      
+              //   if (value == 20) {
+      
+              //     xLable.push('25,883');
+      
+              //   }
+      
+              //   if (value == 40) {
+      
+              //     xLable.push('26,035');
+      
+              //   }
+      
+              //   if (value == 60) {
+      
+              //     xLable.push('26,187');
+      
+              //   }
+      
+              //   if (value == 80) {
+      
+              //     xLable.push('26,339');
+      
+              //   }
+              //   return xLable
+      
+              // },
+      
+              textStyle: {
+      
+                fontSize: 13,
+      
+                color: '#5D5D5D',
+      
+              }
+      
+            },
+      
+            // min: 0,
+      
+            // max: 100,
+      
+          },
+      
+          series: [{
+      
+            name: '实际',
+      
+            type: 'line',
+          
+            // smooth:true,
+      
+            data:data.actual,
+      
+            symbol: 'none',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: data.color
+            }, {
+                offset: 1,
+                color: '#1C1C1C'
+            }])
+      
+            },
+            itemStyle: {
+      
+              normal: {
+      
+                lineStyle: {
+      
+                  color: data.color
+      
+                }
+      
+              }
+      
+            }
+      
+          }, {
+      
+            name: '预测',
+      
+            type: 'line',
+      
+            data: data.prediction,
+      
+            symbol: 'none',
+      
+            itemStyle: {
+      
+              normal: {
+      
+                lineStyle: {
+      
+                  color: '#80CDF8'
+      
+                }
+      
+              }
+      
+            }
+      
+          }],
+        };
+      },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

+ 2 - 2
pages/item/item.wxml

@@ -26,12 +26,12 @@
 
     <swiper-item catchtouchmove='catchTouchMove'>
      <view style="width:100%;height:100%">
-       <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" bind:init="echartInit" data-record="{{realchartData}}" tuData="{{ realchartData }}" ec="{{ ec }}"></ec-canvas>
+       <ec-canvas  id="mychart-dom-line-actual" canvas-id="mychart-line-actual" bind:init="echartInit" data-record="{{realchartData}}" tuData="{{ realchartData }}" ec="{{ ec }}"></ec-canvas>
      </view>
     </swiper-item>
 
     <swiper-item catchtouchmove='catchTouchMove'>
-    <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" bind:init="echartInitunder" data-record="{{nextchartData}}" tuData="{{ nextchartData }}" ec="{{ ec }}"></ec-canvas>
+    <ec-canvas  id="mychart-dom-line-under" canvas-id="mychart-line-under" bind:init="echartInitunder" data-record="{{nextchartData}}" tuData="{{ nextchartData }}" ec="{{ ec }}"></ec-canvas>
     </swiper-item>
   </swiper>
 </view>

+ 1 - 1
project.config.json

@@ -32,7 +32,7 @@
 	},
 	"compileType": "miniprogram",
 	"libVersion": "2.11.1",
-	"appid": "wx24f8183c606b4916",
+	"appid": "wxc9e688ef6559cea7",
 	"projectname": "shares",
 	"debugOptions": {
 		"hidedInDevtools": []