gengxin

pages/drop/drop.js

@@ -1,106 +1,165 @@
-// pages/drop/drop.js
+import * as echarts from '../../ec-canvas/echarts';
+
+var app = getApp()
+function initChart(canvas, width, height, dpr, data) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    xAxis : {
+          type : 'category',
+          splitNumber: 2,
+          scale: true,
+          show:false,
+          splitLine:{
+  　　　　show:false
+      　　}
+      },
+  yAxis : {
+          type : 'value',
+          splitNumber: 2,
+          scale: true,
+          show:false,
+          splitLine:{
+  　　　　show:false
+    　　 }
+      },
+    
+    series: [{
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: '#07c160',
+    },
+      data:data,
+      areaStyle: {
+        color: '#07c160',
+      },
+    }]
+  };
+
+  chart.setOption(option);
+  return chart;
+}
+
 Page({
 
-  /**
-   * 页面的初始数据
-   */
   data: {
+    // 页面配置  
     winWidth: 0,
     winHeight: 0,
-    currentTab: 0,    
-  },
+    // tab切换 
+    currentTab: 0,
+    ec: {
+      onInit: initChart
+    },
+    array:[
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444,52,56,355,444,52,56,355,444,2]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,44554]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,44554]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,44554]
+      }
+    ],
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
+  },
+  onLoad: function() {
     var that = this;
-
-        /**
-         * 获取当前设备的宽高
-         */
-        wx.getSystemInfo( {
-
-            success: function( res ) {
-                that.setData( {
-                    winWidth: res.windowWidth,
-                    winHeight: res.windowHeight
-                });
-            }
-
+    // 获取系统信息 
+    wx.getSystemInfo({
+      success: function(res) {
+        
+        that.setData({
+          winWidth: res.windowWidth,
+          winHeight: res.windowHeight
         });
+      }
+    });
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  // 滑动切换tab 
+  bindChange: function(e) {
+    var that = this;
+    that.setData({
+      currentTab: e.detail.current
+    });
   },
-    swichNav: function( e ) {
-
-        var that = this;
-
-        if( this.data.currentTab === e.target.dataset.current ) {
-            return false;
-        } else {
-            that.setData( {
-                currentTab: e.target.dataset.current
-            })
-        }
-    },
-
-    bindChange: function( e ) {
-
-        var that = this;
-        that.setData( { currentTab: e.detail.current });
-
-    },
-    gotoDetail:function(options){
-        wx.navigateTo({
-          url: '../details/details',
-        })
+  // 点击tab切换 
+  swichNav: function(e) {
+    var that = this;
+    if (this.data.currentTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentTab: e.target.dataset.current
+      })
     }
-})
+  },
+  open: function (e) {
+    console.log(e)
+    wx.navigateTo({
+      url: '../details/details'
+    });
+  }
+})

pages/drop/drop.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "跌幅",
-  "usingComponents": {}
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
 }

pages/drop/drop.wxml

@@ -1,18 +1,45 @@
-<view class="bground">
-  <!-- <view class="dropTop">跌幅榜</view> -->
-  <view class="swiper-tab">
-    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">上周实际数据</view>
-    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">上周预测数据</view>
+<view class="swiper-tab">
+  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">上周实际数据</view>
+  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">上周预测数据</view>
 </view>
 
