可视化学习笔记1

最新推荐文章于 2022-11-03 16:09:24 发布

Nflyingj

最新推荐文章于 2022-11-03 16:09:24 发布

阅读量282

点赞数

分类专栏：笔记文章标签： python

本文链接：https://blog.csdn.net/nflyingj/article/details/117458968

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.ECharts
http://echarts.apache.org/zh/ 在这里插入图片描述
二.使用步骤
1.导入EChart库
2.初始化ECharts
3.进行参数设置
4.可视化呈现
三.ECharts案例
（一）直接基于假数据绘制图
1.创建pycharm项目EChartDemo

2.在项目里添加ECharts和JQuery

3.创建页面-demo01.html

在这里插入图片描述
导入Echart和JQuery

做一个简单的界面

在浏览器查看效果

在脚本获取页面元素
定义按钮单击事件，定义两个数组

刷新页面，查看效果
在这里插入图片描述

初始化ECharts
进行参数设置

在这里插入图片描述
刷新页面，查看结果

4.课堂练习
绘制各个班级的男女人数

设置男女生人数

显示条形图的颜色

（二）读取json文件，讲数据可视化
1.创建class.json文件

[
  {
    "class": "19级大数据1班",
    "boy": 17,
    "girls":15
  },
  {
    "class": "19级大数据2班",
    "boy": 25,
    "girls":15
  },
  {
    "class": "19级计应2班",
    "boy": 19,
    "girls":16
  },
  {
    "class": "19级软件3班",
    "boy": 23,
    "girls":13
  }
]

2.创建页面-demo02.html
在这里插入图片描述
3.在浏览器中查看效果

4.在终端启动简单服务器
在这里插入图片描述
5.在服务器上个测试结果

在这里插入图片描述
（四）实现步骤
1.爬取数据并保存city_demand.py

安装reuqests库

安装lxml库

导入所需要的库

定义网址

发起请求，获取网页数据

按规则提取

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>
    // 获取box元素
    var box = document.getElementsByClassName("box")[0]
    // 获取btnShowBar元素
    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 option = {
                // 标题
                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(option);
        });
    }
</script>
</body>
</html>