shares/pages/item/item.js

// pages/item/item.js
import * as echarts from '../../ec-canvas/echarts';
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
    },
    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',
      ],
      color:""
    },
      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'
        ],
        color:""
      },
      object:{
        title:"appl",
        Withtitle:"appl inc",
        Volume:"545455",
        float:"-5555",
        color:'crimson',
      },
      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天前"
        },
      ],
  },
  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 title = "object.title"
    var Withtitle ="object.Withtitle"
    var Volume = "object.Volume"
    var float ="object.float"
    var color='object.color'
    var chartData="chartData.color"
    var chartDatas="chartDatas.color"
    this.setData({
   [title]:JSON.parse(options.row).title,
      [Withtitle]:JSON.parse(options.row).subtitle,
    [Volume]:JSON.parse(options.row).digital,
     [float]:JSON.parse(options.row).Increase,
     [color]:JSON.parse(options.row).color,
     [chartData]:JSON.parse(options.row).color,
     [chartDatas]:JSON.parse(options.row).color,
     button:JSON.parse(options.row).keep,
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})