saas-platform/frontend/saas-web/app/view/home/charts/MonthSale.js

Ext.define('saas.view.home.charts.MonthSale', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-sale',

    id: 'month_sale',

    title: '本月销售额（万元）：0', // 设置默认标题占好默认高度，使容器内的组件可以正确获得展示高度
    bind: {
        title: '本月销售额（万元）：{month_sale_amount}'
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'echartsbase',
                bind: {
                    store: '{month_sale}',
                },
                isEmpty: me.isEmpty,
                createOption: me.createOption
            }]
        });

        me.callParent(arguments);
    },

    isEmpty: function(store) {
        var index = store.findBy(function(s) {
            return s.get('y') > 0;
        });
        
        var flag = index == -1;

        return flag;
    },

    createOption: function(store) {
        var fields = [],
        data = [];

        store.each(function(d) {
            var d = d.data;
            if(d.y > 0) {
                fields.push(d.x);
                data.push({
                    value: d.y,
                    name: d.x
                });
            }
        });

        return {
            color: [
                '#1EC09F',
                '#27A7FF',
                '#4E84F5',
                '#FDC200',
                '#76DDFB',
                '#FE7D6B',
            ],
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    var name = params.name,
                    value = params.value,
                    marker = params.marker,
                    percent = params.percent;

                    if(name.length > 7) {
                        name = Ext.String.insert(name, '<br/>', 7)
                    }
                    value = saas.util.BaseUtil.numberFormat(value, 4, true);

                    return name + '<br/>' + marker + value+ '  (' + percent + '%)';
                }
            },
            legend: {
                orient: 'vertical',
                left: '70%',
                width: '30%',
                icon: 'circle',
                data: fields,
                itemWidth: 9,
                itemHeight: 9,
                formatter: function (name) {
                    var cWidth = Ext.getCmp('month_sale').items.items[0].echarts.getWidth() * 0.3,
                        dataCount = fields.length,
                        maxLength = Math.ceil((cWidth / dataCount) / 20);
                    return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
                },
            },
            series: [
                {
                    type:'pie',
                    radius: ['48%', '88%'],
                    center: ['35%', '50%'],
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }
            ]
        }
    }
});