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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。