本人已参与【新人创作礼】活动，一起开启掘金创作之路。本文首发于CSDN

hello，大家好，我是wangzirui32，今天来教大家如何通过jQuery和Echarts实现GitHub Python星级项目排名柱形统计图，开始学习吧！

1. 数据来源

这里的数据来源于GitHub的API接口，网址为api.github.com/search/repo…，这里截取一部分返回数据：

{
  "total_count": 7498880,
  "incomplete_results": false,
  "items": [
  	  ...
  	  {"id": 596892,
      "node_id": "MDEwOlJlcG9zaXRvcnk1OTY4OTI=",
      "name": "flask",    # 项目名称
      "full_name": "pallets/flask",
      ...
      "html_url": "https://github.com/pallets/flask",   # 项目链接
      "description": "The Python micro framework for building web applications.",
      "fork": false,
      ...
      "svn_url": "https://github.com/pallets/flask",
      "homepage": "https://flask.palletsprojects.com",
      "size": 8608,
      "stargazers_count": 55823,     # 项目星级
      "watchers_count": 55823,
      "language": "Python",
      ...
    }
...

可以看到，我们只需要提取其中的3个数据项：name，html_url，stargazers_count。

2. 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入jQuery和Echarts -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>GitHub Python星级项目排名</title>
</head>
<body>
    <div style="height: 700px;width: 1200px;" id="main"></div>
    <script>
        $(function(){
            $.ajax({
                url: "https://api.github.com/search/repositories?q=language:python&soct=stars",
                method: "GET",
                success: function(data){
                    data_items = data['items']

                    names = []
                    values = []

                    for (i in data_items){     // 遍历并处理数据
                        names.unshift(data_items[i]['name'])   // 获取项目名称
                        values.unshift({value: data_items[i]['stargazers_count'],
                                        url: data_items[i]['html_url']})     // 获取项目星级数和项目网址
                    };

                    var my_chart = echarts.init(document.getElementById("main"))

                    my_chart.setOption({
                        title: {
                            text: "GitHub Python星级项目排名"
                        },
                        legend: {
                            data: ['星级']
                        },
                        tooltip: {},
                        xAxis: {
                            data: names,
                            axisLabel: {
                                rotate: 25,
                            },
                        },
                        yAxis: {},
                        series: [{
                            name: '项目星级',
                            type: 'bar',
                            data: values,
                        }]
                    })

                    my_chart.on("click", function(params){   // 点击柱形图的触发函数 参数为点击的柱形图信息
                    	// console.log(params)
                        var url = params.data.url;    // 获取url
                        window.open(url);    // 打开url
                    })
                },
                error: function(){
                    console.log("Load Error !")
                }
            });
        });
    </script>
</body>
</html>

3. 效果展示

如图：
效果展示
可以看到，前3个热门项目（写作本文时）分别是system-design-primer，public-apis，Python。
最后，你还可以修改图像的宽度，高度，也可以修改url的language参数，使其变为其他语言的排行榜。

好了，今天的课程就到这里，我是wangzirui32，喜欢的可以点个收藏和关注，我们下次再见！

jQuery+Echarts：实现GitHub Python星级项目排名柱形统计图

1. 数据来源

2. 编写代码

3. 效果展示