第一章

數(shù)據(jù)可視化概述GOAL學習目標1了解數(shù)據(jù)要素與數(shù)據(jù)科學的基本概念2了解數(shù)據(jù)可視化的基本概念與發(fā)展歷程3了解數(shù)據(jù)可視化的基本流程4了解數(shù)據(jù)可視化應(yīng)用的基本概念5了解主流的數(shù)據(jù)可視化應(yīng)用開發(fā)框架6了解數(shù)據(jù)可視化常用的信息圖表目錄Contents1.1初識數(shù)據(jù)可視化1.2數(shù)據(jù)可視化應(yīng)用開發(fā)框架1.3數(shù)據(jù)可視化常用信息圖表1.1初識數(shù)據(jù)可視化

數(shù)據(jù)是符號的集合，是用于表示客觀事物的未經(jīng)加工的原始素材。我國將數(shù)據(jù)列為第五大生產(chǎn)要素，提出數(shù)據(jù)是賦能新質(zhì)生產(chǎn)力的核心生產(chǎn)要素。

數(shù)據(jù)價值釋放的前提是數(shù)據(jù)資產(chǎn)化。數(shù)據(jù)資產(chǎn)化，即將原始數(shù)據(jù)轉(zhuǎn)變?yōu)槟転槠髽I(yè)帶來經(jīng)濟利益的資產(chǎn)，是一項復(fù)雜的系統(tǒng)工程，目前，研究這種綜合性方法的學科被稱為“數(shù)據(jù)科學”，是一門新的交叉學科。

1.1.1數(shù)據(jù)要素與數(shù)據(jù)科學

在計算機學科的分類中，利用人眼的感知能力，對數(shù)據(jù)進行交互的可視表達以增強認知的技術(shù)，稱為可視化。

在數(shù)據(jù)分析工作中，可視化通常被作為一種輔助分析的工具，用來幫助用戶直觀地了解數(shù)據(jù)的特征、快速發(fā)現(xiàn)數(shù)據(jù)中蘊藏的規(guī)律。因此，科學、合理地運用可視化，能夠顯著提升數(shù)據(jù)分析的工作效率。

可視化的作用：高效傳達信息及輔助數(shù)據(jù)分析還原甚至增強數(shù)據(jù)中的全局結(jié)構(gòu)和具體細節(jié)1.1.2數(shù)據(jù)可視化

1987年2月，美國國家科學基金會在會議報告中首次給出了科學可視化（ScientificVisualization）的定義。

進入21世紀之后，隨著大數(shù)據(jù)時代的到來，提出一門新興的學科被稱為“可視分析學”。目前，可視分析學的核心理論基礎(chǔ)與研究方法仍處于探索階段。

本課程即屬于現(xiàn)代可視分析學的范疇，旨在介紹流行的可視化工具以及利用這些工具開發(fā)可視化應(yīng)用的方法，為大數(shù)據(jù)可視分析提供一種解決方案。1.1.3

數(shù)據(jù)可視化的發(fā)展歷程

1.1.4

數(shù)據(jù)可視化的基本流程數(shù)據(jù)抽取→數(shù)據(jù)轉(zhuǎn)換→數(shù)據(jù)加載→數(shù)據(jù)渲染目前，數(shù)據(jù)可視化應(yīng)用系統(tǒng)一種非常流行的產(chǎn)品形態(tài)是“數(shù)據(jù)大屏”，又稱“商業(yè)智能儀表盤”或“一張圖系統(tǒng)”。1.1.5

數(shù)據(jù)可視化的應(yīng)用

數(shù)據(jù)大屏本質(zhì)上是將多個信息圖表整合在一個頁面上的單頁應(yīng)用，能夠在統(tǒng)一的界面上展示在時空上存在關(guān)聯(lián)的多維數(shù)據(jù)，是向用戶展示關(guān)鍵績效指標的數(shù)據(jù)可視化工具。由于數(shù)據(jù)大屏具有信息量大、集中度高、視覺效果好、支持多維分析等優(yōu)勢，被廣泛應(yīng)用于商業(yè)智能、業(yè)務(wù)監(jiān)控、輔助決策、風險預(yù)警、地理分析、會議展覽等多種應(yīng)用場景中。一款優(yōu)秀的數(shù)據(jù)大屏作品不是圖表的簡單堆砌，而是兼具科學性與藝術(shù)性的軟件工程產(chǎn)品，需要通過系統(tǒng)性、規(guī)范化的設(shè)計，才能滿足應(yīng)用需求。1.1.5

數(shù)據(jù)可視化的應(yīng)用1.2數(shù)據(jù)可視化應(yīng)用開發(fā)框架

ECharts是百度開源的JavaScript可視化框架，現(xiàn)為Apache頂級項目。ECharts的特性：支持豐富的圖表類型、交互控件和視覺編碼手段支持千萬級、多維度數(shù)據(jù)的前端展現(xiàn)支持多渲染方案和跨平臺應(yīng)用支持數(shù)據(jù)驅(qū)動視圖和無障礙訪問等。1.2.1

Echarts

D3是斯坦福推出的JavaScript可視化庫。D3支持標準的Web技術(shù)（HTML、CSS和SVG），允許綁定任意數(shù)據(jù)到DOM，并將數(shù)據(jù)驅(qū)動轉(zhuǎn)換應(yīng)用到文檔中，來實現(xiàn)各種數(shù)據(jù)可視化效果。與Echarts相比，D3的抽象層次更低，比如：Echarts的繪制單位是圖表，而D3的繪制單位則是圖形。1.2.2

D3

Processing.js是Processing語言的JavaScript實現(xiàn)。Processing提供了一套用于繪圖的API，擅長創(chuàng)建2D與3D圖像、音頻、視頻等。與Echarts相比，Processing.js更側(cè)重于視覺思維的創(chuàng)造性，用戶群體主要是設(shè)計師和藝術(shù)家，而Echarts則更加適用于對規(guī)范性有較高要求的行業(yè)和領(lǐng)域應(yīng)用。1.2.3

Processing.js

DataV是阿里云推出的數(shù)據(jù)可視化應(yīng)用搭建平臺，旨在通過圖形化的界面幫助不同專業(yè)背景的用戶搭建可視化應(yīng)用。DataV是直接面向應(yīng)用的商業(yè)平臺，它對信息圖表進行了二次封裝，形成了面向行業(yè)的數(shù)據(jù)看板。與Echarts、D3、Processing.js這些技術(shù)相比，DataV屬于較高抽象層次的產(chǎn)品。1.2.4

