Echarts显示员工工资

最新推荐文章于 2022-09-20 14:54:49 发布

伯爵-ShuaiqiShang

最新推荐文章于 2022-09-20 14:54:49 发布

阅读量634

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_31860777/article/details/80785352

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts初识</title>
    <script src="../ajax3/ajax.js"></script> //引入Ajax以请求或返回后台数据库数据
    <script src="jquery-1.8.3.js"></script>  
    <script src="echarts.js"></script>   
</head>

<body>
    <div id="mychart" style="width: 1000px;height: 400px;"></div> //定义一个容器装载图表
</body>
<script>
    //初始化echarts实例
    var e = echarts.init(document.getElementById('mychart'));
    //指定图表的配置和数据
    var op = {

        //图表标题
        title: {
            text: '员工工资条目',
            left: 'center' 
        },

        //图表图例
        legend: {
            data: ['姓名'],
            left: 'left'
        },
        xAxis: {
            data: []
        },
        yAxis: {
        },

        //鼠标在图表数据条悬浮时展示信息
        tooltip: {
            trigger: 'item',
            formatter: "{a}:{b},{c}"
        },
        series: [{
            name: '姓名',
            type: 'bar',  //指定图表类型为柱形图
            data: []
        }]
    };
    e.setOption(op);
    //使用Ajax获取数据
    $.get('salary.php', function (data) {
        var salary = [];
        var names = [];
        for (var i = 0; i < data.length; i++) {
            names.push(data[i].name);
            salary.push(data[i].salary);
        }
        //绑定数据
        e.setOption({
            xAxis: {
                data: names
            },
            series: [{
                name: '姓名',
                data: salary
            }]
        })
    }, 'json');
</script>
</html>

显示效果：