六、数据可视化—Echars（爬虫及数据可视化）

news2024/9/21 19:03:17

六、数据可视化—Echars（爬虫及数据可视化）

Echarts
应用

Echarts

Echarts官网，很多图表等都是我们可以
https://echarts.apache.org/zh/index.html

是百度自己做的图表，后来用的人越来越多，捐给了orange组织，要想学习看官方就够了

文档有教程

在这里插入图片描述

此处已经有下载好的最小版了
在这里插入图片描述

还有另外一种方法下载，进行在线定制
在这里插入图片描述

选完后，上面会有绿色对勾，最下方会有直接下载即可

这个可以根据自己的业务需求进行最小化的定制
在这里插入图片描述

生活中一些科研图表等，也可能会用到此种图表，用于

在这里插入图片描述

所有的可视化最根本的是数据，而可视化效果是js的图形进行的表示

只要学会一个基本的就能会其他的了

5分钟上手echarts，官方教程

将echarts.min.js粘贴到下方

在这里插入图片描述

此处完全可以直接打开HTML观察，这个无需打开服务器，只查看测试的话

柱状图如下所示
在这里插入图片描述

此时第一个示例已经运行完成了

接下来看echarts基础概念概览

一个网页中可以有多个图表，
在这里插入图片描述

系列，在整个图中某一部分寻找对应关系

相同的数据源可以有不同的表示效果

Option选项，通过里面的参数可以使图表显示成自己想要的效果

当我们在实例中看到自己想要的图标时，可以选择将里面的代码复制出来

下面的实例中是可以进行实时修改的
在这里插入图片描述

上图左侧的代码是script中的代码
在这里插入图片描述

应用

使用豆瓣分析的网站演示

在这里插入图片描述

如何找到需要修改的参数
通过查看别人的实例，自己进行实时修改，将别人里面的一些东西进行复制到自己的例子中测试其功能

在这里插入图片描述

通过看别人的案例，找到自己想要某部分，然后复制更改

样子选好了，只需要更改里面的data内容就行了，即横坐标内容，纵坐标的数值

在这里插入图片描述

在展示之前，先保证SQL语句的正确

在这里插入图片描述

@app.route('/score')                             #访问根路径
def score():
    score_data = []         #评分的种类
    num_data = []           #每个评分对应的电影数量
    con = sqlite3.connect("movie.db")  # 连接数据库，路径当前路径
    cur = con.cursor()  # 游标定义
    #下方语句可在数据库测试
    sql = "select score,count(score) from movie250 group by score"  # 从从数据库表movie250中查找分数和有多少个分数，按评分进行分组
    data = cur.execute(sql)
    for item in data:
        score_data.append(item[0])  # 得到的数据要保存到列表中，否则后面关闭时会丢失信息
        num_data.append(item[1])
    cur.close()
    con.close()
    return render_template("score.html",score_data=score_data,num_data=num_data)    #传递变量到页面中

在这里插入图片描述