微信小程序Echarts—饼图_微信小程序 初始化饼图

Echarts官方文档：http://www.echartsjs.com/examples/

Echars文件：

链接：https://pan.baidu.com/s/1NGKs4JKTPOiWjtrFpI6pDw 
提取码：472z 
1
2

wxml：

<ec-canvas id="mychart-dom-bar" class='mychart-bar' canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
1

json：

"usingComponents": {
    "ec-canvas": "../../lib/ec-canvas/ec-canvas"
 }
1
2
3

js：

import * as echarts from '../../lib/ec-canvas/echarts';
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: false // 延迟加载
    }, //饼图
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    this.piechartsComponnet = this.selectComponent('#mychart-dom-bar'); //饼图
  },
  
  //初始化图表--饼图
  init_pieCharts: function() {
    this.piechartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const pieChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      pieChart.setOption(this.getPieOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return pieChart;
    });
  },

  //饼图
  getPieOption: function() {
    var option = {
      tooltip: {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      color: ['#56cbff', '#ff6300'],
      calculable: true,
      series: [{
        name: '分类',
        type: 'pie',
        center: ['50%', '50%'],
        radius: 80,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return (params.percent - 0).toFixed(0) + '%'
              }
            },
            labelLine: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: true,
              formatter: "{b}\n{d}%"
            }
          }
        },
        data: [{
            value: 99,
            name: 'A'
          },
          {
            value:1,
            name: 'B'
          }
        ]
      }]
    };
    return option;
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100