echarts+圓柱圖

<div id="test1" style="width:100%;height:380px;"></div>

<script type="text/javascript">

// 基於準備好的dom，初始化echarts實例
var myChart1 = echarts.init(document.getElementById('test1'));

//圓柱圖
// 指定圖表的配置項和數據
var dataArray = ['product', '收入','首單收入', '邀請收入', '分成收入', '簽到收入', '任務收入'];
myChart1.setOption({
    title: {
        text: '用戶收入數據：',
    },
    legend: {},
    tooltip: {},
    dataset: {
        // dimensions: ['product', '收入','首單收入', '邀請收入', '分成收入', '簽到收入', '任務收入'],
        source: [
            dataArray,
            ['1月份', 41.1, 30.4, 65.1, 53.3, 41.1,10],
            ['2月份', 86.5, 92.1, 85.7, 83.1, 86.5,10],
            ['3月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['4月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['5月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['6月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['7月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['8月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['9月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['10月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['11月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
            ['12月份', 24.1, 67.2, 79.5, 86.4, 24.1,10]
        ]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
    },
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'},
    ]
});

myCart1.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫

//異步獲取收入數據
$.ajax({
    url: '/form/select',
    method: "POST",
    async: true,
    data: {
      
    },
    success: function (result) {
        if (result.code == 200) {
            var amountArray=[];
            $.each(result.data, function (key, value) {
                const ans = value.slice(1, -1).split(',');
                amountArray.push(ans);
            });
            amountArray.unshift(dataArray);
            myChart1.hideLoading(); //隱藏加載動畫
            myChart1.setOption({ //加載數據圖表
                dataset: {
                    source:amountArray
                },
                // 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        interval: 0
                    }},
                // 聲明一個 Y 軸，數值軸。
                yAxis: {},
                // 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                ]
            });

        } else {
            console.log("調用接口失敗");
        }
    }
});

 

後臺返回的數組格式：

{11=[11月份,1722.00,0.00,65.00,17.50,337.00,441.00], 1=[1月份,0.00,0.00,0.00,0.00,0.00,0.00], 12=[12月份,0.00,0.00,0.00,0.00,0.00,0.00], 2=[2月份,0.00,0.00,0.00,0.00,0.00,0.00], 3=[3月份,0.00,0.00,0.00,0.00,0.00,0.00], 4=[4月份,0.00,0.00,0.00,0.00,0.00,0.00], 5=[5月份,0.00,0.00,0.00,0.00,0.00,0.00], 6=[6月份,11015.00,0.00,20.00,18.00,0.00,0.00], 7=[7月份,844.00,10.00,190.00,22.50,0.00,0.00], 8=[8月份,507.01,5.00,80.00,0.00,0.00,0.00], 9=[9月份,2302.00,5.00,75.00,10.50,0.00,0.00], 10=[10月份,2843.00,0.00,70.00,7.50,178.00,2134.00]}