课堂学习 Day00 |ECharts

最新推荐文章于 2022-11-23 10:22:38 发布

luck_ch09

最新推荐文章于 2022-11-23 10:22:38 发布

阅读量232

点赞数 1

分类专栏：课堂记录

本文链接：https://blog.csdn.net/luck_ch09/article/details/117458997

版权

课堂记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

写在前面的话

1、内容如果有不对的，希望可以指出或补充。
2、课堂记录。
3、主要参考自：https://blog.csdn.net/howard2005/article/details/117458977

一、操作

ECharts（Enterprise Charts）：商业级数据图表，是百度的一个开源的数据可视化工具，一个纯Javascript的图表库。

创建python项目：
在这里插入图片描述

（一）使用自定义数据

1、导入js文件
在这里插入图片描述
2、demo01.html完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视化案例01</title>

    <!--①通过标签方式直接引入构建好的echarts文件、
        jquery文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>

    <!-- 显示样式 -->
    <style>
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid #797ff5;
        }
    </style>

</head>
<body>

<input type="button" value="显示条形图" class="btnShowBar">
<hr>
<!--②通过按钮来显示条形图（的区域）↓-->
<div class="box"></div>
<!--③echarts实例
    Class可有多个，所以需要加上[0]
    -->
<script>
    //获取元素
    var box=document.getElementsByClassName("box")[0]
    var btnShowBar=document.getElementsByClassName("btnShowBar")[0]
    //定义按钮事件
    btnShowBar.onclick=function () {

        /**=====================定义数据*/
        class_list=["19大数据2班","19软件1班","19大数据1班","19计应1班"];
        num_list=["33","40","45","36"];
        //==课堂练习↓
        gril_list=["8","20","15","30"];
        boy_list=["25","20","30","6"];
        //课堂练习↑==

        //console控制台输出，右击网页面检查出现控制台
        console.log(class_list,num_list);

        /**====================使用echarts步骤*/
        //1.初始化
        var my_box = echarts.init(box);
        //2.参数配置
        var options = {
            title:{
                text:"19级各班人数条形图",
                x:"center",
                y:"top",
                textAlign:"left",
                textStyle:{
                    fontFamily:"黑体",
                    fontSize:25,
                    textStyle:"bold"
                }
            },
            //图例
            legend: {
                left:"right",
                //标签排列方向
                orient:"vertical"
            },
            //轴线上的数据
            xAxis:{
                data:class_list
            },
            yAxis:{
            },
            //数据信息 bar:条形图
            series:[
                {
                    name:"男生人数",
                    type:"bar",
                    data:boy_list,
                    itemStyle:{
                        normal:{
                            color:'#0000FF'
                        }
                    }
                },
                {
                    name:"女生人数",
                    type:"bar",
                    data:gril_list,
                    itemStyle:{
                        normal:{
                            color:'#aa0000'
                        }
                    }
                }
            ]
        }
        //3.可视化呈现
        my_box.setOption(options);
    }

</script>

</body>
</html>

（二）读取JSON文件数据

1、class.json（创建json数据）
在这里插入图片描述
2、主要实现部分（demo02.html）

3、完整代码略（与demo01.html基本相同）

（三）爬取网页数据

爬取地址：https://www.jobui.com/trends/quanguo-pythonkaifagongchengshi/
在这里插入图片描述
1、city_demand.py、city_demand.json（数据爬取并存储成json文件）

city_demand.py：

"""
爬取职友集python工程师需求量，并保存为json文件
地址：https://www.jobui.com/trends/quanguo-pythonkaifagongchengshi/
"""
import requests
from lxml import etree
import json

# 1、模拟请求，并获取网页数据
url="https://www.jobui.com/trends/quanguo-pythonkaifagongchengshi/"
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/'
            '537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36'
}
# ==添加请求头（网页检查里面的network的User-Agent）来反爬
response=requests.get(url,headers=headers)
# 获取到网页html内容
content=response.content.decode("utf-8");
# print(content)

