微信小程式echarts-餅狀圖

為了相容小程式 Canvas，我們提供了一個小程式的元件，用這種方式可以方便地使用 ECharts。

首先，下載 GitHub 上的 ecomfe/echarts-for-weixin 專案。

一、封裝pieChart元件

pieChart.wxml：

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

pieChart.json：

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

pieChart.wxss：

.container {
    width: 100%;
    height: 600rpx;
    font-size: 0;
    /* background-color: pink; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mychart-bar {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

pieChart.js：

import * as echarts from '../../utils/ec-canvas/echarts';

Component({
    data: {
        ec: {
            lazyLoad: false, // 延遲載入
        }, //餅圖
        pieObj: null,
    },
    piechartsComponnet: null,
    properties: {
        dataObj: {
            type: Object,
            observer: function (nVal, oVal) {
                // console.log(nVal)
                if (nVal) {
                    this.setData({
                        pieObj: nVal,
                    })
                    setTimeout(() => {
                        this.init_pieCharts()
                    }, 300);
                }
            },
        },
    },
    lifetimes: {
        attached: function () {
            this.piechartsComponnet = this.selectComponent('#mychart-dom-bar'); //餅圖
        }
    },
    methods: {
        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 () { //餅圖
            console.log(this.data.pieObj)
            var pieObj = this.data.pieObj;
            /*
                開發文件參考：https://echarts.apache.org/zh/option.html#legend.zlevel
            */
            var option = {
                title: {
                    // text: '收益分佈',
                    subtext: pieObj.title || '',
                    left: 15,
                },
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        // console.log(params)
                        return params.name + ': ' + params.data.number + ' (' + (params.percent - 0).toFixed(0) + '%)'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: 20,
                    align: 'left',
                    bottom: '25%',
                    itemWidth: 10,
                    itemHeight: 10,
                },
                color: pieObj.color || ['#FEDC75', '#797AFF', '#FE8683'],
                calculable: true,
                series: [{
                    name: '收益分佈',
                    type: 'pie',
                    center: ['35%', '50%'],
                    radius: 80,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inner',
                                formatter: function (params) {
                                    // console.log(params)
                                    return params.data.number + '\n' + (params.percent - 0).toFixed(0) + '%'
                                }
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    data: pieObj.data
                }]
            }
            // var option = this.data.pieObj;
            // console.log(option)
            return option;
        },

    }
});

二、使用元件

wxml

<pieChart dataObj="{{dataObj1}}" class="ec-canvas" force-use-old-canvas="true"></pieChart>

json

"usingComponents": {
    "pieChart": "/components/echart/pieChart"
}

js

//處理餅狀圖資料 
this.setData({
            dataObj1: {
                title: '收益分佈', //標題
                color: ['#797AFF', '#FE8683', '#FEDC75'], //餅狀圖顏色
                data: [{
                        value: 50,
                        number: 1000,
                        name: '交易收益',

                    }, {
                        value: 30,
                        number: 600,
                        name: '企業功能收益'
                    },
                    {
                        value: 20,
                        number: 400,
                        name: '新會員共享收益'
                    }
                ]
            },
})

顯示圖：