mini_program/pages/calculation-detail/calculation-detail.js

// pages/calculation-detail/calculation-detail.js
import * as echarts from '../../components/ec-canvas/echarts';

const app = getApp();
const $api = require('../../utils/api').API;


var option = {
  title: {
    text: '我的预测与成交溢价率的差异',
    left: 'center'
  },
  legend: {
    data: ['溢价率差异', '平均差异', '我的净利率'],
    bottom: 50,
    left: 'center',
    z: 100
  },
  grid: {
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['21001', '21002', '21003', '21004', '21005', '21006', '21007', '21008', '21009', '210010'],
    show: false
  },
  yAxis: {
    x: 'center',
    type: 'value',
    position: 'right',
    offset: 5,
    axisLabel: {
      formatter: '{value}.00%'
    }
  },
  series: [{
    name: '溢价率差异',
    type: 'bar',
    smooth: true,
    data: [],
    itemStyle: {
      color: '#9BBB59'
    }
  }, {
    name: '平均差异',
    type: 'line',
    data: [],
    showSymbol: false,
    lineStyle: {
      color: '#76589B',
      width: 5
    }
  }, {
    name: '我的净利率',
    type: 'line',
    showSymbol: false,
    data: [],
    lineStyle: {
      color: '#4BACC6',
      width: 5
    }
  }]
};
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);



  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: {},
    },
    totle: 0,
    precision: 0,
    error: 0,

  },
  // 测算结果统计
  getStatistics() {
    $api.AJAX("GET", '/applets/measuredata/statistics', {}, true).then(res => {
      this.setData({
        totle: res.data.totle,
        precision: res.data.precision,
        error: res.data.error,
      })
    })
  },
  // 测算趋势统计
  getTrend() {
    console.log(option);
    let premiumSpread = option.series[0].data;
    let average = option.series[1].data;
    let interestRate = option.series[2].data;

    $api.AJAX("GET", '/applets/measuredata/trend', {}, true).then(res => {
      res.data.map(liem => {
        average.push(
          liem.average
        )
        interestRate.push(
          liem.interestRate
        )
        premiumSpread.push(
          liem.premiumSpread
        )
      })
      option.series[0].data = premiumSpread;
      option.series[1].data = average;
      option.series[2].data = interestRate;

      this.setData({
        ['ec.onInit']: initChart
      })
      this.instance();
    })
  },

  instance() {//实例图表
    console.log('实例图表')
    let myComponent = this.selectComponent('#mychart-dom-line');
    console.log(myComponent)
    myComponent.initFun()  // 调用自定义组件中的方法
  },
  onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3
      })
    }
    this.getStatistics();
    this.getTrend();
  },

  comeHistory() {
    wx.navigateTo({
      url: '../../pages/history/history',
    })
  }
});