shares/pages/details/details.js

// pages/details/details.js
import * as echarts from '../../ec-canvas/echarts';
var Chart=null;
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: function (canvas, width, height) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        return chart;
      },
      lazyLoad: true // 延迟加载
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    //如果是第一次绘制
    if (!Chart) {
      this.init_echarts(); //初始化图表
    } else {
      this.setOption(Chart); //更新数据

    }
  },
  //初始化图表
  init_echarts: function () {
   this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setOption(Chart)
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等

      return Chart
    });
  },

  setOption: function (Chart) {
    Chart.clear();  // 清除
    Chart.setOption(this.getOption());  //获取新数据
  },

  // 图表配置项

  getOption() {

    var self = this;

    var option = {

      title: {//标题

        text: '',

        left: 'center'

      },

      renderAsImage: true, //支持渲染为图片模式

      color: ["#DF3E3E", "#1AFA29"],//图例图标颜色

      legend: {

        show: true,

        itemGap: 25,//每个图例间的间隔

        top: 30,

        x: 30,//水平安放位置,离容器左侧的距离  'left'

        z: 100,

        textStyle: {

          color: '#383838'
        },

        data: [//图例具体内容

          {

            name: '涨幅',

            textStyle: {

              fontSize: 13,

              color: 'white'

            },

            icon: 'roundRect'

          },

          {

            name: '跌幅',

            textStyle: {

              fontSize: 13,

              color: 'white'
            },

            icon: 'roundRect'

          }

        ]

      },

      grid: {//网格

        left: 30,

        top:100,

        containLabel: true,//grid 区域是否包含坐标轴的刻度标签

      },

      xAxis: {//横坐标

        type: 'category',

        name: '区间',//横坐标名称

        nameTextStyle: {//在name值存在下，设置name的样式

          color: 'white',

          fontStyle: 'normal'

        },

        nameLocation:'end',

        splitLine: {//坐标轴在 grid 区域中的分隔线。

          show: true,

          lineStyle: {

            type: 'dashed'

          }

        },

        boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上

        data: ['10', '11', '12', '13', '14', '15', '16'],

        axisLabel: {

          textStyle: {

            fontSize: 13,

            color: '#5D5D5D'

          }

        }

      },

      yAxis: {//纵坐标

        type: 'value',

        position:'right',

        name: '股票值',//纵坐标名称

        nameTextStyle:{//在name值存在下，设置name的样式

          color:'red',

          fontStyle:'normal'

        },

        splitNumber: 5,//坐标轴的分割段数

        splitLine: {//坐标轴在 grid 区域中的分隔线。

          show: true,

          lineStyle: {

            type: 'dashed'

          }

        },

        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',

        itemStyle: {

          normal: {

            lineStyle: {

              color: '#DF3E3E'

            }

          }

        }

      }, {

        name: '跌幅',

        type: 'line',

        data: [10, 30, 31, 50, 40, 20, 10],

        symbol: 'none',

        itemStyle: {

          normal: {

            lineStyle: {

              color: '#1AFA29'

            }

          }

        }

      }],

    }

    return option;

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  gotoNext:function(options){
    wx.navigateTo({
      url: '../next/next',
    })
  },
  backBtn:function(){
    wx.navigateBack();
  },
   
})