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 () {
    },
    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',
        })
    }
});