DavaV1.3數(shù)據(jù)可視化常用信息圖表條形圖用一系列長度不等的縱向或橫向條紋來表現(xiàn)數(shù)據(jù)的分布情況。核心思想是對比，適合用來展示數(shù)據(jù)之間的差異。適用于中小規(guī)模的二維數(shù)據(jù)集。1.3.1

條形圖折線圖常被用來展示時間序列數(shù)據(jù)。核心思想是趨勢變化，適用于總體趨勢比單個數(shù)據(jù)點更重要的場景。適用于二維大數(shù)據(jù)集。1.3.2折線圖儀表盤能夠呈現(xiàn)指標的實時狀態(tài)，適用于業(yè)務(wù)監(jiān)控、監(jiān)測預(yù)警等場合。儀表盤指針所指向的刻度值代表觀測指標的實時值，坐標軸的顏色還可以用于對觀測值進行分類。1.3.3儀表盤熱力圖通過顏色表現(xiàn)數(shù)值大小。熱力圖通常與空間或時間坐標系結(jié)合，用于展示業(yè)務(wù)數(shù)據(jù)在空間或時間上的分布狀態(tài)。當熱力圖與日歷坐標系結(jié)合時，就形成了日歷熱力圖，以日歷的形式展示數(shù)據(jù)的變化趨勢。1.3.4熱力圖平行坐標圖是一種展示高維數(shù)據(jù)的圖表。圖上折線的形態(tài)能夠反映記錄之間的關(guān)系。隨著數(shù)據(jù)量的增加，形態(tài)相似的折線會堆疊起來，形成聚類的效果，從而揭示出記錄之間的相關(guān)關(guān)系。1.3.5平行坐標圖雷達圖是一種適用于展示指標構(gòu)成以及次級指標之間權(quán)重分布的信息圖表，經(jīng)常應(yīng)用于性能評估等場景中。雷達圖所圍的面積能夠反映綜合指標的測度結(jié)果，而展布的形態(tài)則能夠反映綜合指標在各個次級指標上的權(quán)重分布，并有助于揭示占主導(dǎo)地位的次級指標。1.3.6雷達圖餅圖主要用于展示部分占總體的比重。餅圖還有一些其他的形態(tài)，比如環(huán)形圖和南丁格爾玫瑰圖。1.3.7餅圖散點圖是在回歸分析中常用的信息圖表，主要用于展示因變量隨自變量變化的趨勢。根據(jù)這種趨勢選擇合適的函數(shù)對數(shù)據(jù)點進行擬合，從而確定變量之間定量關(guān)系的分析方法即回歸分析，是統(tǒng)計學習中的一種基本方法。1.3.8散點圖

本章首先介紹了數(shù)據(jù)可視化相關(guān)的基本概念，包括數(shù)據(jù)要素、數(shù)據(jù)資產(chǎn)、數(shù)據(jù)科學，數(shù)據(jù)可視化的發(fā)展歷程、基本流程，以及數(shù)據(jù)可視化應(yīng)用等。然后，介紹了幾種流行的數(shù)據(jù)可視化應(yīng)用開發(fā)框架。最后，重點介紹了數(shù)據(jù)可視化常用的7類信息圖表。通過本章學習，讀者應(yīng)了解數(shù)據(jù)可視化的基本概念，并對數(shù)據(jù)可視化常用信息圖表的概念、特點和應(yīng)用場景形成初步認識，為后續(xù)學習奠定理論基礎(chǔ)。本章小結(jié)THEENDTHANKS!第二章

項目概述GOAL學習目標1了解項目需求和項目目標2了解項目架構(gòu)及項目實施的技術(shù)路線3掌握項目開發(fā)環(huán)境的搭建方法4掌握項目數(shù)據(jù)庫的創(chuàng)建方法目錄Contents2.1需求分析2.2系統(tǒng)架構(gòu)2.3技術(shù)路線2.4開發(fā)環(huán)境2.5環(huán)境準備2.6數(shù)據(jù)準備2.1需求分析

項目目標：開發(fā)“空氣質(zhì)量監(jiān)測數(shù)據(jù)可視化平臺”。項目數(shù)據(jù)集：節(jié)選自

ChinaVis2021

數(shù)據(jù)可視化競賽提供的2013~2018

年中國大氣污染再分析開放數(shù)據(jù)集。原始數(shù)據(jù)集中提供了

6項常規(guī)污染物以及

5

個常用氣象要素的日均值數(shù)據(jù)。本項目從原始數(shù)據(jù)集中選取了部分字段及

2018

年

1

月的部分記錄，新增了一個“station”字段作為記錄標識。2.1.1項目需求2.1.1項目需求序號字段名字段類型說明1datetimestamp日期2pm25floatPM2.5濃度，單位：微克每立方米3pm10floatPM10濃度，單位：微克每立方米4o3float臭氧濃度，單位：微克每立方米5so2float二氧化硫濃度，單位：微克每立方米6no2float二氧化氮濃度，單位：微克每立方米7cofloat一氧化碳濃度，單位：毫克每立方米8ufloat緯向風速，單位：米每秒9vfloat經(jīng)向風速，單位：米每秒10tempfloat氣溫，單位：開爾文（K）11rhfloat相對濕度，單位：%12psfcfloat地面氣壓，單位：帕斯卡（Pa）13staionvarchar監(jiān)測站編碼2.1.2項目目標9

個信息圖表和

1

款數(shù)據(jù)大屏PM2.5濃度對比條形圖大氣主要污染物濃度變化折線圖顆粒物濃度監(jiān)測儀表盤PM2.5濃度變化熱力圖空氣質(zhì)量指數(shù)平行坐標圖空氣質(zhì)量指數(shù)雷達圖空氣質(zhì)量指數(shù)分類占比餅圖空氣質(zhì)量指數(shù)與氣象要素關(guān)系散點圖空氣質(zhì)量指數(shù)排序與匯總聯(lián)動圖空氣質(zhì)量監(jiān)測數(shù)據(jù)可視化平臺2.2系統(tǒng)架構(gòu)本項目采用

