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();

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  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: [17, 19, -16, -2, 8, 10, 5, 3, 2, 6],
      itemStyle: {
        color: '#9BBB59'
      }
    }, {
      name: '平均差异',
      type: 'line',
      data: [3, 11, 13, -2, 8, 16, 3, 3, 2, 6],
      showSymbol: false,
      lineStyle: {
        color: '#76589B',
        width: 5
      }
    }, {
      name: '我的净利率',
      type: 'line',
      showSymbol: false,
      data: [17, 19, -16, -2, 8, 10, 5, 3, 2, 6],
      lineStyle: {
        color: '#4BACC6',
        width: 5
      }
    }]
  };

  chart.setOption(option);
  return chart;
}

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

  onShow(){
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 3
        })
      }
  },

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