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()
var timeData = [
  '2020/6/1', '2009/6/2', '2009/6/3', '2009/6/4', '2009/6/5', '2009/6/6', '2009/6/7', '2009/6/8', '2009/6/9', '2009/6/10',
];

timeData = timeData.map(function (str) {
  return str.replace('2009/', '');
});
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 = {
    title: {//标题
      text: '',
      left: 'center'
    },
    renderAsImage: true, //支持渲染为图片模式
    color: ["#DF3E3E", "#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'
    },
  ],
    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: '#DF3E3E'
      }, {
          offset: 1,
          color: '#1C1C1C'
      }])
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#DF3E3E'
          }
        }
      }
    }, {
      name: '预测',
      type: 'line',
      data: data.prediction,
      symbol: 'none',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#80CDF8'
          }
        }
      }
    }],
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    url:'../../images/timg.jpg',
    motto: '',
    currentTab: 0,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    imagewidth: 0,//缩放后的宽 
    imageheight: 0,//缩放后的高 
    chartData:{
      actual:[552,586,3555,4454,552,556,4455],
      prediction:[552,546,3585,4424,542,546,35,44,524,56,355,444,2224,421],
      timeData : [
        '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7', '2020/6/8', '2020/6/9', '2020/6/10','2020/6/11',
        '2020/6/12','2020/6/13','2020/6/14',
      ]
    },
      chartDatas:{
        actual:[572,556,3555,4744,552,576,3555],
        prediction:[352,246,385,2424,542,546,255],
        timeData : [
          '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7'
        ]
      },
      ec: {
        onInit: initChart
      },
    // 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.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
    // 滑动切换tab 
    bindChange: function(e) {
      var that = this;
      that.setData({
        currentTab: e.detail.current
      });
    },
    catchTouchMove:function(res){
      return false
    },
  //初始化图表
  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: 50, 
        //  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',
             color: ['#2B2B2B']
           }
         },
         boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
         data: ['2020/6/29', '2020/6/30', '2020/7/1', '2020/7/2', '2020/7/3'],
         axisLine: {onZero: true},
         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',
             color: ['#2B2B2B']
           }
         },
         axisLabel: {//坐标轴刻度标签
          //  formatter: function (value) {
          //    var xLable = [];
          //    if (value == 20) {
          //      xLable.push('1000');
          //    }
          //    if (value == 40) {
          //      xLable.push('2000');
          //    }
          //    if (value == 60) {
          //      xLable.push('4000');
          //    }
          //    if (value == 80) {
          //      xLable.push('6000');
          //    }
          //    return xLable
          //  },
           textStyle: {
             fontSize: 13,
             color: '#5D5D5D',
           }
         },
        //  min: 0,
        //  max: 100,
       },
       series: [{
         name: '实际',
         type: 'line',
        //  smooth:true,
         data: [1888, 3666, 6555, 3000, 7888, 4000, 3333],
         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: [1000, 3000, 3111, 5000, 4000, 2000, 1000],
         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
    })
   
  }

})