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]}