关于echarts柱状图动态数据渲染

前端柱状图动态数据渲染

HTML代码
        <div class="col-sm-6 select-table table-striped table-bordered">
            <div id="echarts" style="width:820px;height: 540px;"></div>
        </div>

JS代码
<script>
    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();
</script>

最后

以上就是坚定饼干为你收集整理的关于echarts柱状图动态数据渲染的全部内容，希望文章能够帮你解决关于echarts柱状图动态数据渲染所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。