shares/pages/item/item.js

// pages/item/item.js
import * as echarts from '../../ec-canvas/echarts';
var Api = require('../../utils/api.js');
var wxRequest = require('../../utils/wxRequest.js') 
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/', '');
});

var app = getApp()
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, //支持渲染为图片模式

    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'

          }

        }

      }

    }],
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
        // 页面配置  
        winWidth: 0,
        winHeight: 0,
        // tab切换 
        currentTab: 0,
        follow:"关注",
          ec: {
      // onInit: initChart
    },
    realchartData:{
      // actual:[572,556,3555,4744,552,576,3555],
      // prediction:[572,556,3555,4744,552,576,3555],
      // timeData : [
      //   '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7'
      // ],
      // color:"crimson"
    },
      nextchartData:{
        // 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'
        // ],
        // color:"crimson"
      },
      object:{
        Name:"appl",
        value:"545455",
        color:'crimson',
        plateId:""
      },
      newsData:[],
  },
  catchTouchMove:function(res){
    return false
  },

  // 滑动切换tab 
  bindChange: function(e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    })
  },

  //点击新闻
  onFold:function(e){
    console.log( e.currentTarget.dataset.id);
    wx.navigateTo({
      url:"../news/news?newsId="+e.currentTarget.dataset.id
      });
  },
  // 点击tab切换 
  swichNav: function(e) {
    // console.log(e)
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options)
    var that = this;
    var Name = "object.Name"
    var value = "object.value"
    var color='object.color'
    var plateId='object.plateId'
    let  Values,colors
    if(JSON.parse(options.row).industryTag){
       Values="+"+JSON.parse(options.row).industryValue.toFixed(2)+"%";
       colors="#D81E06";
    }else{
      Values=JSON.parse(options.row).industryValue.toFixed(2)+"%"
      colors="#07c160"
    }
    this.setData({
   [Name]:JSON.parse(options.row).industryName,
   [plateId]:JSON.parse(options.row).industryId,
   [value]:Values,
   [color]:colors,
    })
  that.posthisfind(JSON.parse(options.row).industryId,)
  that.postpredfind(JSON.parse(options.row).industryId,)

  },
  postfollow:function(){
    var that = this;

    var data={
      plateId: this.data.object.plateId,
      plateName: this.data.object.Name,
      userId: wx.getStorageSync('openid'),
      userName: app.globalData.userInfo.nickName,
    }
  
    var postfollow = wxRequest.postRequest(Api.postfollow(),data);
    postfollow.then((res)=>{
   
      if(res.statusCode==200){
        that.setData({
          follow:res.data.data==1? "已关注":"关注"
         })
        wx.showToast({
          title: res.data.message,
          icon: 'success',
          duration: 2000
        })
      }
      
    })
  },
    //获取数据
    posthisfind:function(row){
      // console.log(row)
      var that = this;
      var data=[{
          plateId: row,
		       userId: wx.getStorageSync('openid')
        }
      ]
      var postbyiid = wxRequest.postRequest(Api.posthisfind(),data);
      postbyiid.then((res)=>{
       console.log(res)
        // console.log(that.recursion(res.data))
        if(res.statusCode==200){
          that.setData({
           realchartData:that.recursion(res.data.data),
           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));
        }
        
      })
    },
    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);
   },
      //获取下周预测数据
      postpredfind:function(row){
        var that = this;
        var data=[ {
            plateId: row,
             userId: wx.getStorageSync('openid')
          }
        ]
        var postbyiid = wxRequest.postRequest(Api.postpredfind(),data);
        postbyiid.then((res)=>{
      
          if(res.statusCode==200){
            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));
          }
        })
      },
    recursion:function(row,a=[],b=[],c=[],d){
        for(let i in row.actuals){
        a.unshift(row.actuals[i].industryDate)
        b.unshift(row.actuals[i].close)
        c.unshift(row.actuals[i].pred)
        }
        if(row.tag){
          d="#D81E06"
        }else{
          d="#07c160"
        }

      return {"timeData":a,"actual":b,"prediction":c,"color":d}
      },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})