六、数据可视化—Echars(爬虫及数据可视化)

六、数据可视化—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)    #传递变量到页面中

在这里插入图片描述

在这里插入图片描述

上面的都是数字的形式,直接传入页面渲染的
若是列表得到的是字符串形式的,需要在页面渲染时进行转换
App.py文件下的

score_data.append(str(item[0]))

html下的变量

data: {{ score_data|tojson }}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/43730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业如何挑选策划公司,这些标准你了解吗?

诚然,在这个竞争激烈的市场环境下,企业有时候就像是站在十字路口的旅人,面前摆着的是一条条花钱却未必能看见收益的道路。 这时候,找一家对的策划公司就很重要,这里分享一点个人多年经验,希望对你有所帮助…

【精简教程】VSCode 连接 Remix

初始化 Node.js 项目 yarn init v1.22.19安装 Remix yarn add remix-project/remixd -g⚠️ 此时如果直接敲 remix,显示找不到这个命令。 使用 Node.js 来直接执行 remixd.js 文件 node node_modules\remix-project\remixd\src\bin\remixd.js😄 连接上了…

安全极客团队荣获首届“矩阵杯”网络安全大赛人工智能挑战赛“三等奖”

近日,东半球规格高、规模大且奖金丰厚的网络安全顶级赛事——首届“矩阵杯”网络安全大赛在青岛国际会议中心圆满落幕。本次大赛设置了五大赛事,包括通用产品漏挖赛、国产软硬件安全检测赛、原创漏洞挖掘赛、人工智能(大模型)挑战…

【Linux】Windows平台使用gdb调试FFmpeg源码

FFmpeg是一个跨平台的多媒体库,有时需要在别的平台上进行开发和调试,记录一下在linux环境下使用gdb来调试FFmpeg源码的基本方式 1.可执行文件 在windows平台使用linux环境来调试FFmpeg源码,需要编译生成一个后缀有_g的exe文件,参…

HTTP中常见的状态码有哪些?

常用的包括以下几个: 200:表示客户端请求成功 201:请求成功,服务器创建了新资源。 204:无内容,服务器成功处理请求,但未返回任何内容。 206: 表示“部分内容”,当客户端请求一个资源的一部分时,…

YOLOv10部署教程,使用tensorRT部署,有转化和推理代码

YOLOv10部署教程,使用tensorRT部署,有转化和推理代码 一、使用平台1. 转化onnx模型转化trt模型模型推理全部的代码论文题目:YOLOv10: Real-Time End-to-End Object Detection 研究单位:清华大学 论文链接:http://arxiv.org/abs/2405.14458 代码链接:https://github.com/T…

如何在idea安装git,使用gitee?

一、什么是git,git与gitee、GitHub的关系? 1.什么是git? Git 是一个开源的分布式版本控制系统,用于企业项目中程序员协同开发。 2.git与gitee、GitHub的关系是什么? git :Git是一种版本控制系统&#x…

Three.js相机简明教程

相机校准是 3D 计算机图形学中的一个基本概念,涉及设置虚拟相机以模拟真实世界相机的视角和行为。在 Three.js(一种流行的 3D 渲染 JavaScript 库)中,了解相机校准对于创建逼真且身临其境的 3D 场景至关重要。在本文中&#xff0c…

UML类图的建立过程

1. 概念层类图 概念层的类图描述的是现实世界中对问题领域的概念理解,类图中表达的类与现实世界的问题领域中的实际事物有着明显的对应关系,类之间的关系也与问题领域中实际事物之间的关系有着明显的对应关系。在概念层类图阶段很少考虑或者几乎不需要考…

07-7.5.1 散列表的基本概念

👋 Hi, I’m Beast Cheng 👀 I’m interested in photography, hiking, landscape… 🌱 I’m currently learning python, javascript, kotlin… 📫 How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

28.IP核理论知识(Xilinx)

(1)ip核是什么? IP(Intellectual Property)即知识产权,在半导体产业中,将IP核定义为“用于ASIC或FPGA中的预先设计好的电路功能模块”,简而言之,这里的IP即电路功能模块。…

Element轮播图组件切换太单调?手把手带你重写切换效果

前言: 最近在逛山东博物馆网站的时候,发现该网站主页淡入淡出的轮播图非常的优雅,所以就想来复刻一下,也算是对组件进行了二次的封装和修改 工具准备: Vue3Element Plus走马灯组件 注意事项: Element …

Python爬虫:基础爬虫架构及爬取证券之星全站行情数据!

爬虫成长之路(一)里我们介绍了如何爬取证券之星网站上所有A股数据,主要涉及网页获取和页面解析的知识。爬虫成长之路(二)里我们介绍了如何获取代理IP并验证,涉及了多线程编程和数据存储的知识。此次我们将在…

网络编程学习之tcp

按下*(星号)可以搜索当前光标下的单词。 Tcp编程的过程 打开网络设备 Bind:给服务地址把ip号和端口号连接进去 Tcp是有状态的 Listen是进入监听状态,看有没有客户端来连接服务器 Tcp比udp消耗过多资源 Upd类似于半双工&#…

D50SB100-ASEMI逆变焊机专用D50SB100

编辑:ll D50SB100-ASEMI逆变焊机专用D50SB100 型号:D50SB100 品牌:ASEMI 封装:DSB-5 批号:2024 现货:50000 正向电流(Id):50A 反向耐压(VRRM&#xf…

【AIGC】二、mac本地采用GPU启动keras运算

mac本地采用GPU启动keras运算 一、问题背景二、技术背景三、实验验证本机配置安装PlaidML安装plaidml-keras配置默认显卡 运行采用 CPU运算的代码step1 先导入keras包,导入数据cifar10,这里可能涉及外网下载,有问题可以参考[keras使用基础问题…

echarts中tooltip添加点击事件代码示例

echarts中tooltip添加点击事件代码示例_javascript技巧_脚本之家 点击事件无法使用this 或者 this无法使用:

13--memcache与redis

前言:数据库读取速度较慢一直是无法解决的问题,大型网站应对的方式主要是使用缓存服务器来缓解这种情况,减少数据库访问次数,以提高动态Web等应用的速度、提高可扩展性。 1、简介 Memcached/redis是高性能的分布式内存缓存服务器…

ret2csu简单总结

一个比较进阶的rop利用方式。 Why ret to csu? 当程序给的gadget不够,或者输入长度受限时,可以考虑利用csu中的众多gadget以及一个call指令来劫持控制流。 __libc_csu_init 汇编源码: .text:0000000000400790 ; void __fastcall _libc_c…

无人直播赚钱的底层逻辑是什么?一文揭晓!

当前,网络直播已经成为各类商家提高曝光和引流获客的主要渠道之一,这在为商家带来新机遇的同时,也让他们因人手不足或资金匮乏等原因而陷入无人问津窘境之中。在此背景下,无人直播软件一经出现,便引起了众多商家的关注…