echarts柱状图

 

柱状图

<!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>

 

echarts柱状图

 

上一篇:雪城大学信息安全讲义 3.3 提升 Set-UID 程序的安全性


下一篇:Echarts|tooltip提示框组件参数详解