-<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
-    <swiper-item>
-        <view>上周实际数据</view>
-        <button type="primary" bindtap="gotoDetail">跳转到详情页</button>
-    </swiper-item>
-    <swiper-item>
-        <view>上周预测数据</view>
-    </swiper-item>
-</swiper>
-
-</view>
+<swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight - 48}}px" bindchange="bindChange">
+  <swiper-item>
+    <scroll-view scroll-y style="height: 100%;">
+      <view wx:for="{{array}}"class="swiper-box-view" wx:key="index" bindtap="open" data-index="{{index}}">
+        <view class="swiper-box-left">
+          <view>{{item.title}}</view>
+          <view class="swiper-box-subtitle">{{item.subtitle}}</view>
+        </view>
+        <view class="swiper-box-right">
+          <view class="swiper-box-canvas">
+            <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ item.data }}" ec="{{ ec }}"></ec-canvas>
+          </view>
+          <view class="swiper-box-button">
+            <view>{{item.digital}}</view>
+            <button  class="mini-btn" type="primary" size="mini" >-{{item.Increase}}</button>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </swiper-item>
+  <swiper-item>
+    <scroll-view scroll-y style="height: 100%;">
+      <view wx:for="{{array}}"class="swiper-box-view" wx:key="index" bindtap="open" data-index="{{index}}">
+        <view class="swiper-box-left">
+          <view>{{item.title}}</view>
+          <view class="swiper-box-subtitle">{{item.subtitle}}</view>
+        </view>
+        <view class="swiper-box-right">
+          <view class="swiper-box-canvas">
+            <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ item.data }}" ec="{{ ec }}"></ec-canvas>
+          </view>
+          <view class="swiper-box-button">
+            <view>{{item.digital}}</view>
+            <button class="mini-btn" type="primary" size="mini">-{{item.Increase}}</button>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </swiper-item>
+</swiper>

pages/drop/drop.wxss

@@ -1,42 +1,55 @@
-/* pages/drop/drop.wxss */
-.bground{
-  background:#000;
-  color:white;
-  height:100%;
-  width:100%;
-}
-.dropTop{
-  font-size:1.8rem;
-  position:relative;
-  color:red;
-  top:0;
-  left:0;
-  height:58px;
-  line-height:58px;
-  border-bottom:1px solid #fff;
-}
-.swiper-tab{
+page {
+  background: #000;
+}  
+.swiper-tab {
   width: 100%;
   text-align: center;
   line-height: 80rpx;
 }
-.swiper-tab-list{ 
-   font-size: 30rpx;
-   display: inline-block;
-   width: 33.33%;
-   color: #777777;
+
+.swiper-tab-list {
+  font-size: 30rpx;
+  display: inline-block;
+  width: 30%;
+  color: #777;
 }
-.on{ 
-  color:#D81E06;
-  border-bottom: 3rpx solid #D81E06;
+
+.on {
+  color: #D81E06;
+  border-bottom: 5rpx solid #D81E06;
 }
-.swiper-box{ 
-  display: block; 
+
+.swiper-box {
+  display: block;
   height: 100%;
-  width: 100%; 
-  overflow: hidden; 
+  width: 100%;
+  overflow: hidden;
+  color: #fff;
 }
-.swiper-box view{
 
-  text-align: center;
-}
+.swiper-box .swiper-box-view {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+  margin: 10rpx;
+ border-bottom: 1rpx slategray solid;
+}
+ec-canvas {
+  width: 100%;
+  height: 100%;
+
+  }
+  .swiper-box .swiper-box-view .swiper-box-left .swiper-box-subtitle{
+    color: slategray;
+  }
+  .swiper-box .swiper-box-view .swiper-box-right{
+    display: flex;
+    align-items: center;
+  }
+.swiper-box .swiper-box-view .swiper-box-right .swiper-box-canvas {
+  height: 120rpx;
+  width: 300rpx;
+}
+.swiper-box .swiper-box-view .swiper-box-right .swiper-box-button{
+  text-align: right;
+}

pages/rise/rise.js

@@ -8,8 +8,7 @@ function initChart(canvas, width, height, dpr, data) {
     devicePixelRatio: dpr // new
   });
   canvas.setChart(chart);
-  console.log(dpr)
-  console.log(data)
+
   var option = {
     xAxis : {
           type : 'category',
@@ -33,8 +32,14 @@ function initChart(canvas, width, height, dpr, data) {
     series: [{
       type: 'line',
       smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: '#D81E06',
+    },
       data:data,
-      areaStyle: {},
+      areaStyle: {
+        color: '#D81E06',
+      },
     }]
   };
 
@@ -54,6 +59,48 @@ Page({
       onInit: initChart
     },
     array:[
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444,52,56,355,444,52,56,355,444,2]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,44554]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,444]
+      },
+      {
+        title:'AppL',
+        subtitle:"APPL INC",
+        Increase:"1.22",
+        digital:"33",
+        data:[52,56,355,44554]
+      },
       {
         title:'AppL',
         subtitle:"APPL INC",
@@ -108,5 +155,11 @@ Page({
         currentTab: e.target.dataset.current
       })
     }
+  },
+  open: function (e) {
+    console.log(e)
+    wx.navigateTo({
+      url: '../details/details'
+    });
   }
 })

