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) {
//   const 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
    this.actualComponent = this.selectComponent('#mychart-dom-line-actual');
    this.underComponnet = this.selectComponent('#mychart-dom-line-under');
    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,)
  console.log(app.globalData.userInfo)
  },
  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);
    var postfollowcancel=wxRequest.postRequest(Api.postfollowcancel(),data);
    if(this.data.follow=="关注"){
      postfollow.then((res)=>{
        if(res.statusCode==200){
          that.setData({
            follow:res.data.data==1? "已关注":"关注"
           })
          wx.showToast({
            title: res.data.message,
            icon: 'success',
            duration: 2000
          })
        }
      })
    }else{
      postfollowcancel.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));
          this.actualComponent.init((canvas, width, height) => {
            // 初始化图表
            const Chart = echarts.init(canvas, null, {
              width: width,
              height: height
            });
            Chart.setOption(this.getOption(that.recursion(res.data.data)));
            return Chart;
          });
        }
        
      })
    },

  //   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));
            this.underComponnet.init((canvas, width, height) => {
              // 初始化图表
              const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
              });
              Chart.setOption(this.getOption(that.recursion(res.data.data)));
              return Chart;
            });
          }
        })
      },
    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}
      },
      getOption:function(data){
        return {
          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'
      
                }
      
              }
      
            }
      
          }],
        };
      },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})