MVT

架構(gòu)，將

Web

應(yīng)用程序自底向上分成模型、視圖、模板和路由四層。模型負責業(yè)務(wù)對象與數(shù)據(jù)庫的關(guān)系映射，視圖負責處理用戶請求并返回響應(yīng)，模板負責把響應(yīng)渲染成

HTML

文檔，路由負責把用戶的

URL

請求分發(fā)給不同的視圖函數(shù)進行處理。2.2系統(tǒng)架構(gòu)2.3技術(shù)路線

2.3技術(shù)路線2.4開發(fā)環(huán)境

2.4開發(fā)環(huán)境類別名稱版本操作系統(tǒng)Windows10瀏覽器MicrosoftEdge119.0數(shù)據(jù)庫MySQL5.5.0框架Echarts5.5.0框架Echarts-GL2.0.9框架jQuery3.3.1框架Flask2.2.3框架PyMySQL1.0.2工具VisualStudioCode1.87.2工具Anaconda32022.10工具NavicatforMySQL16.3.72.5環(huán)境準備

Anaconda3

是流行的開源

Python

發(fā)行版，可為本項目提供Python3

基礎(chǔ)環(huán)境及

Flask、PyMySQL

等支撐框架。本節(jié)主要介紹在Anaconda3

中創(chuàng)建

Python3

虛擬環(huán)境的方法，有圖形界面和命令行界面兩種方式。2.5.1Anaconda32.5.1Anaconda3創(chuàng)建新的Python虛擬環(huán)境2.5.1Anaconda3安裝

Flask

框架

2.5.1Anaconda3基于命令行的方式創(chuàng)建名為myFlask的Python3虛擬環(huán)境condacreate--namemyFlaskpython=3.8激活myFlask環(huán)境：condaactivatemyFlask配置國內(nèi)鏡像源：condaconfig--addchannels/anaconda/pkgs/free/condaconfig--addchannels/anaconda/pkgs/main/

2.5.1Anaconda3基于命令行的方式安裝Flask和PyMySQL框架：condainstallflaskpymysql驗證Flask和PyMySQL是否可用：importflaskimportpymysql

VisualStudioCode

是微軟推出的一款輕量級的源代碼編輯器，需要安裝一些擴展插件以提升開發(fā)效率，必須安裝的插件見下表：

2.5.2

VisualStudioCode插件功能PythonPython語言插件openinbrowser用瀏覽器打HTML文檔2.5.2

VisualStudioCode配置Python解釋器

MySQL是目前流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，具有開源、穩(wěn)定、體積小、速度快的特點。在MySQL安裝過程中，有幾項配置需要注意。

2.5.3MySQL2.5.3MySQL啟用網(wǎng)絡(luò)連接2.5.3MySQL字符集設(shè)置2.5.3MySQL安裝為系統(tǒng)服務(wù)2.5.3MySQL修改安全設(shè)置2.5.3MySQL檢查MySQL服務(wù)的運行狀態(tài)2.5.3MySQL登錄驗證

2.5.3MySQL在Navicat中進行數(shù)據(jù)庫連接測試2.6數(shù)據(jù)準備2.6數(shù)據(jù)準備創(chuàng)建數(shù)據(jù)庫

2.6數(shù)據(jù)準備導(dǎo)入數(shù)據(jù)集

2.6數(shù)據(jù)準備瀏覽數(shù)據(jù)

本章首先介紹了“空氣質(zhì)量監(jiān)測數(shù)據(jù)可視化平臺”項目的基本情況，包括項目的需求和目標、技術(shù)架構(gòu)、技術(shù)路線及環(huán)境依賴等內(nèi)容。然后詳細介紹了項目開發(fā)環(huán)境搭建和數(shù)據(jù)準備工作。通過本章的學習，讀者應(yīng)對項目基本情況形成整體性認識，并完成項目開發(fā)環(huán)境的搭建及數(shù)據(jù)準備工作，為后續(xù)的學習和開發(fā)工作做好準備。

本章小結(jié)THEENDTHANKS!第三章

技術(shù)基礎(chǔ)GOAL學習目標1了解Web前后端開發(fā)技術(shù)及Echarts圖表開發(fā)技術(shù)2掌握Echarts基本條形圖的制作方法3掌握利用Flask開發(fā)Web應(yīng)用程序的基本方法4掌握利用PyMySQL接入MySQL數(shù)據(jù)庫的基本方法5掌握基于Python的JSON數(shù)據(jù)接口開發(fā)技術(shù)目錄Contents3.1前端開發(fā)技術(shù)3.2服務(wù)器端開發(fā)技術(shù)3.3數(shù)據(jù)接口開發(fā)技術(shù)3.1前端開發(fā)技術(shù)

HTML

是目前應(yīng)用廣泛的網(wǎng)頁制作語言，用于創(chuàng)建結(jié)構(gòu)化的文檔并提供語義。HTML

中有兩個重要概念，一是標簽，如“<html>”“<head>”“<body>”等，用于對內(nèi)容進行描述；二是元素，由開始標簽、結(jié)束標簽和內(nèi)容組成，如“<title>Document</title>”，是HTML文檔的基本結(jié)構(gòu)單元。3.1.1HTML

3.1.1HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>例3.1.1</title></head><body>

用VSCode快速生成HTML文檔。</body></html>HTML示例3.1.1HTML標簽說明<!DOCTYPEhtml>定義文檔的類型為HTML<html>根標簽，告知瀏覽器自身是一個HTML文檔<head>頭部標簽，內(nèi)部封裝了<meta>、<title>等標簽<meta>定義文檔的元信息，例如為搜索引擎提供網(wǎng)頁的關(guān)鍵字、內(nèi)容描述等<title>定義HTML文檔的標題<body>主體標簽，一個HTML文檔只能有一對<body>標簽

CSS用于設(shè)置HTML元素的樣式，主要包括文本的字體、字號、對齊方式，圖像的尺寸、位置，以及版面的布局等。利用CSS可以實現(xiàn)內(nèi)容與表現(xiàn)形式的解耦，有助于提高開發(fā)效率。CSS的樣式規(guī)則由選擇器和聲明兩部分組成。3.1.2CSS

CSS

