详情页

pages/details/details.js

@@ -1,17 +1,323 @@
 // pages/details/details.js
+import * as echarts from '../../ec-canvas/echarts';
+var Chart=null;
+const app = getApp();
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    ec: {
+      onInit: function (canvas, width, height) {
+        chart = echarts.init(canvas, null, {
+          width: width,
+          height: height
+        });
+        canvas.setChart(chart);
+        return chart;
+      },
+      lazyLoad: true // 延迟加载
+    },
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    this.echartsComponnet = this.selectComponent('#mychart');
+    //如果是第一次绘制
+    if (!Chart) {
+      this.init_echarts(); //初始化图表
+    } else {
+      this.setOption(Chart); //更新数据
+
+    }
+  },
+  //初始化图表
+  init_echarts: function () {
+   this.echartsComponnet.init((canvas, width, height) => {
+      // 初始化图表
+      const Chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      this.setOption(Chart)
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+
+      return Chart
+    });
+  },
+
+  setOption: function (Chart) {
+    Chart.clear();  // 清除
+    Chart.setOption(this.getOption());  //获取新数据
+  },
+
+  // 图表配置项
+
+  getOption() {
+
+    var self = this;
+
+    var option = {
+
+      title: {//标题
+
+        text: '',
+
+        left: 'center'
+
+      },
+
+      renderAsImage: true, //支持渲染为图片模式
+
+      color: ["#DF3E3E", "#1AFA29"],//图例图标颜色
+
+      legend: {
+
+        show: true,
+
+        itemGap: 25,//每个图例间的间隔
+
+        top: 30,
+
+        x: 30,//水平安放位置,离容器左侧的距离  'left'
+
+        z: 100,
+
+        textStyle: {
+
+          color: '#383838'
+        },
+
+        data: [//图例具体内容
+
+          {
+
+            name: '涨幅',
+
+            textStyle: {
+
+              fontSize: 13,
+
+              color: 'white'
+
+            },
+
+            icon: 'roundRect'
+
+          },
+
+          {
+
+            name: '跌幅',
+
+            textStyle: {
+
+              fontSize: 13,
+
+              color: 'white'
+            },
+
+            icon: 'roundRect'
+
+          }
+
+        ]
+
+      },
+
+      grid: {//网格
+
+        left: 30,
+
+        top:100,
+
+        containLabel: true,//grid 区域是否包含坐标轴的刻度标签
+
+      },
+
+      xAxis: {//横坐标
+
+        type: 'category',
+
+        name: '区间',//横坐标名称
+
+        nameTextStyle: {//在name值存在下，设置name的样式
+
+          color: 'white',
+
+          fontStyle: 'normal'
+
+        },
+
+        nameLocation:'end',
+
+        splitLine: {//坐标轴在 grid 区域中的分隔线。
+
+          show: true,
+
+          lineStyle: {
+
+            type: 'dashed'
+
+          }
+
+        },
+
+        boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
+
+        data: ['10', '11', '12', '13', '14', '15', '16'],
+
+        axisLabel: {
+
+          textStyle: {
+
+            fontSize: 13,
+
+            color: '#5D5D5D'
+
+          }
+
+        }
+
+      },
+
+      yAxis: {//纵坐标
+
+        type: 'value',
+
+        position:'right',
+
+        name: '股票值',//纵坐标名称
+
+        nameTextStyle:{//在name值存在下，设置name的样式
+
+          color:'red',
+
+          fontStyle:'normal'
+
+        },
+
+        splitNumber: 5,//坐标轴的分割段数
+
+        splitLine: {//坐标轴在 grid 区域中的分隔线。
+
+          show: true,
+
+          lineStyle: {
+
+            type: 'dashed'
+
+          }
+
+        },
+
+        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: [18, 36, 65, 30, 78, 40, 33],
+
+        symbol: 'none',
+
+        itemStyle: {
+
+          normal: {
+
+            lineStyle: {
+
+              color: '#DF3E3E'
+
+            }
+
+          }
+
+        }
+
+      }, {
+
+        name: '跌幅',
+
+        type: 'line',
+
+        data: [10, 30, 31, 50, 40, 20, 10],
+
+        symbol: 'none',
+
+        itemStyle: {
+
+          normal: {
+
+            lineStyle: {
+
+              color: '#1AFA29'
+
+            }
+
+          }
+
+        }
+
+      }],
+
+    }
+
+    return option;
 
   },
 
@@ -62,5 +368,9 @@ Page({
    */
   onShareAppMessage: function () {
 
-  }
+  },
+  backBtn:function(){
+    wx.navigateBack();
+  },
+   
 })

pages/details/details.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "navigationBarTitleText": "详情",
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
 }

pages/details/details.wxml

@@ -1,2 +1,25 @@
-<!--pages/details/details.wxml-->
-<text>pages/details/details.wxml</text>
+ <scroll-view scroll-y="true"  class="bground">
+   
+        <!-- <button type="default" bindtap="backBtn">返回上一页</button> -->
+        <view class="top">
+            <view class="topTitle">
+              <text class="titleBig">DOWN J</text>
+              <text class="titleSmall">xxxxxxxxxxxxxxx</text>
+            </view>
+            <view class="line"></view>
+            <view class="topText">
+              <text class="textOne">1111111</text>
+              <text class="textTwo">+527.4</text></view>
+        </view>
+        <view class="middleCharts">
+          <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
+        </view>
+        <view class="buttonText">
+        
+        </view>
+        <view class="nextText"> 
+          <button>下周预测</button>
+        </view>
+  
+</scroll-view>
+

pages/details/details.wxss

@@ -1 +1,76 @@
-/* pages/details/details.wxss */
+/* pages/details/details.wxss */
+.bground{
+  background:#000;
+  color:white;
+  height:100%;
+  width:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  right:0;
+}
+.top{
+  width:95%;
+  height:18%;
+  background:#1C1C1C;
+  position:relative;
+  /* top:50px;  */
+  margin:5% auto; 
+  border-radius:3px;
+}
+.topTitle{
+  padding:10px;
+}
+.topText{
+  padding:10px;
+  position:absolute;
+  bottom:5px;
+}
+.titleBig{
+  font-size:1.8rem;
+  font-weight:bold;
+}
+.titleSmall{
+    color:#78777D;
+    margin-left:30px;
+}
+.line{
+  width:100%;
+  height:1rpx;
+  background:#2C2C2C;
+}
+.textOne{
+  font-weight:bold;
+}
+.textTwo{
+  color:#DC3329;
+  margin-left:20px;
+}
+.middleCharts{
+  width:95%;
+  height:40%;
+  background:#1C1C1C;
+  /* position:relative;
+  top:50px; */
+  margin:5% auto; 
+  border-radius:3px;
+}
+#mychart{
+  margin:0 auto;
+}
+.buttonText{
+  width:95%;
+  height:20%;
+  background:#1C1C1C;
+  /* position:relative;
+  top:50px; */
+  margin:5% auto; 
+  border-radius:3px;
+}
+.nextText{
+  width:90%;
+  height:5%;
+  background:#1C1C1C;  
+  border-radius:3px;
+  margin:0 auto;
+}

pages/drop/drop.js

@@ -99,7 +99,7 @@ Page({
 
     },
     gotoDetail:function(options){
-        wx.switchTab({
+        wx.navigateTo({
           url: '../details/details',
         })
     }