Javascript在Echart条形图上使用JSON值

时间:2018-04-06 20:18:04

标签: javascript arrays json echarts

我有一个运行php脚本的ajax函数,它返回

下面的JSON值
[{"status":"Cleared","qty":"2"},{"status":"Issued","qty":"3"},{"status":"Rejected","qty":"1"},{"status":"Requested","qty":"2"}]

我需要获取状态和数值在echarts条形图上使用它们,状态为x轴,qty为Y轴。运行以下操作时,不会显示任何图表,也不会在控制台中显示错误。

我的javascript位于

之下
$(document).ready(function(){

$.ajax({
    url: 'php_files/permit_php_files/permit_chart_process.php',
    method: "GET",
    data: {
        access_id: sessionStorage.getItem('access_id'),
        client_id: sessionStorage.getItem('client_id')
    },
    success: function (data) {

        console.log(data);

        require.config({
            paths: {
                echarts: 'js/plugins/visualization/echarts'
            }
        });

        require(
            [
                'echarts',
                'echarts/theme/limitless',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],


            // Charts setup
            function (ec, limitless) {

                var permit_chart = ec.init(document.getElementById('permit_chart'), limitless);


                permit_chart_options = {

                    // Setup grid
                    grid: {
                        x: 40,
                        x2: 40,
                        y: 35,
                        y2: 25
                    },

                    // Add tooltip
                    tooltip: {
                        trigger: 'axis'
                    },

                    // Add legend
                    legend: {
                        data: ['Status']
                    },

                    // Enable drag recalculate
                    calculable: true,

                    // Horizontal axis
                    xAxis: [{
                        type: 'category',
                        data: JSON.stringify(data.status)
                    }],

                    // Vertical axis
                    yAxis: [{
                        type: 'value'
                    }],

                    // Add series
                    series: [
                        {
                            name: 'Status',
                            type: 'bar',
                            data: JSON.stringify(data.qty),
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontWeight: 500
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };


                permit_chart.setOption(permit_chart_options);


                window.onresize = function () {
                    setTimeout(function () {
                        permit_chart.resize();
                    }, 200);
                }
            }
        );
    }
});
});

0 个答案:

没有答案