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()
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: ["#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',
        start: 60,
        end: 100,
        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,
      button:"关注",
          ec: {
      onInit: initChart
    },
    realchartData:{
      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',
      ],
      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',
      },
      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"
      });
  },
  // 点击tab切换 
  swichNav: function(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(JSON.parse(options.row))
    var Name = "object.Name"
    var value = "object.value"
    var color='object.color'
    let  realcolor="realchartData.color",nextcolor="nextchartData.color", Values,colors
    if(JSON.parse(options.row).Tag){
       Values="+"+JSON.parse(options.row).Value.toFixed(2)+"%";
       colors="#D81E06";
    }else{
      Values="-"+JSON.parse(options.row).Value.toFixed(2)+"%"
      colors="#07c160"

    }
    this.setData({
   [Name]:JSON.parse(options.row).Name,
   [value]:Values,
   [color]:colors,
   [realcolor]:colors,
   [nextcolor]:colors,
    })
  var that = this;
  that.postbyiid(JSON.parse(options.row).IID,)
  that.postnewsbyiid(JSON.parse(options.row).IID)
  },
    //获取数据
    postbyiid:function(){
      var that = this;
      var postbyiid = wxRequest.postRequest(Api.postbyiid(),{'iid':'12'});
      postbyiid.then((res)=>{
        console.log(res)
        console.log(that.recursion(res.data))
        if(res.statusCode==200){
         that.setData({
          realchartData:that.recursion(res.data)
         })
        }
      })
    },
    recursion:function(row,a=[],b=[],c=[],d){
        for(let i in row.data){
        a.push(row.data[i].Date)
        b.push(row.data[i].Close)
        c.push(row.data[i].Pred)
        }
        if(row.tag){
          d="#D81E06"
        }else{
          d="#07c160"
        }

      return {"timeData":a,"actual":b,"prediction":c,"color":d}
      },
     //获取新闻
     postnewsbyiid:function(){
      var that = this;
      var postbyiid = wxRequest.postRequest(Api.postnewsbyiid(),{'iid':'12'});
      postbyiid.then((res)=>{
        console.log(res)
        // NID: "新闻id"
        // Title: "标题"
        // From: "来源"
        // MiniContent: "内容"
        // EID: ""
        // Date: "时间"
        // Tag: "情绪"
        console.log(that.recursion(res.data))
        if(res.statusCode==200){
         that.setData({
          newsData:res.data.data
         })
        }
      })
    },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})