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'

    },

    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: 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: [18, 36, 65, 30, 78, 40, 33],

      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: [10, 30, 31, 50, 40, 20, 10],

      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:[52,56,355,444,52,56,355,444,52,56,355,444,2],
      object:{
        title:"appl",
        Withtitle:"appl inc",
        Volume:"545455",
        float:"-5555"
      }
  },
  catchTouchMove:function(res){
    return false
  },
  // 滑动切换tab 
  bindChange: function(e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  // 点击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) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})