數(shù)據(jù)可視化技術與應用案例教程所有教學資源，我們給；所有復雜操作，我們做；圖書附贈，永久免費，只為老師用書更方便課件教案微課掃碼題庫建課互評考試平臺

學習工具目錄03Excel數(shù)據(jù)可視化04Tableau數(shù)據(jù)可視化05ECharts數(shù)據(jù)可視化06Python數(shù)據(jù)可視化01數(shù)據(jù)可視化基礎02數(shù)據(jù)可視化設計項目5ECharts數(shù)據(jù)可視化項目5

ECharts數(shù)據(jù)可視化項目導讀ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，它主要用于創(chuàng)建直觀、交互式、個性化的數(shù)據(jù)可視化圖表。本項目先介紹ECharts數(shù)據(jù)可視化的相關知識，然后使用ECharts實現(xiàn)某地區(qū)環(huán)境監(jiān)測數(shù)據(jù)可視化。項目目標知識目標技能目標素質(zhì)目標熟悉ECharts的特點，以及ECharts中常用的圖表。熟悉ECharts數(shù)據(jù)可視化的基本流程。熟悉ECharts圖表中的不同組件，包括標題、提示框、圖例、網(wǎng)格、坐標軸、數(shù)據(jù)系列、工具欄等。搭建ECharts數(shù)據(jù)可視化開發(fā)環(huán)境。能夠選擇合適的圖表展示不同的數(shù)據(jù)。能夠使用ECharts繪制不同的圖表，實現(xiàn)數(shù)據(jù)可視化。培養(yǎng)嚴謹細致、精益求精的工匠精神。提高運用所學知識和技能解決實際問題的能力。項目準備全班學生以3～5人為一組進行分組，各組選出組長。組長組織組員觀看“HTML簡介”視頻，討論并回答下列問題。問題1：簡述HTML的概念和功能？問題2：簡述HTML文件的結構？HTML簡介掃碼看微課呀！點擊播放微課5.1ECharts概述項目5

ECharts數(shù)據(jù)可視化5.1ECharts概述>5.1.1ECharts的特點特點說明圖表類型豐富ECharts提供了20多種圖表類型，并且支持圖與圖之間進行組合數(shù)據(jù)集成性強ECharts支持直接傳入二維表、鍵值對等多種格式的數(shù)據(jù)源圖表交互性強ECharts提供了豐富的交互功能，用戶可以對圖表進行縮放、數(shù)據(jù)篩選、排序等操作自定義程度高ECharts可以個性化定制圖表的組件，包括標題、提示框、圖例、網(wǎng)格、坐標軸、數(shù)據(jù)系列、工具欄等數(shù)據(jù)處理能力強ECharts能夠處理和展示千萬級的數(shù)據(jù)量跨平臺兼容使用ECharts制作的圖表能夠展示在不同的設備（如電腦、平板、手機）上ECharts是一款開源的數(shù)據(jù)可視化圖表庫。ECharts的功能豐富且自定義程度高，但是對于編程基礎薄弱的用戶來說，實現(xiàn)復雜的自定義功能可能比較困難。ECharts的特點5.1ECharts概述>5.1.2ECharts中常用的圖表ECharts中常用的圖表及其對應的名稱圖表英文名稱圖表英文名稱折線圖、面積圖line散點圖、氣泡圖scatter柱形圖、條形圖bar儀表盤gauge餅圖、環(huán)形圖pie熱力圖heatmap雷達圖radar地圖map5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建項目5

