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>
复制代码

 

 

posted @   kuaiquxie  阅读(56)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示