echarts柱状图

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/15872975.html

柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
</head>
<body>

<!--第一步：引入echarts-->
<script src="js/echarts.js"></script>

<!--第二步：html DOM 中准备一个div，之后用于渲染echarts图表-->
<div id="main" style="width:600px;height:300px;"></div>

<script>
    /*echarts标签化引入*/
        var myChart = echarts.init(document.getElementById('main'));
    /*配置项*/
        var option = {
            title : {
                text: 'bar',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:["科员","副科级","正科级","副处级","处级"]
            },

            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ["科员","副科级","正科级","副处级","处级"],
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'人数',
                    type:'bar',
                    data:[13,9,5,4,2],
                },
            ]
        };
        myChart.setOption(option);
</script>
</body>
</html>