大数据可视化实验（六）——ECharts与pyecharts数据可视化

目录

一、实验目的... 1

二、实验环境... 1

三、实验内容... 1

1、ECharts可视化制作.. 1

1）使用ECharts绘制折线图显示一周的天气变换。... 1

2）使用ECharts绘制柱状图显示商品销量的变化。... 4

2、pyecharts可视化制作.. 7

1）使用pyecharts绘制图书销售量对比图。.. 7

四、思考问题... 9

五、总结与心得体会... 9

一、实验目的

了解ECharts与pyecharts数据可视化的特点，能进行简单的ECharts与pyecharts有关的操作。

二、实验环境

硬件：微型图像处理系统，

包括：主机， PC机；

操作系统：Windows 11

应用软件：ECharts与pyecharts

三、实验内容

1、ECharts可视化制作

1）使用ECharts绘制折线图显示一周的天气变换。

编写代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
       <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       var option = {
   title: {
   text: '未来一周气温变化范围'        
      },
     tooltip: {},
      legend: {},
      toolbox: {},
        xAxis: [{       
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
       yAxis: { },
     series: [{
       name: '最高气温',
     type: 'line',
    data: [21, 21, 25, 23, 22, 23, 20]         
        },
      {
   name: '最低气温',
     type: 'line',
   data: [10, 12, 12, 15, 13, 12, 10]       
   }]
  };
// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
</body>
</html>

  1. <!DOCTYPE html>: 这行声明了文档类型，告诉浏览器这是一个 HTML5 文档。
  2. <html>: 这是 HTML 文档的根元素。
  3. <head>: 包含了文档的元数据，比如字符集声明、标题和脚本引用等。
  4. <meta charset="utf-8">: 设置字符编码为 UTF-8，这是一种广泛使用的字符编码，可以显示大多数国家的语言字符。
  5. <title>ECharts</title>: 设置了浏览器标签页的标题为 "ECharts"。
  6. <script src="echarts.min.js"></script>: 引入了 ECharts 的 JavaScript 库文件。这个文件应该放在与 HTML 文件相同的目录下的 echarts.min.js，或者你可以使用 CDN 链接来引入。
  7. <body>: 包含了页面的所有内容，比如文本、图片、视频和 canvas 元素等。
  8. <div id="main" style="width: 600px;height:400px;"></div>: 创建了一个 div 元素，用作 ECharts 图表的容器。它的 id 为 "main"，并且指定了宽高为 600px 乘以 400px。
  9. <script type="text/javascript">: 定义了一个 JavaScript 脚本块。
  10. var myChart = echarts.init(document.getElementById('main'));: 初始化 ECharts 实例，通过 echarts.init 绑定到了上面创建的 div 容器上。
  11. var option = { ... }: 定义了图表的配置项和数据，包括：
  12. title: 图表标题，设置为 "未来一周气温变化范围"。
  13. tooltip: 提供提示框配置，这里没有具体设置，将使用默认配置。
  14. legend: 图例组件，这里没有具体设置，将使用默认配置。
  15. toolbox: 工具栏组件，允许导出图表等操作，这里没有具体设置。
  16. xAxis: 配置 x 轴的相关信息，这里是一个数组，包含了一个 xAxis 对象，其 data 属性定义了 x 轴的类目数据，即一周的每一天。
  17. yAxis: 配置 y 轴的相关信息，这里没有具体设置，将使用默认配置。
  18. series: 定义了图表的数据系列，这里有两个系列，分别表示 "最高气温" 和 "最低气温"，类型为 'line'，即折线图。每个系列的数据通过 data 属性给出。
  19. myChart.setOption(option);: 使用刚指定的配置项和数据显示图表。

运行结果如下：

2）使用ECharts绘制柱状图显示商品销量的变化。

编写代码如下：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts 柱状图示例</title>
    <!-- 引入 ECharts 主要的 JS 文件，可以通过修改 version 版本号来获取最新版本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript">
        // 基于准备好的dom对象，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '商品销量变化柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                type: 'category',
                data: ['可乐', '啤酒', '奶茶', '果汁', '酸奶', '牛奶', '矿泉水']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [300, 270, 340, 244, 500, 400, 470],
                itemStyle: {
                    color: 'skyblue'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

  1. <!DOCTYPE html>: 这行声明了文档类型，告诉浏览器这是一个 HTML5 文档。
  2. <html style="height: 100%">: 这是 HTML 文档的根元素，并且设置了高度为100%，以便能够占据整个浏览器窗口的高度。
  3. <head>: 包含了文档的元数据，比如字符集声明、标题和脚本引用等。
  4. <meta charset="utf-8">: 设置字符编码为 UTF-8，这是一种广泛使用的字符编码，可以显示大多数国家的语言字符。
  5. <title>ECharts 柱状图示例</title>: 设置了浏览器标签页的标题为 "ECharts 柱状图示例"。
  6. <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>: 引入了 ECharts 的 JavaScript 库文件。这里使用的是 CDN 链接，确保了可以在线获取到 ECharts 的指定版本（在这个例子中是 5.0.2 版本）。
  7. <body style="height: 100%; margin: 0">: 包含了页面的所有内容，比如文本、图片、视频和 canvas 元素等。style 属性设置了高度为100%，使 body 元素也能够占据整个浏览器窗口的高度，而 margin: 0 去除了默认的边距。
  8. <div id="container" style="height: 100%"></div>: 创建了一个 div 元素，用作 ECharts 图表的容器。它的 id 为 "container"，并且指定了高度为100%，这意味着它将占据其父元素的全部高度。
  9. <script type="text/javascript">: 定义了一个 JavaScript 脚本块。
  10. var myChart = echarts.init(document.getElementById('container'));: 初始化 ECharts 实例，通过 echarts.init 绑定到了上面创建的 div 容器上。
  11. var option = { ... }: 定义了图表的配置项和数据，包括：
  12. title: 图表标题，设置为 "商品销量变化柱状图"。
  13. tooltip: 提供提示框配置，trigger: 'axis' 表示当鼠标悬停在坐标轴上时触发提示框，axisPointer 的 type: 'shadow' 表示以阴影方式指示坐标轴。
  14. legend: 图例组件，data: ['销量'] 表示图例包含一个名为 "销量" 的数据系列。
  15. xAxis: 配置 x 轴的相关信息，类型为 'category'，表示 x 轴是类目轴，数据为商品的名称列表。
  16. yAxis: 配置 y 轴的相关信息，类型为 'value'，表示 y 轴是数值轴。
  17. series: 定义了图表的数据系列，这里只有一个系列，表示销量，类型为 'bar'，即柱状图。data 属性定义了销量数据，itemStyle 的 color: 'skyblue' 设置了柱子的颜色为天蓝色。
  18. myChart.setOption(option);: 使用刚指定的配置项和数据显示图表。

运行上面代码结果如下：

2、pyecharts可视化制作

1）使用pyecharts绘制图书销售量对比图。

编写以下代码：

from pyecharts import Line
line = Line("折线图", "每周销售量", width=800, height=400)
attr = ['8.3-8.9','8.10-8.16','8.16-8.22','8.23-8.29','8.30-9.5','9.6-9.12','9.13-9.19','9.20-9.26']
data = [15000,22000,24000,29000,31000,36000,34000,27000]
line.add("销售量",attr,data, is_label_show=True,legend_orient='vertical',legend_pos='center', is_smooth=True, xaxis_rotate='50')
line.render()

  1. from pyecharts import Line: 从 pyecharts 库中导入 Line 类。Line 是用来生成折线图的类。
  2. line = Line("折线图", "每周销售量", width=800, height=400): 创建 Line 类的一个实例，即一个折线图对象。
  3. 第一个参数 "折线图" 是图表的主标题。
  4. 第二个参数 "每周销售量" 是图表的副标题。
  5. width=800 和 height=400 分别设置了图表的宽度和高度。
  6. attr = ['8.3-8.9','8.10-8.16','8.16-8.22','8.23-8.29','8.30-9.5','9.6-9.12','9.13-9.19','9.20-9.26']: 定义一个列表 attr，包含按周划分的时间区间，这些将作为 x 轴的类目。
  7. data = [15000,22000,24000,29000,31000,36000,34000,27000]: 定义一个列表 data，包含每周的销售量数据，这些将作为 y 轴的数值。
  8. line.add("销售量",attr,data, is_label_show=True,legend_orient='vertical',legend_pos='center', is_smooth=True, xaxis_rotate='50'): 使用 add 方法向折线图对象中添加数据系列。
  9. "销售量" 是数据系列的名称。
  10. attr 是 x 轴的类目数据。
  11. data 是 y 轴的数据，即每周的销售量。
  12. is_label_show=True 表示显示数据标签。
  13. legend_orient='vertical' 设置图例为垂直排列。
  14. legend_pos='center' 设置图例在图表中的位置为中心。
  15. is_smooth=True 表示线条是否为曲线，这里设置为真即线条为曲线。
  16. xaxis_rotate='50' 设置 x 轴标签旋转50度，以便更好地适应图表。
  17. line.render(): 调用 render 方法生成 HTML 文件，并在浏览器中打开显示图表。render 方法会生成一个名为 "render.html" 的文件，你可以用浏览器打开这个文件来查看图表。

运行上述代码得到一个html文件，运行结果如下：

四、思考问题

ECharts与pyecharts软件功能强大，除了上述要实现的功能，大家可以自己进行扩展。

五、总结与心得体会

ECharts与pyecharts软件功能强大，需要进一步学习。

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

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

相关文章

beautifulSoup库

beautifulSoup库

是什么？ Beautiful Soup（简称BS4）是一种强大而灵活的HTML和XML解析库，广泛用于Python爬虫和数据采集中。相比正则表达式更加简洁. Beautiful Soup提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱，通过解析文档为用户提供需要抓取的…
阅读更多...
【知识学习】Unity3D中Shader Graph的概念及使用方法示例

【知识学习】Unity3D中Shader Graph的概念及使用方法示例

Unity3D中的Shader Graph是一个强大的可视化Shader编辑工具&#xff0c;它允许用户通过拖拽和连接节点的方式来创建Shader&#xff0c;而不是通过传统的编写代码的方式。Shader Graph使得Shader的创建过程更加直观和易于理解&#xff0c;特别是对于那些不熟悉Shader语言编程的美…
阅读更多...
Java中的性能调优技巧与工具推荐

Java中的性能调优技巧与工具推荐

Java中的性能调优技巧与工具推荐 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨Java中的性能调优技巧与工具推荐。Java作为一门广泛应用的编程语…
阅读更多...
【OpenREALM学习笔记：13】pose_estimation.cpp和pose_estimation.h

【OpenREALM学习笔记：13】pose_estimation.cpp和pose_estimation.h

UML Class Diagram 图中红色框为头文件中所涉及到的函数、变量和结构体 核心函数 PoseEstimation::process() 其核心作用为执行位姿估计的处理流程&#xff0c;并返回是否在此循环中进行了任何处理。 在这个函数中判断并完成地理坐标的初始化或这地理坐标的更新。 这里需要…
阅读更多...
QTreeView第一列自适应

QTreeView第一列自适应

通过setStretchLastSection(bool stretch)可以设置最后一列自适应，对于QTreeView，stretch默认为true。但有时候我们需要设置第一列自适应，比如文件浏览器，共有名称、大小和修改日期三列，大小和日期的宽度几乎是固定的，但名称却可长可短，此时我们希望在窗口大小变化时，第…
阅读更多...
IDEA中Maven配置依赖和排除依赖

IDEA中Maven配置依赖和排除依赖

目录 依赖配置 添加依赖的几种方式&#xff1a; 1.利用中央仓库搜索的依赖坐标 2.利用IDEA工具搜索依赖 3.熟练上手maven后&#xff0c;快速导入依赖 排除依赖 依赖配置 依赖&#xff1a;指当前项目运行所需要的jar包。一个项目中可以引入多个依赖&#xff1a; 例如&am…
阅读更多...
python r”, b”, u”, f” 前缀详解

python r”, b”, u”, f” 前缀详解

1、r前缀 一般来说&#xff0c;\n’是一个换行符&#xff0c;是一个字符串&#xff1b;而加上r为前缀后&#xff0c;不会以任何特殊方式处理反斜杠。因此&#xff0c;r"\n" 是包含 ‘\’ 和 ‘n’ 的双字符字符串&#xff1b;示例如下&#xff1a; >>> pr…
阅读更多...
Go-知识测试-工作机制

Go-知识测试-工作机制

Go-知识测试-工作机制 生成test的maintest的main如何启动case单元测试 runTeststRunnertesting.T.Run 示例测试 runExamplesrunExampleprocessRunResult 性能测试 runBenchmarksrunNtesting.B.Run 在 Go 语言的源码中&#xff0c;go test 命令的实现主要在 src/cmd/go/internal…
阅读更多...
Java面试题：解释反应式编程的概念，并讨论如何在Java中使用RxJava或Project Reactor实现

Java面试题：解释反应式编程的概念，并讨论如何在Java中使用RxJava或Project Reactor实现

反应式编程&#xff08;Reactive Programming&#xff09;是一种基于异步数据流和变化传播的编程范式。它强调通过声明式编程来处理异步事件流和数据流&#xff0c;简化了复杂的异步操作和并发编程。反应式编程适用于处理异步事件、多线程处理、大量数据流、用户交互等场景。 …
阅读更多...
零基础快速上手HarmonyOS ArkTS开发4---从简单的页面开始

零基础快速上手HarmonyOS ArkTS开发4---从简单的页面开始

接着上一次零基础快速上手HarmonyOS ArkTS开发3---应用程序框架的继续往下。 常用基础组件&#xff1a; 概述&#xff1a; 关于组件的一些基础概念就里就不多说了&#xff0c;官方有很详细的说明&#xff0c;而在HarmonyOS按功能分有如下几大类组件&#xff1a;基础组件、容…
阅读更多...
springboot笔记示例八：yml文件数据库连接redis密码加密实现使用jasypt加密

springboot笔记示例八：yml文件数据库连接redis密码加密实现使用jasypt加密

springboot笔记示例八&#xff1a;yml文件数据库连接redis密码加密实现使用jasypt加密 本文md文件下载 https://download.csdn.net/download/a254939392/89496228点击下载本文md文件 说明 springboot中大多数配置我们都采用yml文件配置&#xff0c;比如数据库连接&#xff…
阅读更多...
安卓短视频去水印v1.7 简洁好用

安卓短视频去水印v1.7 简洁好用

各大平台视频无水印提取&#xff0c;登录即永久会员&#xff01; 无水印提取&#xff0c;图片无水印提取 视频旋转&#xff0c;倒放&#xff0c;转gif等功能 链接&#xff1a;https://pan.baidu.com/s/1buoJmAvSFBiRkBmHc7Nn5w?pwd2fu4 提取码&#xff1a;2fu4
阅读更多...
LeetCode-数值-No49字母异位词

LeetCode-数值-No49字母异位词

题目&#xff1a; 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", &q…
阅读更多...
Lr、LrC软件下载安装 Adobe Lightroom专业摄影后期处理软件安装包分享

Lr、LrC软件下载安装 Adobe Lightroom专业摄影后期处理软件安装包分享

Adobe Lightroom它不仅为摄影师们提供了一个强大的照片管理平台&#xff0c;更以其出色的后期处理功能&#xff0c;成为了摄影爱好者们争相追捧的必备工具。 在这款软件中&#xff0c;摄影师们可以轻松地管理自己的照片库&#xff0c;无论是按拍摄日期、主题还是其他自定义标签…
阅读更多...
浅谈如何在linux上部署java环境

浅谈如何在linux上部署java环境

文章目录 一、部署环境1.1、JDK1.2、Tomcat1.3、MySQL 二、将自己写的的程序部署到云服务器上 一、部署环境 为了在linux上部署 Java web 程序&#xff0c;需要安装一下环境。 1.1、JDK 直接使用 yum 命令安装 openjdk。我们 windows系统上 下载的是 oracle 官方的 jdk。而 …
阅读更多...
用Python将PowerPoint演示文稿转换到图片和SVG

用Python将PowerPoint演示文稿转换到图片和SVG

PowerPoint演示文稿作为展示创意、分享知识和表达观点的重要工具&#xff0c;被广泛应用于教育、商务汇报及个人项目展示等领域。然而&#xff0c;面对不同的分享场景与接收者需求&#xff0c;有时需要我们将PPT内容以图片形式保存与传播。这样能够避免软件兼容性的限制&#x…
阅读更多...
Cisco Identity Services Engine (ISE) 3.3 Patch 2 - 基于身份的网络访问控制和策略实施系统

Cisco Identity Services Engine (ISE) 3.3 Patch 2 - 基于身份的网络访问控制和策略实施系统

Cisco Identity Services Engine (ISE) 3.3 Patch 2 - 基于身份的网络访问控制和策略实施系统 思科身份服务引擎 (ISE) - 下一代 NAC 解决方案 请访问原文链接&#xff1a;Cisco Identity Services Engine (ISE) 3.3 Patch 2 - 基于身份的网络访问控制和策略实施系统&#xf…
阅读更多...
能求一个数字的字符数量的程序

能求一个数字的字符数量的程序

目录 开头程序程序的流程图程序输入与打印的效果例1输入输出 例2输入输出 关于这个程序的一些实用内容结尾 开头 大家好&#xff0c;我叫这是我58&#xff0c;今天&#xff0c;我们先来看一下下面的程序。 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>…
阅读更多...
centos上部署Ollama平台，实现语言大模型本地部署

centos上部署Ollama平台，实现语言大模型本地部署

网上有很多大模型&#xff0c;很多都是远程在线调用ChatGPT的api来实现的&#xff0c;自己本地是没有大模型的&#xff0c;这里和大家分享一个大模型平台&#xff0c;可以实现本地快速部署大模型。 Ollama是一个开源项目&#xff0c;它提供了一个平台和工具集&#xff0c;用于部…
阅读更多...
C语言单链表的算法之逆序

C语言单链表的算法之逆序

一&#xff1a;什么是链表的逆序 &#xff08;1&#xff09;链表的逆序又叫反向&#xff0c;意思就是把链表中所有的有效节点在链表中的顺序给反过来 二&#xff1a;单链表逆序算法分析 &#xff08;1&#xff09;当需要对一个数据结构进行操作时&#xff0c;就有必要有一套算…
阅读更多...
最新文章

Copyright @ 2022~2023