# 2、规则提取
html=etree.HTML(content)
li_list=html.xpath("//ul[@class='cfix fs16 mb10']/li[@class='city-rank-item']")
# print(li_list)
city_demand_list=[] #存储空间
for li in li_list:
    a_element=li.xpath("./a[@class='cfix job-hover-color']")[0]
    city = a_element.xpath("./@title")[0][0:2]
    data = a_element.xpath("./span[@class='fr']/text()")[0]
    # print(city, data)

    demand = data.split('，')[0]
    if demand.endswith( 'K'):
        demand = int(float(demand.replace('K',''))*1000)
    else:
        demand = int(demand)
    city_demand = {
        'city':city,
        'demand':demand}
    city_demand_list.append(city_demand)
	# print(city_demand)
# 3、保存文件
with open('city_demand.json','w',encoding='utf-8') as f:
    json.dump(city_demand_list,f,ensure_ascii=False,indent=2)
print('温馨提示:各城市职位需求量成功写入SON文件!')

2、city_demand.html（数据可视化展示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全国招聘Python职位需求量</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            background-color: lightgoldenrodyellow;
            border: 1px solid cornflowerblue;
        }
    </style>
</head>
<body>
<input type="button" value="显示条形图" class="btnShowBar">
<hr>
<div class="box"></div>
<script>
    // 获取元素
    var box = document.getElementsByClassName("box")[0]
    var btnShowBar = document.getElementsByClassName("btnShowBar")[0]
    // 定义按钮单击事件
    btnShowBar.onclick = function () {
        // 读取JSON文件数据
        $.get('city_demand.json', function (data) {
            // 定义数组
            city_list = [];
            demand_list = [];
            // 将json数据写入数组
            for (var i = 0; i < data.length; i++) {
                city_list.push(data[i].city);
                demand_list.push(data[i].demand);
            }

            // 1. 初始化ECharts
            var my_box = echarts.init(box);

            // 2. 进行参数配置
            var options = {
                // 标题
                title: {
                    text: "全国招聘Python职位需求量",
                    x: "center",
                    y: "top",
                    textAlign: "left",
                    textStyle: {
                        fontFamily: "楷体",
                        fontSize: 30,
                        textStyle: "bold"
                    }
                },

                // 图例
                legend: {
                    left: "right",
                },

                // x轴数据
                xAxis: {
                    data: city_list
                },

                // y轴数据
                yAxis: {},

                // 数据信息
                series: [
                    {
                        name: "职位需求量",
                        type: "bar",
                        data: demand_list,
                        itemStyle: {
                            normal: {
                                color: '#aa0000'
                            }
                        }
                    }
                ]
            }

            // 3. 可视化呈现
            my_box.setOption(options);
        });
    }
</script>
<!--启动Python简单服务器（在Terminal）↓
    python -m http.server 5000-->
</body>
</html>

3、启动Python简单服务器

_{根据提示的网址结构输入正确的查询网址查看效果即可。}
在这里插入图片描述

二、效果展示

1、使用自定义数据-demo01.html
在这里插入图片描述
2、读取JSON文件数据-demo02.html

3、爬取网页数据-city_demand.html

_{注意：http://localhost:8000/xxx，里面的xxx部分表示的是你想要运行的文件的路径。如下这种情况：…，地址就该为：http://localhost:8000/EchartsDemo/city_demand.html}
在这里插入图片描述

三、补充

1、Apache ECharts

2、【jquery.min.js+echarts.min.js】链接：https://pan.baidu.com/s/1al7RbLALAnGbn4Uv90y8DA 提取码：2bqy

luck_ch09

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
课堂学习 Day00 |ECharts

目录写在前面的话一、操作（一）使用自定义数据（二）读取JSON数据二、效果展示写在前面的话1、内容如果有不对的，希望可以指出或补充。2、课堂记录。3、主要参考自：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts一、操作（一）使用自定义数据（二）读取JSON数据二、效果展示...
复制链接

扫一扫