六、数据可视化—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,一经查实,立即删除!

相关文章

【好生意】畅捷通好生意各版本之间的区别

【畅捷通好生意各版本区别】 随着产品线的增加,不同版本之间存在差异。 以下是针对自己使用、研究过程中的记录。 完善ing 功能普及版标准版采购运费分摊没有单独的采购费用分摊单,但是支持随单分摊。支持

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

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

【精简教程】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…

每天一个数据分析题(四百二十三)- 置信区间

在给定的显著性水平下,某一特定的X水平上,总体Y分布的离散度越大,即σ^2越大,则 A. 预测区间越宽,精度越低 B. 预测区间越宽,预测误差越小 C. 预测区间越窄,精度越高 D. 预测区间越窄&#…

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

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

看完这篇,你的服务设计能力将再次进化!

引言 在当今快速演变的技术场景中,服务设计不仅仅是遵循通用的设计规范和最佳实践的问题,它更深层次地触及到如何在满足这些标准的同时,确保服务能够灵活适应未来的变化、满足用户的期望。本篇文章旨在探讨在遵循通用设计规范之外&#xff0…

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 喜欢《数据结构》部分笔记的小伙伴可以…

指令v-el的作用是什么

在Vue.js的早期版本中(特别是Vue 1.x版本),v-el 指令被用来给元素注册引用信息(即DOM元素的引用)。这样,开发者就可以在Vue实例的方法中直接访问到这个DOM元素。然而,需要注意的是,从…

28.IP核理论知识(Xilinx)

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

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

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

GPX文件的元素内容详解

GPX文件的来源 GPX文件(GPS eXchange Format)是一种用于存储GPS数据的开放标准格式,它可以包含航路点、轨迹和路线等信息。这些文件通常来源于GPS设备、户外活动追踪应用程序、地图服务或用户之间的数据共享。用户可以通过各种软件和硬件设备…

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…