ECharts數(shù)據(jù)可視化5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.1下載ECharts文件在使用ECharts數(shù)據(jù)可視化圖表庫之前，需要先下載ECharts文件，其下載步驟如下。使用瀏覽器訪問ECharts的官網(wǎng)（），在打開的首頁中單擊“下載”下拉按鈕，在展開的下拉列表中選擇“下載”選項。步驟1在打開的“下載”頁面中單擊“在線定制”按鈕。步驟2選擇“下載”選項單擊“在線定制”按鈕5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.1下載ECharts文件在使用ECharts數(shù)據(jù)可視化圖表庫之前，需要先下載ECharts文件，其下載步驟如下。在打開的“在線定制”頁面中單擊“選擇版本”下拉列表框，在展開的下拉列表中選擇“5.5.0”選項；然后在“圖表”區(qū)域、“坐標系”區(qū)域、“組件”區(qū)域選擇所有選項；接著在“其他選項”區(qū)域取消勾選“代碼壓縮”復選框；最后單擊“下載”按鈕。步驟3下載完成后，打開文件的存儲路徑可以查看下載的ECharts文件“echarts.js”。步驟45.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCodeVisualStudioCode免費、開源、跨平臺的代碼編輯器功能代碼補全語法檢查代碼高亮顯示Git版本控制在實際開發(fā)中，通常需要使用開發(fā)工具編寫ECharts可視化代碼，以提高編程效率。5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCodeVSCode作為開發(fā)工具，其安裝步驟如下。使用瀏覽器訪問VSCode的官網(wǎng)（），在打開的首頁中選擇“Updates”選項。步驟1選擇“Updates”選項5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode在打開的VSCode歷史版本頁面左側選擇“September2024”選項，然后單擊“x64”鏈接文字，下載VSCode安裝文件。步驟2下載VSCode安裝文件5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode下載完成后，雙擊下載的“VSCodeUserSetup-x64-1.94.2.exe”文件，打開“安裝-MicrosoftVisualStudioCode（User）”對話框，進入“許可協(xié)議”界面，選中“我同意此協(xié)議”單選鈕，單擊“下一步”按鈕。步驟3設置許可協(xié)議5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode進入“選擇目標位置”界面，單擊“瀏覽”按鈕，選擇合適的安裝位置，單擊“下一步”按鈕。步驟4設置安裝位置進入新的界面，保持界面默認設置，連續(xù)單擊“下一步”按鈕，最后單擊“安裝”按鈕，開始安裝。步驟55.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode安裝完成后，在“VisualStudioCode安裝完成”界面中單擊“完成”按鈕。步驟6選擇主題顏色啟動VSCode編輯器，默認進入“Welcome”界面，選擇“LightModern”主題顏色（默認為“DarkModern”）。步驟75.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode選擇界面左側的“Extensions”選項，打開“EXTENSIONS：MARKETPLACE”側邊欄，在搜索框中輸入“Chinese”并按“Enter”鍵，單擊第1個選項的“Install”按鈕，安裝適用于VSCode編輯器的中文語言插件。步驟8安裝中文語言插件5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode在搜索框中輸入“openinbrowser”并按“Enter”鍵，單擊第1個選項的“Install”按鈕，安裝用于打開HTML文件的插件。步驟9安裝用于打開HTML文件的插件5.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode重啟VSCode編輯器，該編輯器默認使用的英文即可變?yōu)橹形摹２襟E10在計算機的合適位置新建“BOOKCODE”文件夾（此處文件夾的路徑為“D\素材與實例\項目5\BOOKCODE”），用于存放ECharts文件和本項目中創(chuàng)建的HTML文件；在該文件夾中新建“js”文件夾，并將下載的“echarts.js”文件移到新建的“js”文件夾中。步驟115.2ECharts數(shù)據(jù)可視化開發(fā)環(huán)境的搭建>5.2.2安裝和使用VSCode在VSCode編輯器的菜單欄中單擊“文件”按鈕，在展開的列表中選擇“打開文件夾”選項；在打開的“打開文件夾”對話框中選擇“BOOKCODE”文件夾，單擊“選擇文件夾”按鈕。步驟12打開用于存放代碼文件的文件夾5.3ECharts數(shù)據(jù)可視化的基本流程項目5

ECharts數(shù)據(jù)可視化5.3ECharts數(shù)據(jù)可視化的基本流程引入ECharts文件初始化ECharts實例顯示圖表創(chuàng)建容器設置圖表的配置項運行代碼5.3ECharts數(shù)據(jù)可視化的基本流程在HTML文件中使用<script>標簽的src屬性引入ECharts文件，以便在后續(xù)的代碼中調(diào)用ECharts提供的各類API，實現(xiàn)不同的功能。引入ECharts文件的示例代碼如下。（1）引入ECharts文件<scriptsrc="path/to/echarts.js"></script>“path/to/echarts.js”需要替換為ECharts文件“echarts.js”的實際存放路徑或該文件的網(wǎng)絡鏈接。引入ECharts文件的方法：①本地引入。先下載ECharts文件，然后在<script>標簽中指定存放ECharts文件的本地路徑。②內(nèi)容分發(fā)網(wǎng)絡（contentdeliverynetwork,CDN）引入。直接在<script>標簽中指定ECharts文件的網(wǎng)絡鏈接。高手點撥<divid="main"style="width:600px;height:400px;"></div>5.3ECharts數(shù)據(jù)可視化的基本流程在HTML文件的<body>標簽中使用<div>標簽創(chuàng)建一個用于放置圖表的容器，示例代碼如下。（2）創(chuàng)建容器id屬性用于唯一標識一個<div>標簽；style屬性用于設置容器的樣式（如寬和高），該容器的大小決定了圖表的大小。5.3ECharts數(shù)據(jù)可視化的基本流程引入ECharts文件后，系統(tǒng)會自動創(chuàng)建一個全局對象echarts，使用echarts對象提供的init()方法可以初始化一個ECharts實例，并綁定創(chuàng)建的容器。初始化ECharts實例的示例代碼如下。（3）初始化ECharts實例document.getElementById()方法可以通過標簽的id屬性值獲取特定的HTML標簽。varmyChart=echarts.init(document.getElementById('main'));5.3ECharts數(shù)據(jù)可視化的基本流程配置項（option）是ECharts圖表的核心，它決定了圖表的各種組件。其中，組件通常包括標題、提示框、圖例、網(wǎng)格、坐標軸、數(shù)據(jù)系列、工具欄等。（4）設置圖表的配置項varoption={ //標題組件 title:{ text:'ECharts入門示例' }, //提示框組件 tooltip:{}, //圖例組件 legend:{ data:['銷量']

},5.3ECharts數(shù)據(jù)可視化的基本流程（4）設置圖表的配置項

