前端柱状图动态数据渲染

HTML代码

       

1

2

3

4

JS代码

[removed]

    function loadOneColumn() {

        var mychart = echarts.init(document.querySelector("#echarts"));

        // 显示标题，图例和空的坐标轴

        var series = [];

        var series2 = [];

        mychart.setOption({

            color : ["#26aa1b", "#f9873a"],

            title: {

                text: '供应商合格数和不合格数',

                left:'center'

            },

            tooltip: {},

            legend: {

                icon: 'circle',

                data: ['合格','不合格'],

                x:'center',

                y:'bottom',

            },

            grid:{

              y2:140

            },

            xAxis: [{

                type: 'category',

                axisLabel:{

                    interval:0,

                    rotate : -30

                },

                data: [],

            }],

            yAxis:{

                // splitLine: { show: false },//去除网格线

                // name: ''

            },

            series: [{

                name: '合格',

                type: 'bar',

                barWidth:50,

                data: []

            },

                {

                    barGap: "-100%", /*这里设置包含关系，只需要这一句话*/

                    name: '不合格',

                    type: 'bar',

                    barWidth:50,

                    data: []

                }]

        });

        mychart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var names = [];    //类别数组（实际用来盛放X轴坐标值）

        $.ajax({

            type: 'post',

            url: ctx + 'system/reportsupplier/list',//请求数据的地址

            dataType: "json",        //返回数据形式为json

            success: function (result) {

                //请求成功时执行该函数内容，result即为服务器返回的json对象

                $.each(result.rows, function (index, item) {

                    names.push(item.supplierName);    //挨个取出类别并填入类别数组

                    series.push(item.qualifiedNum);

                });

                $.each(result.rows, function (index, item) {

                    series2.push(item.unqualifiedNum);

                });

                mychart.hideLoading();    //隐藏加载动画

                mychart.setOption({        //加载数据图表

                    xAxis: {

                        data: names

                    },

                    series: [{

                        data: series

                    },

                        {

                            data: series2

                        }]

                });

            },

            error: function (errorMsg) {

                //请求失败时执行该函数

                alert("图表请求数据失败!");

                mychart.hideLoading();

            }

        });

    };

    loadOneColumn();

[removed]