echarts 柱状图

时间 2019-11-25 标签 echarts 柱状
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
</head>

<body>
    <div id="bar01" style="width:600px;height:400px;margin-top:10px;"></div>
</body>
<script>
    // 柱状图
    var myChart = echarts.init(document.getElementById('bar01'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'echart柱状图',
            x: 'left'
        },
        tooltip: {},
        legend: {
            data: ['待分配订单', '已分配订单', '', '异常单', '历史未处理订单']
        },
        xAxis: {
            data: ["网厅", "微厅", "卖场", "mini厅"]
        },
        yAxis: {
            type: 'value',
            name: '今日订单',
            min: 0,
            max: 100,
            interval: 20,

        },
        series: [{
            name: '待分配订单',
            type: 'bar',
            color: ['#86d560'],
            data: [20, 50, 30, 10]
        }, {
            name: '已分配订单',
            type: 'bar',
            color: ['#798af2'],
            data: [70, 85, 76, 66]
        }, {
            name: '异常单',
            type: 'bar',
            color: ['#ff999a'],
            data: [15, 4, 19, 23]
        }, {
            name: '历史未处理订单',
            type: 'bar',
            color: ['#ffcc67'],
            data: [10, 20, 36, 34]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //Ajax动态改变数据
    /*setInterval(function () {
        $.ajax({
            type: "post",
            url: "",
            //data: {arg1:'',arg2: ''},
            dataType: "json",
            success: function (data) {
                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }
        });
    }, 1000);*/

</script>

</html>