pages/rise/rise.wxml

@@ -6,27 +6,41 @@
 <swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight - 48}}px" bindchange="bindChange">
   <swiper-item>
     <scroll-view scroll-y style="height: 100%;">
-      <view wx:for="{{array}}"class="swiper-box-view">
-        <view>
+      <view wx:for="{{array}}"class="swiper-box-view" wx:key="index" bindtap="open" data-index="{{index}}">
+        <view class="swiper-box-left">
           <view>{{item.title}}</view>
-          <view>{{item.subtitle}}</view>
+          <view class="swiper-box-subtitle">{{item.subtitle}}</view>
         </view>
-        <view style='width:100%;height:200rpx'>
-
-          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ item.data }}" ec="{{ ec }}"></ec-canvas>
-        </view>
-        <view>
-          <view>{{item.digital}}</view>
-          <button class="mini-btn" type="primary" size="mini">+{{item.Increase}}</button>
+        <view class="swiper-box-right">
+          <view class="swiper-box-canvas">
+            <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ item.data }}" ec="{{ ec }}"></ec-canvas>
+          </view>
+          <view class="swiper-box-button">
+            <view>{{item.digital}}</view>
+            <button  class="mini-btn" type="warn" size="mini" >+{{item.Increase}}</button>
+          </view>
         </view>
       </view>
     </scroll-view>
   </swiper-item>
   <swiper-item>
-    <view class="container">
-      
-    </view>
+    <scroll-view scroll-y style="height: 100%;">
+      <view wx:for="{{array}}"class="swiper-box-view" wx:key="index" bindtap="open" data-index="{{index}}">
+        <view class="swiper-box-left">
+          <view>{{item.title}}</view>
+          <view class="swiper-box-subtitle">{{item.subtitle}}</view>
+        </view>
+        <view class="swiper-box-right">
+          <view class="swiper-box-canvas">
+            <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ item.data }}" ec="{{ ec }}"></ec-canvas>
+          </view>
+          <view class="swiper-box-button">
+            <view>{{item.digital}}</view>
+            <button class="mini-btn" type="warn" size="mini">+{{item.Increase}}</button>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
   </swiper-item>
-
 </swiper>
 

pages/rise/rise.wxss

@@ -29,24 +29,31 @@ page {
 
 .swiper-box .swiper-box-view {
  display: flex;
- overflow:scroll;
  justify-content: space-between;
+ align-items: center;
+  margin: 10rpx;
  border-bottom: 1rpx slategray solid;
 }
 ec-canvas {
   width: 100%;
   height: 100%;
-  }
 
-  .swiper-box .swiper-box-view .container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
+  }
+  .swiper-box .swiper-box-view .swiper-box-left .swiper-box-subtitle{
+    color: slategray;
+  }
+  .swiper-box .swiper-box-view .swiper-box-right{
+    display: flex;
+    align-items: center;
+  }
+.swiper-box .swiper-box-view .swiper-box-right .swiper-box-canvas {
+  height: 120rpx;
+  width: 300rpx;
+}
+.swiper-box .swiper-box-view .swiper-box-right .swiper-box-button{
+  text-align: right;
 }
+.swiper-box .swiper-box-view .swiper-box-right .swiper-box-button button{
+  color: #fff;
+  background: #D81E06;
+}