MicroCommunityWeb/public/bigScreen/js/box4.js

function _loadAssetFee() {

    let param = {
        params: {
            communityId: vc.getCurrentCommunity().communityId
        }
    }
    vc.http.apiGet(
        '/reportFeeMonthStatistics/queryOwePaymentCount',
        param,
        function (json, res) {
            //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
            let _json = JSON.parse(json);
            if (_json.code == 0) {
                let _data = _json.data;
                initFeeChart(_data);
                return;
            }
        },
        function (errInfo, error) {
            console.log('请求失败处理');

            vc.toast(errInfo);

        });
}



function initFeeChart(_data) {
    var dom = document.getElementById("box4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var xAxisData = [];
    var data1 = [];
    var data2 = [];

    _data.forEach(item => {
        xAxisData.push(item.feeName);
        data1.push(-item.normalCount);
        data2.push(item.objCount);
    });

    // for (var i = 0; i < 10; i++) {
    //     xAxisData.push('Class' + i);
    //     data1.push((Math.random() * 2).toFixed(2));
    //     data2.push(-Math.random().toFixed(2));
    // }

    var emphasisStyle = {
        itemStyle: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
        }
    };

    option = {
        backgroundColor: '',
        legend: {
            data: ['未交费','已缴费'],
            left: 10
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            name: '费用项',
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false }
        },
        textStyle: {//图例文字的样式
            color: '#fff',
            fontSize: 12
        },
        yAxis: {
            inverse: true,
            splitArea: { show: false }
        },
        grid: {
            left: 0
        },
        color: ['green','red'],
        series: [
            {
                name: '已缴费',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data1
            },
            {
                name: '未交费',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data2
            }
        ]
    };

    myChart.on('brushSelected', renderBrushed);

    

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

}

function renderBrushed(params) {
    var brushed = [];
    var brushComponent = params.batch[0];

    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
        var rawIndices = brushComponent.selected[sIdx].dataIndex;
        brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
    }

    myChart.setOption({
        title: {
            backgroundColor: '#333',
            text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
            bottom: 0,
            right: 0,
            width: 100,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        }
    });
}

_loadAssetFee();