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}',
                },
                createOption: me.createOption
            }]
        });

        me.callParent(arguments);
    },

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

        store.each(function(d) {
            var d = d.data;
            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: 'horizontal',
                left: '70%',
                width: '30%',
                icon: 'circle',
                data: fields,
                itemWidth: 9,
                itemHeight: 9
            },
            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
                }
            ]
        }
    }
});