常用選擇器3.1.2CSS選擇器應(yīng)用示例說明元素選擇器body{background-color:black;}將<body>元素的背景顏色設(shè)置為黑色類選擇器.f1{float:left;}將所有class="f1"的元素均設(shè)置為左浮動ID選擇器#A{color:green;}將id="A"的元素內(nèi)容設(shè)置為紅色通配符選擇器*{magin:0;}將所有元素的外邊距設(shè)置為0群組選擇器div,span,img{padding:0;}將所有div、span、img元素的內(nèi)邊距設(shè)置為03.1.2CSS<divid="main"style="width:600px;height:400px;">行內(nèi)式引用</div>引用方法<head>

<styletype="text/css">

h1{

font-size:14px;

color:blue;

}

</style></head>

<linkhref="link.css"rel="stylesheet">行內(nèi)式內(nèi)嵌式外鏈式3.1.3盒子模型盒子模型是

HTML元素布局的基礎(chǔ)

盒子模型的常用屬性3.1.3盒子模型屬性名含義應(yīng)用舉例width寬度width:800px;/*寬度為800像素*/height高度height:600px;/*高度為600像素*/background背景background:url(img/bg.jpg)no-repeat50px80pxfixed;/*圖像路徑，不平鋪，圖像坐標，圖像固定*/padding內(nèi)邊距padding:5px3px4px;/*內(nèi)邊距：上為5像素，左右為3像素，下為4像素*/border邊框border:3pxdoublered;/*邊框：3像素寬，雙實線，紅色*/margin外邊距margin:5px3px4px;/*外邊距：上為5像素，左右為3像素，下為4像素*/3.1.4頁面布局默認布局與優(yōu)化布局3.1.5CSS定位機制浮動屬性float常用的屬性值屬性名屬性值說明floatleft元素向左浮動right元素向右浮動none元素不浮動（默認值）3.1.5CSS定位機制浮動屬性應(yīng)用示例<styletype="text/css">.father{width:330px;height:220px;background:#c6c4c492;border:1pxdashed#ccc;}.child01,.child02,.child03{

float:left;height:50px;background:rgb(253,253,2);border:1pxsolid#1505f4;margin:15px;padding:0px10px;}</style><body>

<divclass="father">

<divclass="child01">child01</div>

<divclass="child02">child02</div>

<divclass="child03">child03</div>

</div></body>3.1.5CSS定位機制定位屬性屬性名屬性值說明positionstatic靜態(tài)定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位top像素值頂端偏移量，定義元素相對于其父元素上邊線的距離bottom像素值底部偏移量，定義元素相對于其父元素下邊線的距離left像素值左側(cè)偏移量，定義元素相對于其父元素左邊線的距離right像素值右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

3.1.5CSS定位機制相對定位和絕對定位body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background:#ccc;border:1pxsolid#000;position:relative;}.child01,.child02,.child03{width:100px;height:50px;background:#ff0;border:1pxsolid#000;margin:10px0px;}.child02{

position:relative;left:150px;top:100px;}.child02{

position:absolute;left:150px;top:100px;}

JavaScript是一種腳本語言，主要用于實現(xiàn)Web頁面的交互效果。對于一個網(wǎng)頁而言，HTML、CSS和JavaScript分別代表了結(jié)構(gòu)、樣式和行為，結(jié)構(gòu)是頁面的骨架，樣式是頁面的外觀，行為是頁面的交互邏輯。JavaScript由ECMAScript和WebAPI兩部分組成。其中，ECMAScript規(guī)定了JavaScript的編程語法和基礎(chǔ)內(nèi)容；WebAPI則提供了操作瀏覽器功能和頁面元素的接口，包括DOM和BOM兩部分內(nèi)容。3.1.6JavaScriptDOM（DocumentObjectModel）

3.1.6JavaScriptDOM元素的常用方法和屬性

3.1.6JavaScript方法說明document.getElementById()根據(jù)id獲取元素document.getElementsByTagName()根據(jù)標簽名獲取元素document.getElementsByName()根據(jù)name屬性來獲取元素document.body返回文檔的body元素document.title返回文檔的title元素document.documentElement返回文檔的html元素document.forms返回對文檔中所有Form對象的引用document.images返回對文檔中所有Image對象的引用BOM（BrowserObjectModel）

3.1.6JavaScript事件名稱說明window.onload當文檔內(nèi)容加載完畢時觸發(fā)該事件window.onresize當瀏覽器窗口大小變化時觸發(fā)該事件BOM提供了一系列可以與瀏覽器進行互動的對象，用于實現(xiàn)頁面與瀏覽器之間的動態(tài)交互效果。與DOM不同的是，BOM將瀏覽器當作一個對象，它的頂級對象是window。3.1.7Echarts“PM2.5濃度對比條形圖”開發(fā)流程3.1.7Echarts監(jiān)測站編碼PM2.5觀測值（μg/m3）HD0189.36XT01149.95HS01140.07SJZ0184.82CZ01101.87BD0171.02LF0163.88TS0166.33QHD0130.39ZJK0121.25CD0116.25PM2.5濃度數(shù)據(jù)集（1）準備工作創(chuàng)建項目目錄結(jié)構(gòu)3.1.7Echarts創(chuàng)建名為“Example3.4”的文件夾，作為項目根目錄。在根目錄下分別創(chuàng)建“CSS”和“JS”目錄。（1）準備工作創(chuàng)建主頁HTML文檔“index.html”3.1.7Echarts<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>基本條形圖</title></head><body>

