大數據可視化實驗（六）——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.pswp.cn/web/36938.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/36938.shtml
英文地址，請注明出處：http://en.pswp.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