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

Ext.define('saas.view.home.charts.ProfitDetail', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'profit-detail',

    id: 'profit_detail',

    title: '毛利润分析（万元）',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'echartsbase',
                bind: {
                    store: '{profit_detail}',
                },
                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(d.y);
        });
        return {
            color: [
                '#34BAF6'
            ],
            grid: {
                left: 0,
                right: 0,
                top: 10,
                bottom: 5,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var name = '',
                    series = [];

                    for(var x = 0; x < params.length; x++) {
                        var p = params[x],
                        marker = p.marker,
                        seriesName = p.seriesName,
                        name = p.name,
                        value = p.value;

                        value = saas.util.BaseUtil.numberFormat(value, 4, true);

                        series.push(marker + value);
                    }

                    if(name.length > 9) {
                        name = Ext.String.insert(name, '<br/>', 7)
                    }
        

                    return name + ': ' + '<br/>' + series.join('<br/>');
                }
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465',
                    interval: 0,
                    formatter: function (value, index) {
                        var cWidth = Ext.getCmp('profit_detail').items.items[0].echarts.getWidth() * 0.9,
                            dataCount = fields.length,
                            maxLength = Math.ceil((cWidth / dataCount) / 20);
                        return value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
                    },
                },
                data: fields,
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            },
            series: [{
                type: 'bar',
                barWidth: 25,
                data: data,
            }]
        };
    }

});