</body></html>（1）準備工作引入Echarts庫文件3.1.7Echarts在“index.html”的“<head>”標簽中添加引用<scriptsrc="JS/echarts.js"></script>（1）準備工作創(chuàng)建DOM容器3.1.7Echarts在“index.html”的“<body>”標簽中定義“<div>”標簽<divid="bar"></div>（1）準備工作設(shè)置元素樣式3.1.7Echarts新建名為“main.css”的CSS文檔#bar{ position:absolute;/*絕對定位模式*/width:70%;/*設(shè)置容器的寬度占頁面寬度的50%*/height:70%;/*設(shè)置容器的高度占頁面高度的70%*/}（2）圖表制作新建條形圖JS腳本3.1.7Echarts新建“bar.js”，并在“index.html”的“<body>”標簽中添加引用<scriptsrc="JS/bar.js"></script>/*引用JS腳本*/（2）圖表制作初始化條形圖實例3.1.7Echarts使用“document.getElementById()”和“echarts.init()”方法varcontainer=document.getElementById('bar')/*獲取DOM容器*/varmyBar=echarts.init(container)/*初始化echarts的實例對象myBar*/（2）圖表制作設(shè)置條形圖配置項3.1.7Echartsvaroption={title:{/*標題組件*/text:'PM2.5濃度對比條形圖'},tooltip:{},/*提示框組件*/legend:{/*圖例組件*/data:['PM2.5'],right:'10%'},（2）圖表制作設(shè)置條形圖配置項3.1.7EchartsxAxis:{/*x軸組件*/data:['HD01','XT01','HS01','SJZ01','CZ01','BD01','LF01','TS01', 'QHD01','ZJK01','CD01']},yAxis:{},/*y軸組件*/series:[{/*數(shù)據(jù)系列組件*/name:'PM2.5',type:'bar',data:[89.36,149.95,140.07,84.82,101.87,71.02,63.88,66.33,30.39, 21.25,16.25]}]}（2）圖表制作渲染條形圖3.1.7Echarts調(diào)用“myBar.setOption()”方法將配置項應(yīng)用到“myBar”實例上

myBar.setOption(option)使用瀏覽器打開“index.html”查看圖表顯示效果

3.1.7Echarts

3.1.8jQueryjQuery是一款開源的JS庫，通過對JavaScript進行函數(shù)封裝，簡化了HTML與JavaScript之間的操作，使得DOM操作、事件處理的實現(xiàn)語法更加簡潔，有助于提高前端程序的開發(fā)效率。要使用jQuery，需要在HTML的<head>標簽中添加引用。<scriptsrc="JS/jquery.min.js"></script>

3.1.8jQueryajax()方法的常用參數(shù)參數(shù)說明url處理Ajax請求的服務(wù)器地址method請求方式：GET或者POST，默認值為GETdataType請求的數(shù)據(jù)類型，如JSON、XML、HTML等success請求成功時觸發(fā)的回調(diào)函數(shù)，參數(shù)為服務(wù)器返回的數(shù)據(jù)error請求失敗時觸發(fā)的回調(diào)函數(shù)async是否異步，true表示異步，false表示同步，默認值為truecache是否緩存，true表示緩存，false表示不緩存，默認值為true<script>$.ajax({url:'/json_for_bar',method:'GET',dataType:’json’,success:function(data){...;},error:function(msg){console.log(msg)}});</script>3.1.8jQueryajax()應(yīng)用示例3.2服務(wù)器端開發(fā)技術(shù)