//網(wǎng)格組件 grid:{ left:'3%', right:'4%', bottom:'3%' }, //X軸組件 xAxis:{ data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子'] }, //Y軸組件 yAxis:{},

5.3ECharts數(shù)據(jù)可視化的基本流程（4）設置圖表的配置項

//數(shù)據(jù)系列組件 series:[ { name:'銷量', type:'bar', data:[5,20,36,10,10,20] } ], //工具欄組件 toolbox:{ show:true, feature:{ saveAsImage:{show:true} } }}5.3ECharts數(shù)據(jù)可視化的基本流程調(diào)用ECharts實例的setOption()方法根據(jù)傳入的配置項來顯示圖表，示例代碼如下。（5）顯示圖表當需要在一個網(wǎng)頁中展示多個圖表時，只需創(chuàng)建多個容器，初始化多個ECharts實例，設置多個圖表的配置項，然后顯示多個圖表即可。高手點撥使用瀏覽器運行HTML文件，在網(wǎng)頁中展示圖表。（6）運行代碼myChart.setOption(option);5.4ECharts圖表中的組件項目5

ECharts數(shù)據(jù)可視化title:{ text:'圖表主標題', //設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’,

//設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 }, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。title:{

text:'圖表主標題', //設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’,

//設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 }, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。text：用于設置圖表的主標題名稱。title:{ text:'圖表主標題', //設置圖表的主標題名稱

subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’,

//設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 }, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。subtext：用于設置圖表的副標題名稱。title:{ text:'圖表主標題', //設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱

left:‘center’,

//設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 }, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。

left：用于設置標題與容器左側的距離。

該屬性的值可以是auto（自適應，默認值）、left（左側）、center（居中）或right（右側）；也可以是百分比（如10%），表示標題在容器寬度的10%處顯示；還可以是具體的像素值（如10px）。title:{ text:'圖表主標題', //設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’, //設置標題與容器左側的距離

top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 }, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。

top：用于設置標題與容器頂部的距離。該屬性的值可以是auto（默認值）、top（頂部）、middle（居中）或bottom（底部）等；也可以是百分比；還可以是具體的像素值。title:{ text:'圖表主標題', //設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’, //設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離

textStyle:{

//設置標題的文本樣式

color:'#000000', //字體顏色

fontSize:20,

//字體大小

fontWeight:'bold'

//字體粗細

}, show:true //設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。

textStyle：用于設置標題的文本樣式。

常見的文本樣式有字體顏色（color）、字體大?。╢ontSize）、字體粗細（fontWeight）等。title:{ text:'圖表主標題',

//設置圖表的主標題名稱 subtext:'圖表副標題', //設置圖表的副標題名稱 left:‘center’,

//設置標題與容器左側的距離 top:'top', //設置標題與容器頂部的距離 textStyle:{ //設置標題的文本樣式 color:'#000000', //字體顏色 fontSize:20, //字體大小 fontWeight:'bold' //字體粗細 },

show:true

//設置是否顯示標題}5.4ECharts圖表中的組件>5.4.1標題標題（title）包含主標題和副標題。設置標題的示例代碼如下。

show：用于設置是否顯示標題。

該屬性的值為true（默認值）或false。其中，true表示顯示標題；false表示不顯示標題。tooltip:{

trigger:'item',

//設置提示框的觸發(fā)類型

axisPointer:{type:'line'}, //設置坐標軸的指示器

formatter:'<br/>{a}:{c}' //設置提示框浮層內(nèi)容格式器}

trigger：item（數(shù)據(jù)項圖形觸發(fā)）表示當鼠標指針懸停在圖表的數(shù)據(jù)項（如散點圖的點、餅圖的扇形）上時觸發(fā)提示框，主要在散點圖、餅圖等無類目軸的圖表中使用；axis（坐標軸觸發(fā)）表示當鼠標指針懸停在圖表中的某個數(shù)據(jù)點上時觸發(fā)提示框，主要在折線圖、柱形圖等有類目軸的圖表中使用；none表示不觸發(fā)提示框。5.4ECharts圖表中的組件>5.4.2提示框當用戶將鼠標指針懸停在圖表的數(shù)據(jù)項或數(shù)據(jù)點上時，提示框（tooltip）可以顯示該數(shù)據(jù)項或數(shù)據(jù)點的詳細信息。設置提示框的示例代碼如下。tooltip:{ trigger:

'item', //設置提示框的觸發(fā)類型

axisPointer:{type:'line'},//設置坐標軸的指示器

formatter:'<br/>{a}:{c}' //設置提示框浮層內(nèi)容格式器}

axisPointer：用于設置坐標軸的指示器。坐標軸指示器是指示鼠標指針當前位置的工具。

type屬性用于設置指示器的類型，該屬性的值為line（直線指示器）、shadow（陰影指示器）、none（無指示器）或cross（十字準星指示器）等。5.4ECharts圖表中的組件>5.4.2提示框當用戶將鼠標指針懸停在圖表的數(shù)據(jù)項或數(shù)據(jù)點上時，提示框（tooltip）可以顯示該數(shù)據(jù)項或數(shù)據(jù)點的詳細信息。設置提示框的示例代碼如下。tooltip:{ trigger:

'item', //設置提示框的觸發(fā)類型

axisPointer:{type:'line'}, //設置坐標軸的指示器

formatter:'<br/>{a}:{c}'

//設置提示框浮層內(nèi)容格式器}

formatter：用于設置提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。通常采用字符串模板形式，常用的字符串模板變量包括{a}、、{c}、yeftobp等。

當trigger屬性的值為axis時，會提示多個數(shù)據(jù)系列的數(shù)據(jù)，此時可以通過{a0}、{a1}、{a2}這種加索引的方式表示不同的數(shù)據(jù)系列名稱。5.4ECharts圖表中的組件>5.4.2提示框當用戶將鼠標指針懸停在圖表的數(shù)據(jù)項或數(shù)據(jù)點上時，提示框（tooltip）可以顯示該數(shù)據(jù)項或數(shù)據(jù)點的詳細信息。設置提示框的示例代碼如下。5.4ECharts圖表中的組件>5.4.2提示框在不同的圖表類型中，變量{a}、、{c}、unrdnmu的含義不同。①在折線圖、面積圖、柱形圖、條形圖中，變量{a}表示數(shù)據(jù)系列名稱；變量表示類目值；變量{c}表示數(shù)據(jù)值；沒有變量ehozfop。②在散點圖、氣泡圖中，變量{a}表示數(shù)據(jù)系列名稱；變量表示數(shù)據(jù)名稱；變量{c}表示數(shù)據(jù)數(shù)組；沒有變量dkgvnmp。③在餅圖、儀表盤中，變量{a}表示數(shù)據(jù)系列名稱；變量表示數(shù)據(jù)項名稱；變量{c}表示數(shù)據(jù)值；變量uufjhnp表示百分比。高手點撥5.4ECharts圖表中的組件>5.4.3圖例圖例（legend）用于說明不同數(shù)據(jù)系列的標識。設置圖例的示例代碼如下。legend:{

type:'plain',

//設置圖例的類型

left:'60%', //設置圖例與容器左側的距離

top:'top', //設置圖例與容器頂部的距離

orient:'vertical', //設置圖例列表的布局朝向

data:['銷量','進貨量'] //設置圖例的文本}

type：plain表示普通圖例；scroll表示可滾動翻頁的圖例。5.4ECharts圖表中的組件>5.4.3圖例圖例（legend）用于說明不同數(shù)據(jù)系列的標識。設置圖例的示例代碼如下。legend:{ type:'plain', //設置圖例的類型

left:'60%', //設置圖例與容器左側的距離

top:'top', //設置圖例與容器頂部的距離

orient:'vertical',

//設置圖例列表的布局朝向

data:['銷量','進貨量'] //設置圖例的文本}

orient：用于設置圖例列表的布局朝向。horizontal表示水平方向；vertical表示垂直方向。5.4ECharts圖表中的組件>5.4.3圖例圖例（legend）用于說明不同數(shù)據(jù)系列的標識。設置圖例的示例代碼如下。legend:{ type:'plain', //設置圖例的類型

left:'60%', //設置圖例與容器左側的距離

top:'top', //設置圖例與容器頂部的距離

orient:'vertical',

//設置圖例列表的布局朝向

data:['銷量','進貨量'] //設置圖例的文本}

data：

用于設置圖例的文本，該屬性的值為數(shù)組，數(shù)組中的元素與數(shù)據(jù)系列名稱一一對應。5.4ECharts圖表中的組件>5.4.4網(wǎng)格網(wǎng)格（grid）用于定義圖表繪制區(qū)域的布局和樣式。需要注意的是，在直角坐標系中才能設置網(wǎng)格。設置網(wǎng)格的示例代碼如下。grid:{ left:'10%', //設置網(wǎng)格組件與容器左側的距離

top:60, //設置網(wǎng)格組件與容器頂部的距離

containLabel:true, //設置網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽

width:'auto', //設置網(wǎng)格的寬度

height:'auto', //設置網(wǎng)格的高度

backgroundColor:‘transparent'

//設置網(wǎng)格的背景顏色}5.4ECharts圖表中的組件>5.4.4網(wǎng)格網(wǎng)格（grid）用于定義圖表繪制區(qū)域的布局和樣式。需要注意的是，在直角坐標系中才能設置網(wǎng)格。設置網(wǎng)格的示例代碼如下。grid:{ left:'10%', //設置網(wǎng)格組件與容器左側的距離

top:60, //設置網(wǎng)格組件與容器頂部的距離

containLabel:true,

//設置網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽

width:'auto', //設置網(wǎng)格的寬度

height:'auto', //設置網(wǎng)格的高度

backgroundColor:'transparent'//設置網(wǎng)格的背景顏色}

containLabel：true表示網(wǎng)格區(qū)域包含坐標軸的刻度標簽，防止刻度標簽的長度動態(tài)變化時，刻度標簽溢出容器或覆蓋其他組件；false表示網(wǎng)格區(qū)域不包含坐標軸的刻度標簽。5.4ECharts圖表中的組件>5.4.4網(wǎng)格網(wǎng)格（grid）用于定義圖表繪制區(qū)域的布局和樣式。需要注意的是，在直角坐標系中才能設置網(wǎng)格。設置網(wǎng)格的示例代碼如下。grid:{ left:'10%', //設置網(wǎng)格組件與容器左側的距離

top:60, //設置網(wǎng)格組件與容器頂部的距離

containLabel:true, //設置網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽

width:'auto',

//設置網(wǎng)格的寬度

height:'auto', //設置網(wǎng)格的高度

backgroundColor:'transparent'//設置網(wǎng)格的背景顏色}

width：用于設置網(wǎng)格的寬度，默認值為auto（自適應）。5.4ECharts圖表中的組件>5.4.4網(wǎng)格網(wǎng)格（grid）用于定義圖表繪制區(qū)域的布局和樣式。需要注意的是，在直角坐標系中才能設置網(wǎng)格。設置網(wǎng)格的示例代碼如下。grid:{ left:'10%', //設置網(wǎng)格組件與容器左側的距離

top:60, //設置網(wǎng)格組件與容器頂部的距離

containLabel:true, //設置網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽

width:'auto', //設置網(wǎng)格的寬度

height:'auto', //設置網(wǎng)格的高度

backgroundColor:'transparent'//設置網(wǎng)格的背景顏色}

height：用于設置網(wǎng)格的高度，默認值為auto。5.4ECharts圖表中的組件>5.4.4網(wǎng)格網(wǎng)格（grid）用于定義圖表繪制區(qū)域的布局和樣式。需要注意的是，在直角坐標系中才能設置網(wǎng)格。設置網(wǎng)格的示例代碼如下。grid:{ left:'10%', //設置網(wǎng)格組件與容器左側的距離

top:60, //設置網(wǎng)格組件與容器頂部的距離

containLabel:true, //設置網(wǎng)格區(qū)域是否包含坐標軸的刻度標簽

width:'auto', //設置網(wǎng)格的寬度

height:'auto', //設置網(wǎng)格的高度

backgroundColor:'transparent'//設置網(wǎng)格的背景顏色}

backgroundColor：用于設置網(wǎng)格的背景顏色，默認值為transparent（透明）。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{ type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35, //設置坐標軸名稱與軸線之間的距離

nameTextStyle:{ //設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15, //字體大小

fontWeight:'bold' //字體粗細

},5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{

type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35, //設置坐標軸名稱與軸線之間的距離

nameTextStyle:{ //設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15, //字體大小

fontWeight:'bold' //字體粗細

},

type：用于設置坐標軸的類型。該屬性的值為value（數(shù)值軸）、category（類目軸）、time（時間軸）或log（對數(shù)軸）等。X軸的默認值為category，category適用于離散的類目數(shù)據(jù)，該類目數(shù)據(jù)可以使用X軸組件中的data屬性進行設置，也可以從數(shù)據(jù)系列的data屬性中獲取；Y軸的默認值為value。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{ type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35, //設置坐標軸名稱與軸線之間的距離

nameTextStyle:{ //設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15, //字體大小

fontWeight:'bold' //字體粗細

},

name：用于設置坐標軸的名稱。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{ type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35, //設置坐標軸名稱與軸線之間的距離

nameTextStyle:{ //設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15, //字體大小

fontWeight:'bold' //字體粗細

},

nameLocation：用于設置坐標軸名稱的顯示位置。該屬性的值為start（起始）、middle（居中）、center（居中）或end（末尾，默認值）等。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{ type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35,

//設置坐標軸名稱與軸線之間的距離

nameTextStyle:{ //設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15, //字體大小

fontWeight:'bold' //字體粗細

},

nameGap：用于設置坐標軸名稱與軸線之間的距離。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。xAxis:{ type:'category', //設置坐標軸的類型

name:'橫坐標軸名稱', //設置坐標軸的名稱

nameLocation:'center', //設置坐標軸名稱的顯示位置

nameGap:35, //設置坐標軸名稱與軸線之間的距離

nameTextStyle:{

//設置坐標軸名稱的文本樣式

color:'#000000', //字體顏色

fontSize:15,

//字體大小

fontWeight:'bold' //字體粗細

},}

nameTextStyle：用于設置坐標軸名稱的文本樣式。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。axisLine:{ //設置坐標軸的軸線

show:true, //是否顯示坐標軸軸線

onZero:true, //X軸的軸線是否在Y軸的0刻度上

lineStyle:{ //軸線的樣式

color:'#000000' } }, axisLabel:{ //設置坐標軸的刻度標簽

interval:'auto', //刻度標簽的顯示間隔

inside:false, //刻度標簽是否朝內(nèi)

rotate:45 //刻度標簽旋轉的角度

}, //設置坐標軸刻度標簽文本

data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。axisLine:{ //設置坐標軸的軸線

show:true,

//是否顯示坐標軸軸線

onZero:true,

//X軸的軸線是否在Y軸的0刻度上

lineStyle:{

//軸線的樣式

color:'#000000'

}

}, axisLabel:{ //設置坐標軸的刻度標簽

interval:'auto', //刻度標簽的顯示間隔

inside:false, //刻度標簽是否朝內(nèi)

rotate:45 //刻度標簽旋轉的角度

}, //設置坐標軸刻度標簽文本

data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},

axisLine：用于設置坐標軸的軸線。show屬性用于設置是否顯示坐標軸軸線；onZero屬性用于設置X軸或Y軸的軸線是否在另一個軸的0刻度上，該屬性只有在另一個軸為數(shù)值軸且包含0刻度時有效；lineStyle屬性用于設置軸線的樣式。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。axisLine:{ //設置坐標軸的軸線

show:true, //是否顯示坐標軸軸線

onZero:true, //X軸的軸線是否在Y軸的0刻度上

lineStyle:{ //軸線的樣式

color:'#000000' } },

axisLabel:{

//設置坐標軸的刻度標簽

interval:'auto', //刻度標簽的顯示間隔

inside:false,

//刻度標簽是否朝內(nèi)

rotate:45

//刻度標簽旋轉的角度

}, //設置坐標軸刻度標簽文本

data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},

axisLabel：用于設置坐標軸的刻度標簽。interval屬性用于設置刻度標簽的顯示間隔，默認值為auto，該屬性值為0時，表示顯示所有刻度標簽，屬性值為1時，表示隔1個刻度標簽顯示1個刻度標簽，inside屬性用于設置刻度標簽是否朝內(nèi)，該屬性的值為true或false（默認值），當屬性值為true時，表示刻度標簽朝內(nèi)；rotate屬性用于設置刻度標簽旋轉的角度，旋轉角度的范圍為-90度到90度。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。axisLine:{ //設置坐標軸的軸線

show:true, //是否顯示坐標軸軸線

onZero:true, //X軸的軸線是否在Y軸的0刻度上

lineStyle:{ //軸線的樣式

color:'#000000' } }, axisLabel:{ //設置坐標軸的刻度標簽

interval:'auto', //刻度標簽的顯示間隔

inside:false, //刻度標簽是否朝內(nèi)

rotate:45 //刻度標簽旋轉的角度

}, //設置坐標軸刻度標簽文本

data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},

data：用于設置坐標軸刻度標簽文本，該屬性的值為數(shù)組。5.4ECharts圖表中的組件>5.4.5坐標軸在直角坐標系中，設置X軸（xAxis）和Y軸（yAxis）的示例代碼如下。//X軸組件和Y軸組件的屬性基本一致，以下只列舉Y軸組件的部分屬性

yAxis:{ type:'value', name:'縱坐標軸名稱', nameLocation:'center', nameGap:40}

5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 series:[ { name:'銷量', //設置數(shù)據(jù)系列的名稱

colorBy:'series', //設置從調(diào)色盤中取色的策略

label:{ //設置圖形上的文本標簽

show:true, //是否顯示文本標簽

distance:5, //文本標簽與圖形的距離

color:'#000000', //文本標簽的顏色

position:'inside' //文本標簽的顯示位置

},5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 itemStyle:{ //設置圖形的樣式

color:'#FFFFFF', //圖形的顏色

borderColor:'#000000', //圖形的邊框顏色

borderWidth:2 //圖形的邊框?qū)挾?/p>

},

emphasis:{ //設置高亮狀態(tài)下的樣式

itemStyle:{ //設置圖形的樣式

shadowBlur:10, //陰影的模糊大小

shadowOffsetX:0, //陰影的水平偏移量

shadowColor:'#828282‘//陰影的顏色

} },5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。

data:[820,932,901,934,1290,1330],

type:'bar' //設置圖表的類型

}, {

name:'進貨量',

colorBy:'series',

data:[920,952,950,999,1500,1750],

type:'bar' }]5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 series:[ {

name:'銷量',

//設置數(shù)據(jù)系列的名稱

colorBy:'series', //設置從調(diào)色盤中取色的策略

label:{ //設置圖形上的文本標簽

show:true, //是否顯示文本標簽

distance:5, //文本標簽與圖形的距離

color:'#000000', //文本標簽的顏色

position:'inside' //文本標簽的顯示位置

},

name：用于設置數(shù)據(jù)系列的名稱。5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 series:[ { name:'銷量', //設置數(shù)據(jù)系列的名稱

colorBy:'series',

//設置從調(diào)色盤中取色的策略

label:{ //設置圖形上的文本標簽

show:true, //是否顯示文本標簽

distance:5, //文本標簽與圖形的距離

color:'#000000', //文本標簽的顏色

position:'inside' //文本標簽的顯示位置

},colorBy：用于設置從調(diào)色盤中取色的策略。series表示按照數(shù)據(jù)系列分配調(diào)色盤中的顏色，同一數(shù)據(jù)系列中的所有數(shù)據(jù)都使用相同的顏色；data表示按照數(shù)據(jù)項分配調(diào)色盤中的顏色，每個數(shù)據(jù)項都使用不同的顏色。5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 series:[ { name:'銷量', //設置數(shù)據(jù)系列的名稱

colorBy:'series', //設置從調(diào)色盤中取色的策略

label:{

//設置圖形上的文本標簽

show:true,

//是否顯示文本標簽

distance:5,

//文本標簽與圖形的距離

color:'#000000',

//文本標簽的顏色

position:'inside' //文本標簽的顯示位置

},

label：用于設置圖形上的文本標簽，顯示圖形的一些數(shù)據(jù)信息，如名稱、值等。show屬性用于設置是否顯示文本標簽；distance屬性用于設置文本標簽與圖形元素的距離；color屬性用于設置文本標簽的顏色；position屬性用于設置文本標簽的顯示位置，該屬性的值為top、left、right、bottom、inside、insideLeft、insideRight、insideTop或insideBottom等。5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。

itemStyle:{

//設置圖形的樣式

color:'#FFFFFF',

//圖形的顏色

borderColor:'#000000',

//圖形的邊框顏色

borderWidth:2

//圖形的邊框?qū)挾?/p>

},

emphasis:{ //設置高亮狀態(tài)下的樣式

itemStyle:{ //設置圖形的樣式

shadowBlur:10, //陰影的模糊大小

shadowOffsetX:0, //陰影的水平偏移量

shadowColor:'#828282‘//陰影的顏色

} },

itemStyle：用于設置圖形的樣式。color屬性用于設置圖形的顏色，不設置該屬性時，默認從調(diào)色盤中獲取顏色；borderColor屬性用于設置圖形的邊框顏色；borderWidth屬性用于設置圖形的邊框?qū)挾取?.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 itemStyle:{

//設置圖形的樣式

color:'#FFFFFF',

//圖形的顏色

borderColor:'#000000', //圖形的邊框顏色

borderWidth:2

//圖形的邊框?qū)挾?/p>

}, emphasis:{

//設置高亮狀態(tài)下的樣式

itemStyle:{

//設置圖形的樣式

shadowBlur:10,

//陰影的模糊大小

shadowOffsetX:0,

//陰影的水平偏移量

shadowColor:'#828282'//陰影的顏色

}

},

emphasis：用于設置高亮狀態(tài)下的樣式。itemStyle屬性用于設置高亮狀態(tài)下圖形的樣式。5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。

data:[820,932,901,934,1290,1330],

type:'bar' //設置圖表的類型},{

name:'進貨量',

colorBy:'series',

data:[920,952,950,999,1500,1750],

type:'bar'}]

data：用于設置數(shù)據(jù)系列的數(shù)據(jù)，該屬性的值為數(shù)組。5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每個圖表可以包含多個數(shù)據(jù)系列（series），多個數(shù)據(jù)系列包含在中括號里，每個數(shù)據(jù)系列包含在大括號里。設置數(shù)據(jù)系列的示例代碼如下。 data:[820,932,901,934,1290,1330],

type:'bar'

//設置圖表的類型

},{

name:'進貨量',

colorBy:'series',

data:[920,952,950,999,1500,1750],

type:'bar' }]

type：用于設置圖表的類型。該屬性的常用值見表。圖表英文名稱圖表英文名稱折線圖、面積圖line散點圖、氣泡圖scatter柱形圖、條形圖bar儀表盤gauge餅圖、環(huán)形圖pie熱力圖heatmap雷達圖radar地圖map5.4ECharts圖表中的組件>5.4.6數(shù)據(jù)系列每種圖表的數(shù)據(jù)系列組件的屬性有所差異，讀者可在ECharts官網(wǎng)的文檔中自行查看每種圖表數(shù)據(jù)系列組件的詳細屬性。設置各組件的數(shù)據(jù)的方法：手動輸入數(shù)據(jù)；使用AJAX或fetch動態(tài)獲取外部數(shù)據(jù)。在實際應用中，通常使用第2種方式獲取數(shù)據(jù)。高手點撥5.4ECharts圖表中的組件>5.4.7工具欄工具欄導出圖片將圖表導出為圖片數(shù)據(jù)視圖打開數(shù)據(jù)視圖，在數(shù)據(jù)視圖中可以查看和編輯數(shù)據(jù)動態(tài)類型切換將當前圖表類型切換為其他圖表類型數(shù)據(jù)區(qū)域縮放對圖表中的特定數(shù)據(jù)區(qū)域進行縮放操作重置將圖表還原至初始狀態(tài)5.4ECharts圖表中的組件>5.4.

7工具欄設置工具欄的示例代碼toolbox:{

show:true, //設置是否顯示工具欄

orient:'horizontal', //設置工具欄的布局朝向

top:'0%', //設置工具欄與容器頂部的距離

itemSize:15, //設置工具欄中每項工具按鈕的圖標大小

itemGap:8, //設置工具欄中每項工具按鈕之間的距離

feature:{ //設置各工具配置項

//導出圖片工具

saveAsImage:{show:true}, //數(shù)據(jù)視圖工具

dataView:{show:true,readOnly:false}, //動態(tài)類型切換工具

magicType:{show:true,type:['line','bar']}, //數(shù)據(jù)區(qū)域縮放工具

dataZoom:{show:true}, //重置工具

restore:{show:true} }}5.4ECharts圖表中的組件>5.4.

7工具欄feature:{

//設置各工具配置項

//導出圖片工具

saveAsImage:{show:true},

//數(shù)據(jù)視圖工具

dataView:{show:true,readOnly:false},

//動態(tài)類型切換工具

magicType:{show:true,type:['line','bar']},

//數(shù)據(jù)區(qū)域縮放工具

dataZoom:{show:true},

//重置工具

restore:{show:true}

}feature：用于設置各工具配置項。saveAsImage屬性用于設置導出圖片工具；dataView屬性用于設置數(shù)據(jù)視圖工具，該屬性中的readOnly屬性用于設置數(shù)據(jù)視圖中的數(shù)據(jù)是否為只讀；magicType屬性用于設置動態(tài)類型切換工具，該屬性中的type屬性用于設置可切換的圖表類型，包括line（折線圖）、bar（簇狀柱形圖）和stack（堆積模式）等；dataZoom屬性用于設置數(shù)據(jù)區(qū)域縮放工具；restore屬性用于設置重置工具。5.5使用ECharts繪制圖表項目5

ECharts數(shù)據(jù)可視化5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖使用ECharts繪制圖表本質(zhì)上就是組合和配置各種組件，從而直觀地展示不同的數(shù)據(jù)，實現(xiàn)數(shù)據(jù)可視化。使用ECharts繪制折線圖與面積圖時，需要將數(shù)據(jù)系列組件中type屬性的值設置為line。在折線圖的數(shù)據(jù)系列組件中添加areaStyle屬性，即可繪制面積圖，示例代碼如下。series:[ {

name:'最高氣溫',

type:'line',

areaStyle:{ //設置區(qū)域的填充樣式

color:'#FFF5EE', //區(qū)域的填充顏色

opacity:0.3 //區(qū)域的透明度

},

data:[17,13,19,17,11,7,11] }]5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖

areaStyle：屬性用于設置區(qū)域的填充樣式。color屬性用于設置區(qū)域的填充顏色；opacity屬性用于設置區(qū)域的透明度。series:[ {

name:'最高氣溫',

type:'line',

areaStyle:{

//設置區(qū)域的填充樣式

color:'#FFF5EE', //區(qū)域的填充顏色

opacity:0.3

//區(qū)域的透明度

},

data:[17,13,19,17,11,7,11] }]5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖【例5-1】繪制折線圖，展示該地區(qū)一周的氣溫變化。某地區(qū)一周的氣溫日期周一周二周三周四周五周六周日最高氣溫1713191711711最低氣溫5111071?2?1（單位：°C）5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖新建文件夾在VSCode編輯器的資源管理器中單擊“新建文件夾”按鈕，在打開的編輯框中輸入“l(fā)ine”并按“Enter”鍵。步驟1新建文件右擊“l(fā)ine”文件夾，在彈出的快捷菜單中選擇“新建文件”選項，在打開的編輯框中輸入“l(fā)ine_basic.html”并按“Enter”鍵。步驟2新建文件夾新建文件5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖界面顯示打開的“l(fā)ine_basic.html”文件，在該文件中編寫代碼。參考代碼如下。步驟3<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"> <!--引入ECharts文件--> <scriptsrc="../js/echarts.js"></script></head>5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖<body> <!--創(chuàng)建容器--> <divid="main"style="width:600px;height:400px"></div> <script>

//初始化ECharts實例

varmyChart=echarts.init(document.getElementById('main')); //設置圖表的配置項

varoption={ //標題組件，設置圖表的主標題名稱

title:{text:'某地區(qū)一周的氣溫變化折線圖'}, //提示框組件，設置提示框的觸發(fā)類型為坐標軸觸發(fā)

tooltip:{trigger:'axis'}, //圖例組件，說明不同數(shù)據(jù)系列的標識 legend:{ left:'left', //設置圖例在容器的左側顯示

top:'8%', //設置圖例在容器高度的8%處顯示

//設置圖例的文本，需要與數(shù)據(jù)系列名稱一一對應

data:['最高氣溫','最低氣溫'] },5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖//X軸組件xAxis:{type:'category', //設置X軸的類型為類目軸name:'日期', //設置X軸的名稱nameLocation:'center', //設置X軸名稱居中顯示nameGap:35, //設置X軸名稱與軸線之間的距離為35px//設置坐標軸刻度標簽文本data:['周一','周二','周三','周四','周五','周六','周日']}, //Y軸組件

yAxis:{type:'value', //設置Y軸的類型為數(shù)值軸name:'氣溫（℃）',nameLocation:'center',nameGap:30},5.5使用ECharts繪制圖表>5.5.1折線圖與面積圖//數(shù)據(jù)系列組件series:[{

name:'最高氣溫', //設置數(shù)據(jù)系列的名稱

type:'line', //設置圖表的類型為折線圖

data:[17,13,19,17,11,7,11]