WeChat 自定义加载

获取组件dom
初始化组件init
组件获取数据setOption
组件绑定到this上

index.json

{
  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas"
  }
}

index.wxlm

<view class="wrap">
<view class="btn {{type == 'today' ? 'on' : ''}}" data-type="today" bindtap="changeType">本日销售</view>
<view class="btn {{type == 'month' ? 'on' : ''}}" data-type="month" bindtap="changeType">本月销售</view>
</view>
<view class="my-chart">
  <ec-canvas id="mychart-dom" canvas-id="mychart" ></ec-canvas>
</view>

index.wxss

.wrap{
  display: flex;
  justify-content: space-evenly;
  padding: 30rpx;
}
.btn{
  font-size: 20px;
}
.on{
  color: lightseagreen;
  border-bottom: 1px solid lightseagreen;
}
.my-chart{
    width: 700rpx;
    height: 700rpx;
  }
ec-canvas{
    width: 100%;
    height: 100%;
  }

index.js

import * as echarts from '../../ec-canvas/echarts'
Page({
  data: {
    type:"month"
  },
  onLoad() {
    // 获取组件
    this.lazyComponent = this.selectComponent('#mychart-dom');
    // 自动获取数据
    this.getSale_Month ()
  },
  // 切换选项
  changeType(e){
    this.setData({
      type:e.currentTarget.dataset.type
    })
    this.data.type =="today" ? this.getSale_Day() : this.getSale_Month()
  },
 // 获取本日数据
 getSale_Day (){
    wx.request({
        url: 'https://127.0.0.1:8888/' + 'api/sale/getSale_Day',
        success:(res)=>{
            this.init(res.data.data)
        },
    })
  },
 // 获取本月数据
 getSale_Month (){
    wx.request({
        url: 'https://127.0.0.1:8888/' + 'api/sale/getSale_Month',
        success:(res)=>{
            this.init(res.data.data)
        },
    })
  },
  //初始化组件
  init(res){
    this.lazyComponent.init((canvas, width, height, dpr)=>{
      let chart =echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      })
      let option = getOption(res)
      chart.setOption(option)
      this.chart=chart //将图表示例绑定到this上，方便其他函数访问
      return chart
    })
  },
})
function getOption(res) {
  let res_temp = res.map((x) => ({ 
      name: x.orgname, 
      value: (x.taxamount/10000).toFixed(2)
    }));
  return {
    backgroundColor: "#ffffff",
    title: {
        subtext : '万元',
        left: 'right'
      },
    tooltip: {
        trigger: 'item'
      },
    series: [{
      label: {
        normal: {fontSize: 12}
      },
      itemStyle: {
        borderRadius: 3,
        borderColor: '#fff',
        borderWidth: 2
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data:res_temp
    }]
  };
}

 

 

import * as echarts from '../../ec-canvas/echarts'
Page({
  data: {
    lazyEc: {
      lazyLoad: true
    },
    type:"income"
  },
  onLoad() {
    // 获取组件
    this.lazyComponent = this.selectComponent('#mychart-dom');
    // 模拟请求
    setTimeout(() => this.init(), 3000);
  },
  init(){//手动初始化
    this.lazyComponent.init((canvas, width, height, dpr)=>{
      let chart =echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      })
      let option = getOption()
      chart.setOption(option)
      this.chart=chart //将图表示例绑定到this上，方便其他函数访问
      return chart
    })
  },
  changeType(e){//切换效果
    this.setData({
      type:e.currentTarget.dataset.type
    })
    let option =getOption()
    this.chart.setOption(option)
  }
})
function getOption() {
  return {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };
}

function setOption(chart, d1, d2,d3) {
  var seriesLabel = {
      normal : {
          show : true,
          //textBorderColor : '#333',
          //textBorderWidth : 1
      }
  }
  var option = {
      title : {
          subtext : '万元',
          x : 'right'
      },
      tooltip : {
          trigger : 'axis',
          axisPointer : {
              type : 'shadow'
          }
      },
      legend : {
          data : [ '金额', '单价', '总价' ],
          bottom : 0
      },
      grid : {
          top : '3%',
          left : '3%',
          bottom:'15%',
          containLabel : true
      },
      xAxis : {
          type : 'value',
          name : '',
          axisLabel : {
              formatter : '{value}'
          },
          axisLine: {show:true}
      },
      yAxis : {
          type : 'category',
          data : [ '详情' ],
          inverse : false
      },
      series : [ {
          name : '金额',
          type : 'bar',
          data : [d1],
          label : seriesLabel,
      }, {
          name : '单价',
          type : 'bar',
          label : seriesLabel,
          data : [d2]
      }, {
          name : '总价',
          type : 'bar',
          label : seriesLabel,
          data : [d3]
      } ]
  };
  chart.setOption(option);
}

https://www.cnblogs.com/jizhong/p/15931053.html