shares/pages/index/index.js

//index.js
//获取应用实例
import * as echarts from '../../ec-canvas/echarts';
var imageUtil = require('../../utils/window.js'); 
var Chart=null;
const app = getApp()

Page({
  data: {
    url:'../../images/timg.jpg',
    motto: '',
    currentTab: 0,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    imagewidth: 0,//缩放后的宽 
    imageheight: 0,//缩放后的高 
    ec: {
      onInit: function (canvas, width, height) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        return chart;
      },
      lazyLoad: true // 延迟加载
    },
    aa:[
      {
        id:'0',
        from:"Investing.com 中文",
        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
        time:"6天前"
      },
      { 
        id:'1',
        from:"chinese.aljazeera.net",
        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
        time:"6天前"
      },
      {
        id:'2',
        from:"Investing.com 中文",
        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
        time:"5天前"
      },
      {
        id:'3',
        from:"Investing.com 中文",
        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
        time:"6天前"
      },
      { 
        id:'4',
        from:"chinese.aljazeera.net",
        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
        time:"6天前"
      },
      {
        id:'5',
        from:"Investing.com 中文",
        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
        time:"5天前"
      },
      {
        id:'6',
        from:"Investing.com 中文",
        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
        time:"6天前"
      },
      { 
        id:'7',
        from:"chinese.aljazeera.net",
        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
        time:"6天前"
      },
      {
        id:'8',
        from:"Investing.com 中文",
        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
        time:"5天前"
      },
      {
        id:'9',
        from:"Investing.com 中文",
        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
        time:"6天前"
      },
      { 
        id:'10',
        from:"chinese.aljazeera.net",
        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
        time:"6天前"
      },
      {
        id:'11',
        from:"Investing.com 中文",
        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
        time:"5天前"
      },
      {
        id:'12',
        from:"Investing.com 中文",
        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
        time:"6天前"
      },
      { 
        id:'13',
        from:"chinese.aljazeera.net",
        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
        time:"6天前"
      },
      {
        id:'14',
        from:"Investing.com 中文",
        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
        time:"5天前"
      },
    ],

  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onReady: function (e) {
    this.computeScrollViewHeight();
    // var query = wx.createSelectorQuery()
    // query.select('#test').boundingClientRect(function (res) {
    //    console.log(res.top);
    // }).exec();
},
  onLoad: function () {
    let sysinfo = wx.getSystemInfoSync(),
    windowHeight = sysinfo.windowHeight,
    statusHeight = sysinfo.statusBarHeight, 
    isiOS = sysinfo.system.indexOf('iOS') > -1, 
    navHeight;
    if (!isiOS) {
        navHeight = 48;
    } else {
        navHeight = 44;
    }
    let height = windowHeight-statusHeight-navHeight;
    this.setData({
      height:height
    })
    this.echartsComponnet = this.selectComponent('#mychart');
    console.log(this.echartsComponnet);
    //如果是第一次绘制
    if (!Chart) {
      this.init_echarts(); //初始化图表
    } else {
      this.setOption(Chart); //更新数据
    }
    // this.computeScrollViewHeight();
    // if (app.globalData.userInfo) {
    //   this.setData({
    //     userInfo: app.globalData.userInfo,
    //     hasUserInfo: true
    //   })
    // } else if (this.data.canIUse){
    //   // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
    //   // 所以此处加入 callback 以防止这种情况
    //   app.userInfoReadyCallback = res => {
    //     this.setData({
    //       userInfo: res.userInfo,
    //       hasUserInfo: true
    //     })
    //   }
    // } else {
    //   // 在没有 open-type=getUserInfo 版本的兼容处理
    //   wx.getUserInfo({
    //     success: res => {
    //       app.globalData.userInfo = res.userInfo
    //       this.setData({
    //         userInfo: res.userInfo,
    //         hasUserInfo: true
    //       })
    //     }
    //   })
    // }
  },
  computeScrollViewHeight() {
    var that = this
    let query = wx.createSelectorQuery().in(that)
    query.select('.swiper-tab').boundingClientRect()
    query.select('.chart').boundingClientRect()
    query.select('.news').boundingClientRect()
    query.exec(res => {
      let topHeight = res[0].height
      let searchHeight = res[1].height
      let titleHeight = res[2].height
      let windowHeight = wx.getSystemInfoSync().windowHeight
      let windowWidth = wx.getSystemInfoSync().windowWidth
      let height = windowHeight - topHeight - searchHeight - titleHeight
      let ratio = 750 / windowWidth
      let scrollHeight = height * ratio
      that.setData({ scrollHeight: scrollHeight})
    })
  },
  imageLoad: function (e) { 
    var imageSize = imageUtil.imageUtil(e) 
    this.setData({ 
     imagewidth: imageSize.imageWidth, 
     imageheight: imageSize.imageHeight 
    }) 
    this.computeScrollViewHeight();
   },
  onFold:function(e){
    console.log( e.currentTarget.dataset.id);
    wx.navigateTo({
      url:"../news/news"
      });
  },
  choose:function(e){
    wx.navigateTo({
      url:"../filter/filter"
      })
  },
  swichNav: function(e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.init_echarts();
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  //初始化图表
  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", "#80CDF8"],//图例图标颜色 
       legend: { 
        //  left:'right',
         show: true, 
         itemGap: 25,//每个图例间的间隔 
         top: 20, 
         right:20,
         x: 100,//水平安放位置,离容器左侧的距离  'left' 
         z: 100, 
         textStyle: { 
           color: '#383838'
         }, 
         data: [//图例具体内容 
           { 
             name: '实际', 
             textStyle: { 
               fontSize: 13, 
               color: 'white' 
             },
             icon: 'line'
           }, 
           { 
             name: '预测', 
             textStyle: {
               fontSize: 13, 
               color: 'white'
             }, 
             icon: 'line',
           } 
         ] 
       }, 
       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',
         areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#DF3E3E'
           }, 
           {
              offset: 1,
              color: '#1C1C1C'
           }
       ])
      },
         itemStyle: {
           normal: {
             lineStyle: {
               color: '#DF3E3E'
             }
           }
         }
       }, {
         name: '预测',
         type: 'line',
         data: [10, 30, 31, 50, 40, 20, 10],
         symbol: 'none',
         itemStyle: {
           normal: {
             lineStyle: {
               color: '#80CDF8'
             }
           }
         }
       }],
     }
     return option;
   },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
   
  }

})