3.2.1FlaskFlask是基于Python的微型Web框架。在編寫Flask程序之前，需要搭建開發(fā)環(huán)境，包括創(chuàng)建和激活Python虛擬環(huán)境、安裝Flask框架、在VSCode中配置Python解釋器等步驟。下面以“PM2.5濃度對比條形圖”為例，演示利用Flask制作動態(tài)圖表的方法。（1）創(chuàng)建項目目錄結(jié)構(gòu)3.2.1Flask（2）創(chuàng)建模板文件3.2.1Flask（3）加載模板文件3.2.1FlaskfromflaskimportFlask,render_templateapp=Flask(__name__)@app.route("/"defindex():returnrender_template("index.html")if__name__=='__main__':app.run()新建“server.py”（4）配置靜態(tài)資源加載路徑3.2.1Flask<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="{{url_for('static',filename='JS/echarts.js')}}"></script><linkrel="stylesheet"href="{{url_for('static',filename='CSS/main.css')}}"><title>基本條形圖</title></head><body><divid="bar"></div><scriptsrc="{{url_for('static',filename='JS/bar.js')}}"></script></body></html>（5）啟動開發(fā)服務(wù)器3.2.1Flask在VSCode中使用Python解釋器運行“server.py”（6）瀏覽圖表效果3.2.1Flask運行“server.py”，通過瀏覽器訪問URL“:5000/”

3.2.2PyMySQLPyMySQL是一款用Python編寫的MySQL驅(qū)動程序，支持在Python程序中執(zhí)行各種數(shù)據(jù)庫操作。下面以PM2.5數(shù)據(jù)接入為例，介紹使用PyMySQL操作MySQL數(shù)據(jù)庫的基本方法。（1）導(dǎo)入PyMySQL模塊3.2.2PyMySQL新建名為“Example3.6.py”的Python腳本文件，使用“import”關(guān)鍵字導(dǎo)入PyMySQL模塊importpymysql（2）連接MySQL數(shù)據(jù)庫3.2.2PyMySQLconnect()方法常用參數(shù)參數(shù)說明host數(shù)據(jù)庫服務(wù)器的主機名port數(shù)據(jù)庫服務(wù)的端口號，MySQL默認服務(wù)端口為3306db數(shù)據(jù)庫的名稱user數(shù)據(jù)庫的用戶名password數(shù)據(jù)庫用戶的登錄密碼charset編碼方式（2）連接MySQL數(shù)據(jù)庫3.2.2PyMySQLif__name__=='__main__':conf={'host':'','port':3306,'db':'airpollution','user':'root','password':'root','charset':'utf8mb4'}conn=pymysql.connect(**conf)（3）編寫SQL查詢語句3.2.2PyMySQLsql='''SELECTpm25,stationFROMairpollutionWHEREdateLIKE"2018-01-01%"AND(station='HD01'ORstation='XT01'ORstation='HS01'ORstation='SZJ01'ORstation='CZ01'ORstation='BD01'ORstation='LF01'ORstation='TS01'ORstation='QHD01'ORstation='ZJK01'ORstation='CD01')'''（4）執(zhí)行SQL查詢操作3.2.2PyMySQL定義“getData()”函數(shù)，用于執(zhí)行SQL查詢語句并返回查詢結(jié)果defgetData(conn,sql):db=conn.cursor()db.execute(sql)data=db.fetchall()db.close()returndata

（5）打印輸出查詢結(jié)果3.2.2PyMySQL在“main()”函數(shù)中調(diào)用“getData()”方法data=getData(conn,sql)print(data)conn.close()3.3數(shù)據(jù)接口開發(fā)技術(shù)

數(shù)據(jù)接口是指前后端進行數(shù)據(jù)交換的規(guī)范。在本項目中，數(shù)據(jù)接口采用JSON格式。JSON是一種輕量級的數(shù)據(jù)交換格式，本質(zhì)上是一個由鍵值對組成的字符串。對于Ajax應(yīng)用程序，JSON比XML更易于機器解析和生成，因而更加適用于前后端數(shù)據(jù)交換的場景。3.3.1JSON數(shù)據(jù)交換格式

3.3.1JSON數(shù)據(jù)交換格式{"station":["CD01","HD01","XT01","HS01","CZ01","BD01",

"LF01","TS01", "QHD01","ZJK01","CD01"],"pm25":[103.63,89.36,149.95,140.07,101.87,71.02,63.88,

66.33,30.39,21.25,16.25]}JSON字符串示例dumps()函數(shù)的常用參數(shù)3.3.1JSON數(shù)據(jù)交換格式參數(shù)說明obj待編碼的Python對象，通常是字典類型ensure_ascii是否將字符轉(zhuǎn)換為ASCII碼，默認值為Trueindent設(shè)置縮進等級，默認值為None3.3.2JSON數(shù)據(jù)接口開發(fā)（1）導(dǎo)入JSON模塊新建Python腳本文件，使用“import”關(guān)鍵字導(dǎo)入JSON模塊importjson3.3.2JSON數(shù)據(jù)接口開發(fā)（2）組裝JSON字符串定義“getJSON()”函數(shù)defgetJSON(data):dct={}stations=[]values=[]foritemindata:stations.append(item[1])values.append(item[0])dct['station']=stationsdct['pm25']=valuesreturnjson.dumps(dct,ensure_ascii=False)3.3.2JSON數(shù)據(jù)接口開發(fā)（3）打印輸出JSON字符串在“main()”函數(shù)中調(diào)用“getJSON()”方法if__name__=='__main__':data=((103.63,'CD01'),(89.36,'HD01'),(149.95,'XT01'),(140.07,'HS01'),(101.87,'CZ01'),(71.02,'BD01'),(63.88,'LF01'),(66.33,'TS01'),(30.39,'QHD01'),(21.25,'ZJK01'),(16.25,'CD01'))jsn=getJSON(data)print(jsn)3.3.2JSON數(shù)據(jù)接口開發(fā)（4）驗證JSON合法性驗證JSON字符串的合法性

本章主要介紹了數(shù)據(jù)可視化應(yīng)用開發(fā)所依賴的支撐技術(shù)，并提供了一些實戰(zhàn)案例。通過本章的學習，讀者應(yīng)對項目的技術(shù)體系形成系統(tǒng)性認識，并通過實踐掌握Echarts基本條形圖的制作方法、利用Flask開發(fā)Web應(yīng)用程序的基本方法、利用PyMySQL接入MySQL數(shù)據(jù)庫的基本方法，以及基于Python的JSON數(shù)據(jù)接口開發(fā)方法，為后續(xù)的學習和開發(fā)工作奠定技術(shù)基礎(chǔ)。本章小結(jié)THEENDTHANKS!第四章Echarts詳解GOAL學習目標1了解前端渲染技術(shù)的基本概念2了解Echarts的基礎(chǔ)架構(gòu)3了解Echarts的常用組件4了解Echarts組件的常用屬性目錄Contents4.1前端渲染技術(shù)4.2Echarts的基礎(chǔ)架構(gòu)4.3Echarts的常用組件4.4Echarts組件的常用屬性4.1前端渲染技術(shù)

Echarts的底層是前端渲染技術(shù)，所謂前端渲染，通俗的解釋就是在瀏覽器上繪制

2D/3D

圖形的技術(shù)，目前主流的解決方案有

Canvas

和SVG（ScalableVectorGraphics，可縮放矢量圖形）兩種。

一般來說，Canvas

適合繪制數(shù)據(jù)量大、圖形元素數(shù)量較多的圖表（如熱力圖、平行坐標圖、地圖等）；而

SVG

則更適用于軟硬件性能受限的邊緣設(shè)備。Echarts

對這兩種渲染器都提供了支持，如何選擇，需要根據(jù)軟硬件環(huán)境、數(shù)據(jù)量、功能需求綜合考慮。4.1前端渲染技術(shù)4.2Echarts的基礎(chǔ)架構(gòu)//使用Canvas渲染器（默認）varchart=echarts.init(containerDom,null,{renderer:'canvas'});//等價于：varchart=echarts.init(containerDom)//使用SVG渲染器varchart=echarts.init(containerDom,null,{renderer:'svg'})4.2Echarts的基礎(chǔ)架構(gòu)渲染器配置參數(shù)“renderer”4.2Echarts的基礎(chǔ)架構(gòu)

為了屏蔽底層技術(shù)的復(fù)雜性，Echarts向上提供了組件、圖類和接口3個層次的API。基礎(chǔ)庫的上層是組件，包括構(gòu)成圖表的一些通用元素；組件的上層是圖類，即圖表類型，Echarts支持22種圖表；圖類的上層是接口，用于支持圖表混搭、多圖聯(lián)動等高級特性。在使用ECharts制作圖表時，只需要調(diào)用組件、圖類和接口即可完成開發(fā)任務(wù)。開發(fā)人員可以聚焦于核心業(yè)務(wù)，而不必關(guān)注底層的實現(xiàn)細節(jié)，從而提高了開發(fā)效率。4.3Echarts的常用組件

4.3Echarts的常用組件組件說明tittle標題組件，用于設(shè)置圖表的主標題和副標題。tooltip提示框組件，在鼠標懸?；螯c擊數(shù)據(jù)時彈窗顯示詳細信息。toolbox工具箱組件，包含：保存為圖片、配置項還原、數(shù)據(jù)視圖、數(shù)據(jù)區(qū)域縮放、動態(tài)類型切換等五個工具。legend圖例組件，用于描述數(shù)據(jù)和圖形的關(guān)聯(lián)。grid直角坐標系內(nèi)繪圖網(wǎng)格，用于定義直角坐標系的布局和樣式。xAxis直角坐標系中的橫軸，默認為類目型（category）。yAxis直角坐標系中的縱軸，默認為數(shù)值型（value）。

4.3Echarts的常用組件組件說明dataZoom數(shù)據(jù)區(qū)域縮放組件，用于控制數(shù)軸的顯示范圍。series數(shù)據(jù)系列，用于設(shè)置圖表的類型以及數(shù)據(jù)的內(nèi)容。visualMap視覺映射組件，用于將數(shù)據(jù)映射到顏色、大小等圖形屬性上。calendar日歷坐標系組件，用于實現(xiàn)日歷熱力圖。parallel平行坐標系組件，適用于高維數(shù)據(jù)可視化。parallelAxis平行坐標系的坐標軸組件。4.4Echarts組件的常用屬性

4.4.1

標題組件屬性說明text主標題文本的內(nèi)容。textStyle主標題文本的樣式。subtext副標題文本的內(nèi)容。subtextStyle副標題文本的樣式。left標題組件與容器左側(cè)的距離。top標題組件與容器上側(cè)的距離。標題組件（title）用于為圖表設(shè)置主、副標題

4.4.1

標題組件Echarts組件的布局屬性

4.4.2提示框組件屬性說明trigger觸發(fā)類型，取值可選：“item”、“axis”或“none”，其中“item”表示數(shù)據(jù)項觸發(fā)，適用于散點圖、餅圖等無類目軸的圖表；“axis”表示坐標軸觸發(fā)，適用于條形圖、折線圖等具備類目軸的圖表；“none”表示不觸發(fā)。formatter格式化器，支持字符串模板和回調(diào)函數(shù)兩種形式。axisPointer坐標軸指示器，是指示坐標軸當前刻度的工具，鼠標懸浮時顯示標線和刻度文本。axisPointer.type指示器類型，取值可選：“l(fā)ine”（直線指示器）、“shadow”（陰影指示器）、“cross”（十字準星指示器）、“none”（無指示器）。axisPointer.label坐標軸指示器的文本標簽。axisPointer.label.show是否顯示文本標簽，取值可選：“false”（隱藏，默認值）或“true”（顯示）。提示框組件（tooltip）用于彈窗顯示提示信息

4.4.3工具欄組件屬性說明show是否顯示，取值可選：“true”（顯示）和“false”（隱藏）。itemSize工具欄圖標的大小，單位為像素值。feature各種工具的相關(guān)配置，包含若干子屬性。feature.saveAsImage保存為圖片。feature.restore配置項還原。feature.dataView數(shù)據(jù)視圖，展現(xiàn)當前圖表所用的數(shù)據(jù)，支持動態(tài)更新。feature.dataZoom數(shù)據(jù)區(qū)域縮放，目前只支持平面直角坐標系。feature.magicType動態(tài)類型切換。工具欄組件（toolbox）提供了五個工具

4.4.4圖例組件屬性說明type圖例類型，取值可選：“plain”（普通）和“scroll”（可滾動翻頁）。orient布局方向，取值可選：“horizontal”（水平）和“vertical”（垂直）。textStyle圖例的公用文本樣式。formatter格式化器，支持字符串模板和回調(diào)函數(shù)兩種形式。data圖例對應(yīng)的數(shù)據(jù)系列，每個數(shù)組元素代表一個系列。若不設(shè)置data，則自動從當前系列中獲取。圖例組件（legend）用于表達數(shù)據(jù)與圖形的關(guān)聯(lián)

4.4.5網(wǎng)格組件屬性說明show是否顯示網(wǎng)格，取值可選：true（顯示）和false（隱藏，默認值）。width網(wǎng)格的寬度，默認值為auto（自適應(yīng)）。height網(wǎng)格的高度，默認值為auto（自適應(yīng)）。containLable網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽，常用于防止標簽溢出，取值可選：true（包含）和false（不包含，默認值）。網(wǎng)格組件（grid）用于定義坐標系網(wǎng)格的布局和樣式

4.4.6坐標軸組件屬性說明type坐標軸類型，取值可選：category（類目型）、value（數(shù)值型）、time（時間型）和log（對數(shù)型）。show是否顯示坐標軸，取值可選：true（顯示，默認值）和false（隱藏）。alignTicks是否開啟自動對齊刻度，取值可選：false（關(guān)閉，默認值）和true（開啟）。只對數(shù)值軸和對數(shù)軸有效。position坐標軸的位置。第一條橫軸默認為“bottom”，第一條縱軸默認為“l(fā)eft”。name坐標軸的名稱。nameTextStyle坐標軸名稱的文本樣式。坐標軸包括xAxis和yAxis

4.4.6坐標軸組件屬性說明boundaryGap坐標軸兩邊留白策略。類目軸和非類目軸的設(shè)置和表現(xiàn)不同：在類目軸中，取值為true（默認）和false，此時刻度僅作為分隔線。在非類目軸中，是一個具有兩個值的數(shù)組，分別表示數(shù)據(jù)最小值和最大值的延伸范圍，可以直接設(shè)置數(shù)值或百分比，在設(shè)置min和max后無效。min坐標軸標簽最小值，會自動根據(jù)具體數(shù)值進行調(diào)整。max坐標軸標簽最大值，會自動根據(jù)具體數(shù)值進行調(diào)整。splitNumber坐標軸的分割段數(shù)，只是一個預(yù)估值，實際顯示的段數(shù)會在此基礎(chǔ)上根據(jù)易讀程度作調(diào)整。在類目軸中無效。minInterval坐標軸刻度的最小間隔，僅對數(shù)值軸或時間軸有效。坐標軸組件的常用屬性

4.4.6坐標軸組件屬性說明maxInterval坐標軸刻度的最大間隔，僅對數(shù)值軸或時間軸有效。axisLabel坐標軸刻度標簽的相關(guān)設(shè)置，包含若干子屬性。axisLabel.rotate刻度標簽旋轉(zhuǎn)的角度，取值范圍是從-90°至90°。axisLabel.showMinLabel.是否顯示最小刻度的標簽，默認自動判定。axisLabel.showMaxLabel.是否顯示最大刻度的標簽，默認自動判定。axisPointer坐標軸指示器配置項，包含若干子屬性。axisPointer.label坐標軸指示器的文本標簽，包含若干子屬性。axisPointer.label.formatter文本標簽的格式化器，取值為字符串模板或回調(diào)函數(shù)。data類目數(shù)據(jù)，在類目軸中有效。坐標軸組件的常用屬性

4.4.7區(qū)域縮放組件屬性說明type組件類型，取值可選：inside（內(nèi)置型）和slider（滑動條型）。orient布局方向，取值可選：“horizontal”（水平）和“vertical”（垂直）。xAxisIndex設(shè)置區(qū)域縮放組件控制的x軸，值為坐標軸的編號。yAxisIndex設(shè)置區(qū)域縮放組件控制的y軸，值為坐標軸的編號。start數(shù)據(jù)窗口范圍的起始百分比，范圍是：0%~100%，與end屬性共同決定數(shù)據(jù)窗口的范圍。end數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0%~100%，與start屬性共同決定數(shù)據(jù)窗口的范圍。區(qū)域縮放組件（dataZoom）用于控制數(shù)軸的顯示范圍

4.4.8數(shù)據(jù)系列組件屬性說明type圖表的類型，例如：“bar”表示條形圖、“l(fā)ine”表示折線圖、“gauge”表示儀表盤、“parallel”表示平行坐標系、“map”表示地圖。name數(shù)據(jù)系列的名稱，用于提示框的顯示和圖例的篩選。data數(shù)據(jù)體，內(nèi)容為一數(shù)組。數(shù)據(jù)系列組件（series）用于設(shè)置圖表類型和數(shù)據(jù)內(nèi)容

本章首先介紹了前端渲染技術(shù)的基本概念，然后介紹了Echarts的基礎(chǔ)架構(gòu)，最后重點介紹了Echarts的常用組件和常用屬性。通過本章的學習，讀者將對Echarts框架形成整體性認識，了解Echarts常用組件和常用屬性的含義和功能，為后續(xù)的開發(fā)工作做好技術(shù)準備。本章小結(jié)THEENDTHANKS!第五章

條形圖GOAL學習目標1了解條形圖的概念、特點和應(yīng)用場景2了解靜態(tài)和動態(tài)圖表的概念、特點和開發(fā)技術(shù)3掌握利用Web前端開發(fā)技術(shù)制作靜態(tài)條形圖的方法4掌握綜合利用Web前后端開發(fā)技術(shù)制作動態(tài)條形圖的方法5掌握使用瀏覽器開發(fā)者工具進行程序調(diào)試的方法目錄Contents5.1條形圖簡介5.2靜態(tài)條形圖5.3動態(tài)條形圖5.4瀏覽器開發(fā)者工具的應(yīng)用5.1條形圖簡介

條形圖是一種常用的統(tǒng)計圖表，它用一系列長度不等的縱向或橫向條紋來表現(xiàn)數(shù)據(jù)的分布情況。條形圖的核心思想是對比，它利用人眼對高度差異敏感的特點，適合用來展示數(shù)據(jù)之間的差異。本課程擬使用條形圖展示2018年1月1日若干監(jiān)測站PM2.5濃度的日平均值，用于對比不同站點的PM2.5污染情況。5.1條形圖簡介5.2靜態(tài)條形圖

靜態(tài)條形圖屬于純前端的應(yīng)用程序，開發(fā)技術(shù)僅涉及HTML、CSS、JavaScript和Echarts。靜態(tài)條形圖的數(shù)據(jù)存儲在前端代碼中，系統(tǒng)的體系結(jié)構(gòu)比較簡單，開發(fā)難度相對較低，但同時功能也比較薄弱，適用于實驗環(huán)境中小規(guī)模數(shù)據(jù)集的可視化。靜態(tài)條形圖的開發(fā)過程包括準備工作、圖表制作、圖表展示三個階段。5.2靜態(tài)條形圖（1）創(chuàng)建項目目錄結(jié)構(gòu)5.2.1準備工作創(chuàng)建項目根目錄“AirPollution_Bar_Static”，以及“CSS”和“JS”目錄<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>靜態(tài)條形圖</title></head><body></body></html>5.2.1準備工作（2）創(chuàng)建HTML文檔新建“index.html”<scriptsrc="JS/echarts.js"></script>5.2.1準備工作（3）引入ECharts庫文件在“index.html”的“<head>”標簽中添加引用<divid="bar"></div>5.2.1準備工作（4）創(chuàng)建DOM容器在“index.html”的“<body>”標簽中定義“<div>”標簽body{background-color:black;/*將頁面背景顏色設(shè)置為黑色*/}#bar{position:absolute;left:15%;/*容器上邊框與頁面上側(cè)的距離為頁面寬度的15%*/top:15%;/*容器左邊框與頁面左側(cè)的距離為頁面高度的15%*/width:70%;/*設(shè)置容器的寬度占頁面寬度的70%*/height:70%;/*設(shè)置容器的寬度占頁面寬度的70%*/}5.2.1準備工作（5）設(shè)置元素樣式新建名為“main.css”的CSS文檔<linkrel="stylesheet"href="CSS/main.css"/>5.2.1準備工作（5）設(shè)置元素樣式在“index.html”的“<head>”標簽中添加鏈接x軸組件的數(shù)據(jù)體：["HD01","XT01","HS01","SJZ01","CZ01","BD01","LF01","TS01","QHD01","ZJK01","CD01"]數(shù)據(jù)系列組件的數(shù)據(jù)體：[89.36,149.95,140.07,84.82,101.87,71.02,63.88,66.33,30.39,21.25,16.25]5.2.1準備工作（6）數(shù)據(jù)準備為x軸組件和數(shù)據(jù)系列組件準備數(shù)據(jù)<scriptsrc="JS/bar.js"></script>5.2.2圖表制作（1）新建條形圖JS腳本新建“bar.js”，并在“index.html”的“<body>”標簽中添加引用

letcontainer=document.getElementById('bar');letmyBar=echarts.init(container,null,{renderer:"svg"});5.2.2圖表制作（2）初始化條形圖實例在“bar.js”中，使用“document.getElementById()”和“echarts.init()”方法title:{text:"PM2.5濃度對比條形圖",textStyle:{color:"lightgray",fontSize:28,},5.2.2圖表制作（3）設(shè)置條形圖配置項標題組件subtext:"監(jiān)測時間：2018年1月1日",subtextStyle:{color:"lightgray",fontSize:18,},left:"center",},tooltip:{axisPointer:{type:"shadow",label:{show:true,},},},5.2.2圖表制作（3）設(shè)置條形圖配置項提示框組件

toolbox:{

itemSize:24,

right:40,

feature:{

s