Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.1定義圖表容器及指定圖表大小2.1.1初始化圖表1．在HTML文件中定義有寬度和高度的父容器（推薦）通常來說，需要在HTML文件中定義一個<div>節(jié)點，并且通過CSS為該節(jié)點指定寬度和高度。初始化的時候，傳入該節(jié)點，圖表的大小默認(rèn)為該節(jié)點的大小，除非聲明了opts.width或opts.height。2.1.1初始化圖表【示例代碼2-1】<divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));</script>需要注意的是，使用這種方法調(diào)用echarts.init時，需保證容器具備寬度和高度。2.1.1初始化圖表2．指定圖表的大小如果圖表容器不存在寬度和高度，或者希望圖表的大小不等于容器的大小，也可以在初始化的時候指定圖表的大小。2.1.1初始化圖表【示例代碼2-2】<divid="main"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'),null,{width:600,height:400});</script>2.1.2圖表大小和實例管理1．監(jiān)聽圖表容器的大小并改變圖表的大小在有些場景下，當(dāng)容器大小改變時，需要圖表的大小也相應(yīng)地改變。例如，圖表容器是一個高度為400px、寬度為頁面寬度的100%的節(jié)點，在瀏覽器頁面寬度改變時，需要保持圖表寬度始終是頁面寬度的100%。為此，可以監(jiān)聽頁面的resize事件，以便在瀏覽器頁面大小改變時，調(diào)用echartsInstance.resize改變圖表的大小。2.1.2圖表大小和實例管理【示例代碼2-3】<style>#main,html,body{width:100%;}#main{height:400px;}</style>2.1.2圖表大小和實例管理【示例代碼2-3】<divid="main"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));window.addEventListener('resize',function(){myChart.resize();});</script>2.1.2圖表大小和實例管理2．為圖表設(shè)置特定的大小除了直接調(diào)用不含參數(shù)的resize方法自動改變圖表的大小，還可以在resize方法中指定圖表的寬度和高度，實現(xiàn)圖表大小不等于容器大小的效果。2.1.2圖表大小和實例管理【示例代碼2-4】myChart.resize({width:800,height:400});2.1.2圖表大小和實例管理3．銷毀和重建圖表實例假設(shè)頁面中存在多個標(biāo)簽頁，每個標(biāo)簽頁都包含一些圖表。當(dāng)選中一個標(biāo)簽頁的時候，其他標(biāo)簽頁的內(nèi)容在DOM中被移除了。這樣，當(dāng)用戶再選中這些標(biāo)簽頁的時候，就會發(fā)現(xiàn)圖表“不見”了。本質(zhì)上，這是圖表的容器節(jié)點被移除導(dǎo)致的。即使之后重新添加容器節(jié)點，圖表所在的節(jié)點也已經(jīng)不存在了。2.1.2圖表大小和實例管理正確的做法是，在圖表容器被銷毀之后，調(diào)用echartsInstance.dispose銷毀圖表實例，在重新添加圖表容器后，再次調(diào)用echarts.init初始化圖表實例。快樂學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.2認(rèn)知與使用ECharts的坐標(biāo)系在ECharts中，坐標(biāo)系是圖表繪制的基礎(chǔ)，它決定了數(shù)據(jù)如何在圖表上展示。ECharts提供了多種類型的坐標(biāo)系以滿足不同的數(shù)據(jù)可視化需求，用戶可以根據(jù)實際情況選擇合適的坐標(biāo)系類型并進行相應(yīng)的配置，以實現(xiàn)最佳的可視化效果。2.2.1認(rèn)知直角坐標(biāo)系1．基本概念直角坐標(biāo)系（grid）是ECharts中常用的坐標(biāo)系，它包含x軸和y軸，通常用于繪制柱狀圖、折線圖、散點圖（氣泡圖）等。2.2.1認(rèn)知直角坐標(biāo)系2．x軸和y軸x軸和y軸都由軸線、刻度、刻度標(biāo)簽、軸標(biāo)題4個部分組成。普通的二維坐標(biāo)系都有x軸和y軸，通常情況下，x軸顯示在圖表的底部，y軸顯示在圖表的左側(cè)。x軸常用來標(biāo)示數(shù)據(jù)的維度，y軸常用來標(biāo)示數(shù)據(jù)的數(shù)值。2.2.1認(rèn)知直角坐標(biāo)系3．屬性配置在ECharts中，可以通過配置項自定義x軸和y軸的屬性，如坐標(biāo)軸標(biāo)題、軸線樣式、刻度樣式、標(biāo)簽樣式等。例如，可以設(shè)置坐標(biāo)軸標(biāo)題的位置、字體樣式、顏色等，可以設(shè)置軸線的顏色、寬度、類型（實線、虛線等），可以設(shè)置刻度的顯示間隔、長度、樣式等，還可以設(shè)置標(biāo)簽的顯示間隔、旋轉(zhuǎn)角度、字體樣式等。2.2.1認(rèn)知直角坐標(biāo)系4．多軸配置在ECharts直角坐標(biāo)系內(nèi)，單個grid組件最多只能放兩個x軸或y軸，x或y軸多于兩個時，需要對offset屬性進行配置，以防止同一位置多個軸發(fā)生重疊。配置兩個x軸時，它們分別顯示在上、下兩側(cè)；配置兩個y軸時，它們分別顯示在左、右兩側(cè)。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置直角坐標(biāo)系的主要屬性及其設(shè)置如下。（1）grid.idstring類型，表示組件id。默認(rèn)不指定，指定后可用于在option或者API中引用組件。（2）grid.showboolean類型，用于設(shè)置是否顯示直角坐標(biāo)系網(wǎng)格。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（3）grid.zlevelnumber類型，用于設(shè)置所有圖形的zlevel值，zlevel用于Canvas分層（一種常見的優(yōu)化手段），不同zlevel值的圖形會放置在不同的Canvas中。我們可以把一些圖形變化頻繁（如有動畫）的組件設(shè)置成單獨的zlevel。需要注意的是，過多的Canvas會增加內(nèi)存開銷，在手機端上需要謹(jǐn)慎使用。zlevel值大的Canvas會放在zlevel值小的Canvas的上面。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（4）grid.znumber類型，用于設(shè)置組件所有圖形的z值。z值可以控制圖形的前后順序，z值小的圖形會被z值大的圖形覆蓋。相比zlevel值，z值的優(yōu)先級更低，而且不會創(chuàng)建新的Canvas。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（5）grid.leftstring或number類型，用于設(shè)置grid組件離容器左側(cè)的距離。left的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器寬度的百分比，也可以是'left'、'center'、'right’。如果left的值為'left'、'center'、'right'，組件會根據(jù)相應(yīng)的位置自動對齊。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（6）grid.topstring或number類型，用于設(shè)置grid組件離容器頂部的距離。top的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高度的百分比，也可以是'top'、'middle'、'bottom’。如果top的值為'top'、'middle'、'bottom'，組件會根據(jù)相應(yīng)的位置自動對齊。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（7）grid.rightstring或number類型，用于設(shè)置grid組件離容器右側(cè)的距離。right的值可以是像20這樣的具體像素值，也可以是像'20%'這樣相對于容器寬度的百分比。（8）grid.bottomstring或number類型，用于設(shè)置grid組件離容器底部的距離。bottom的值可以是像20這樣的具體像素值，也可以是像'20%'這樣相對于容器高度的百分比。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（9）grid.widthstring或number類型，用于設(shè)置grid組件的寬度，默認(rèn)為自適應(yīng)（'auto'）。（10）grid.heightstring或number類型，用于設(shè)置grid組件的高度，默認(rèn)為自適應(yīng)（'auto'）。（11）grid.containLabelboolean類型，用于設(shè)置grid區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（12）grid.backgroundColorColor類型，用于設(shè)置網(wǎng)格背景色，默認(rèn)為透明（'transparent’）。顏色可以使用RGB表示，如'rgb(128,128,128)’。如果想要加上alpha通道，可以使用RGBA，如'rgba(128,128,128,0.5)’。也可以使用十六進制格式，如'#ccc'。（13）grid.borderColorColor類型，用于設(shè)置網(wǎng)格的邊框顏色，支持的顏色格式同backgroundColor。2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（14）grid.borderWidthnumber類型，用于設(shè)置網(wǎng)格的邊框線寬。（15）grid.shadowBlurnumber類型，用于設(shè)置圖形陰影的模糊大小，該屬性與shadowColor、shadowOffsetX、shadowOffsetY配合使用共同控制圖形的陰影效果?！臼纠a2-5】{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}2.2.1認(rèn)知直角坐標(biāo)系5．直角坐標(biāo)系的主要屬性及其設(shè)置（16）grid.shadowColorColor類型，用于設(shè)置陰影顏色，支持的顏色格式同grid.backgroundcolor。（17）grid.shadowOffsetXnumber類型，用于設(shè)置陰影水平方向上的偏移距離。（18）grid.shadowOffsetYnumber類型，用于設(shè)置陰影垂直方向上的偏移距離。（19）grid.tooltipObject類型，為本坐標(biāo)系特定的提示框設(shè)定。2.2.2認(rèn)知極坐標(biāo)系ECharts的極坐標(biāo)系（Polar）是一種使用極角和極徑描述二維平面上點的坐標(biāo)系，每個極坐標(biāo)系擁有一個角度軸和一個半徑軸。極坐標(biāo)系可用于繪制散點圖和折線圖等。1．極角與極徑在極坐標(biāo)系中，每個點的位置由極角和極徑兩個值確定。極角表示點與某個參考方向（通常是x軸正方向）之間的夾角，通常以弧度表示；極徑表示點到坐標(biāo)原點的距離。2.2.2認(rèn)知極坐標(biāo)系2．應(yīng)用場景極坐標(biāo)系常用于表示圓形、周期性和徑向的數(shù)據(jù)。它特別適用于展示數(shù)據(jù)的循環(huán)性和周期性關(guān)系，以及數(shù)據(jù)點在一個圓形或極坐標(biāo)網(wǎng)格上的分布情況。2.2.2認(rèn)知極坐標(biāo)系3．極坐標(biāo)系的主要屬性及其設(shè)置極坐標(biāo)系的主要屬性及其設(shè)置如下。（1）polar.idstring類型，用于設(shè)置組件id，默認(rèn)不指定，指定后可用于在option或者API中引用組件。（2）polar.zlevelnumber類型，用于設(shè)置所有圖形的zlevel值。2.2.2認(rèn)知極坐標(biāo)系3．極坐標(biāo)系的主要屬性及其設(shè)置（3）polar.znumber類型，用設(shè)置組件所有圖形的z值。（4）polar.centerArray類型，極坐標(biāo)系的中心（圓心）坐標(biāo)，數(shù)組的第一項是橫坐標(biāo)，第二項是縱坐標(biāo)。支持設(shè)置成百分比，設(shè)置成百分比時，第一項是相對于容器寬度的百分比，第二項是相對于容器高度的百分比。2.2.2認(rèn)知極坐標(biāo)系3．極坐標(biāo)系的主要屬性及其設(shè)置【示例代碼2-6】center:[400,300]center:['50%','50%']2.2.2認(rèn)知極坐標(biāo)系3．極坐標(biāo)系的主要屬性及其設(shè)置（5）polar.radiuspolar.radius用于設(shè)置極坐標(biāo)系的半徑，值可以為如下類型。①number：直接指定外半徑值。②string：例如'20%'，表示外半徑為可視區(qū)尺寸（容器高度和寬度中較小的一項）的20%。③Array：數(shù)組的第一項是內(nèi)半徑，第二項是外半徑。2.2.2認(rèn)知極坐標(biāo)系3．極坐標(biāo)系的主要屬性及其設(shè)置（6）polar.tooltipObjectpolar.tooltip相應(yīng)坐標(biāo)系特定的提示框設(shè)定，值為Object類型。2.2.3認(rèn)知地理坐標(biāo)系1．基本概念地理坐標(biāo)系（geo）是ECharts中用于展示地圖數(shù)據(jù)的坐標(biāo)系。它將現(xiàn)實世界的地理平面映射為二維平面，通過經(jīng)緯度系統(tǒng)實現(xiàn)坐標(biāo)定位，可以展示地理分布、地域熱力、行政區(qū)劃等數(shù)據(jù)。2．地圖數(shù)據(jù)ECharts提供了一些常用的地圖數(shù)據(jù)，如全國各省市的邊界、世界各個國家的邊界等，用戶也可以根據(jù)需要自定義地圖數(shù)據(jù)。2.2.3認(rèn)知地理坐標(biāo)系3．屬性配置地理坐標(biāo)系通過geo屬性進行配置，可以設(shè)置地圖類型、是否開啟鼠標(biāo)縮放和平移漫游、視角中心點、地圖長寬比、縮放比例等屬性。例如，可以設(shè)置geo.map屬性來指定地圖類型，設(shè)置geo.roam屬性來開啟或關(guān)閉鼠標(biāo)縮放和平移漫游功能。2.2.3認(rèn)知地理坐標(biāo)系4．?dāng)?shù)據(jù)展示在地理坐標(biāo)系上，可以使用散點圖、熱力圖、線圖等圖表來展示地圖數(shù)據(jù)。數(shù)據(jù)通常通過series屬性進行配置，數(shù)據(jù)格式一般為對象數(shù)組，每個對象包含地名和對應(yīng)的值。2.2.4認(rèn)知平行坐標(biāo)系1．基本概念平行坐標(biāo)系是ECharts中用于可視化高維數(shù)據(jù)的坐標(biāo)系。它可以同時展示多個變量之間的關(guān)系，并且可以通過調(diào)整軸的順序和縮放來探索不同的數(shù)據(jù)視角。2.2.4認(rèn)知平行坐標(biāo)系2．坐標(biāo)軸配置在平行坐標(biāo)系中，每個變量都對應(yīng)一個坐標(biāo)軸。這些坐標(biāo)軸是平行的，并且可以通過線條將不同軸上的數(shù)據(jù)點連接起來。用戶可以通過配置parallelAxis屬性自定義坐標(biāo)軸的屬性，如坐標(biāo)軸標(biāo)題、軸線樣式、刻度樣式等。2.2.4認(rèn)知平行坐標(biāo)系3．?dāng)?shù)據(jù)展示在平行坐標(biāo)系中，數(shù)據(jù)通過線條的形式展示。每條線代表一個數(shù)據(jù)點，線條上的不同位置對應(yīng)不同的變量值。用戶可以通過觀察線條的形狀和走向來分析數(shù)據(jù)點之間的關(guān)系和趨勢。2.2.5認(rèn)知單軸單軸（SingleAxis）可以應(yīng)用到散點圖中，展現(xiàn)一維數(shù)據(jù)。2.2.6認(rèn)知日歷坐標(biāo)系ECharts是通過日歷坐標(biāo)系（Calendar）來實現(xiàn)日歷圖效果的，可以在熱力圖、散點圖、關(guān)系圖中使用日歷坐標(biāo)系?？鞓穼W(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.3認(rèn)知ECharts圖表組件及常用術(shù)語2.3認(rèn)知ECharts圖表組件及常用術(shù)語ECharts圖表組件及常用術(shù)語如下。1．標(biāo)題標(biāo)題（title）指圖表的標(biāo)題。標(biāo)題組件包含主標(biāo)題和副標(biāo)題。在ECharts2.x中，單個ECharts實例最多只能擁有一個標(biāo)題組件。但是在ECharts3中，單個ECharts實例可以擁有任意多個標(biāo)題組件，這在需要對標(biāo)題進行排版，或者單個實例中的多個圖表都需要標(biāo)題時會比較有用。掃描二維碼，瀏覽電子活頁2-1中的內(nèi)容，熟悉標(biāo)題組件的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語2．圖例圖例（legend）指圖表的圖例。圖例組件展現(xiàn)了不同系列的標(biāo)記（symbol）、顏色和名稱。可以通過單擊圖例控制哪些系列不顯示。ECharts3中單個ECharts實例可以擁有多個圖例組件，便于布局多個圖例。當(dāng)圖例數(shù)量過多時，可以使用垂直滾動圖例或水平滾動圖例。掃描二維碼，瀏覽電子活頁2-2中的內(nèi)容，熟悉圖例組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語3．提示框提示框標(biāo)簽（tooltip.axisPointer.label）是指提示框坐標(biāo)軸指示器的文字。提示框坐標(biāo)軸指示器的樣式包括線條樣式（tooltip.axisPointer.lineStyle）和十字線樣式（tooltip.axisPointer.crossStyle）。提示框組件可以設(shè)置在以下多處位置。①可以設(shè)置在全局，即tooltip。②可以設(shè)置在坐標(biāo)系中，即grid.tooltip、polar.tooltip、single.tooltip。③可以設(shè)置在系列中，即series.tooltip。④可以設(shè)置在系列的每個數(shù)據(jù)項中，即series.data.tooltip。掃描二維碼，瀏覽電子活頁2-3中的內(nèi)容，熟悉提示框組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語4．坐標(biāo)軸（1）x軸直角坐標(biāo)系中的x軸由x軸線（xAxis.axisLine）、x軸刻度（xAxis.axisTick）、x軸刻度標(biāo)簽（xAxis.axisLabel）、x軸標(biāo)題4個部分組成。一般情況下，單個grid組件最多只能放上、下兩個x軸。x軸多于兩個時，需要對offset屬性進行配置，以防止多個x軸重疊。掃描二維碼，瀏覽電子活頁2-4中的內(nèi)容，熟悉直角坐標(biāo)系中x軸（xAxis）的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語4．坐標(biāo)軸（2）y軸直角坐標(biāo)系中的y軸（yAxis）由y軸線（yAxis.axisLine）、y軸刻度（yAxis.axisTick）、y軸刻度標(biāo)簽（yAxis.axisLabel）、y軸標(biāo)題4個部分組成。掃描二維碼，瀏覽電子活頁2-5中的內(nèi)容，熟悉直角坐標(biāo)系grid中的y軸（yAxis）的屬性及設(shè)置。直角坐標(biāo)系中的第2個y軸默認(rèn)顯示在右邊，y軸可以通過nameLocation改變位置。一般情況下，單個grid組件最多只能放左、右兩個y軸。y軸多于兩個時需要對offset屬性進行配置，以防止多個y軸重疊。2.3認(rèn)知ECharts圖表組件及常用術(shù)語4．坐標(biāo)軸（3）坐標(biāo)軸分割線除坐標(biāo)軸分割線（yAxis.splitLine）之外，還可以使用splitArea設(shè)置背景色分割。2.3認(rèn)知ECharts圖表組件及常用術(shù)語5．系列的圖形樣式系列的圖形樣式（series.itemStyle）對不同類型的圖表有不同的意義。對折線圖而言，這個配置項用于設(shè)置拐點處圖形的樣式；對柱狀圖而言，這個配置項用于設(shè)置矩形條的樣式。該配置項是對整個系列的圖形做設(shè)置，如果要對其中的某一個特定數(shù)據(jù)點做設(shè)置，應(yīng)使用series.data.itemStyle。2.3認(rèn)知ECharts圖表組件及常用術(shù)語6．工具欄工具欄（toolbox）用于提供操作圖表的工具，可以自定義。工具欄組件如圖2-1所示，其內(nèi)置數(shù)據(jù)區(qū)域縮放、數(shù)據(jù)區(qū)域縮放還原、數(shù)據(jù)視圖、圖表類型切換、重置、保存為圖片等工具。掃描二維碼，瀏覽電子活頁2-6中的內(nèi)容，熟悉工具欄組件的屬性及設(shè)置。圖2-1工具欄組件2.3認(rèn)知ECharts圖表組件及常用術(shù)語7．時間軸時間軸（timeline）用于實現(xiàn)多個option的切換，展現(xiàn)不同時間段的數(shù)據(jù)。timeline組件提供了在多個option間進行切換、播放等操作的功能。timeline和其他組件有些不同，它需要操作“多個option”，把傳入setOption的第1個參數(shù)，稱為ECOption，稱傳統(tǒng)的ECharts單個option為ECUnitOption。沒有設(shè)置timeline和mediaquery時，ECUnitOption就是ECOption。設(shè)置了timeline或mediaquery時，ECOption由幾個ECUnitOption組成；ECOption的各個根屬性形成一個ECUnitOption，叫作baseOption，它代表各種默認(rèn)設(shè)置；2.3認(rèn)知ECharts圖表組件及常用術(shù)語7．時間軸options數(shù)組每項形成一個ECUnitOption，為了方便也稱為switchableOption，它代表每個時間粒度對應(yīng)的option。baseOption和switchableOption會用來計算finalOption，圖表就是根據(jù)這個最終結(jié)果繪制的。初始化的時候，對應(yīng)當(dāng)前時間的switchableOption會被合并（merge）到baseOption，形成finalOption。每當(dāng)時間變化時，對應(yīng)新時間的switchableOption會被合并到finalOption。掃描二維碼，瀏覽電子活頁2-7中的內(nèi)容，熟悉時間軸組件的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語8．?dāng)?shù)據(jù)區(qū)域縮放數(shù)據(jù)區(qū)域縮放（dataZoom）用來放大一部分?jǐn)?shù)據(jù)，從而突出數(shù)據(jù)信息的細(xì)節(jié)，幫助概覽數(shù)據(jù)整體，或者去除離群點的影響。掃描二維碼，瀏覽電子活頁2-8中的內(nèi)容，熟悉數(shù)據(jù)區(qū)域縮放組件的屬性及設(shè)置。9．刷選刷選（Brush）是區(qū)域選擇組件，用戶可以利用它選擇圖中一部分?jǐn)?shù)據(jù)，從而查看被選中的數(shù)據(jù)，或者它們的一些統(tǒng)計計算結(jié)果。掃描二維碼，瀏覽電子活頁2-9中的內(nèi)容，熟悉刷選組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語10．視覺映射視覺映射（visualMap）可以將數(shù)據(jù)值映射為圖形的形狀、大小、顏色等。visualMap組件用于進行“視覺編碼”，也就是將數(shù)據(jù)映射到視覺元素（視覺通道）。2.3認(rèn)知ECharts圖表組件及常用術(shù)語10．視覺映射visualMap組件中可以使用的視覺元素如下。①symbol：圖形類別。②symbolSize：圖形大小。③color：顏色。④colorAlpha：顏色的透明度。⑤opacity：透明度。⑥colorLightness：顏色的明暗度。⑦colorSaturation：顏色的飽和度。⑧colorHue：顏色的色調(diào)。2.3認(rèn)知ECharts圖表組件及常用術(shù)語10．視覺映射visualMap組件可以定義多個，從而同時對數(shù)據(jù)中的多個維度進行視覺映射。visualMap組件分為分段型（visualMapPiecewise）和連續(xù)型（visualMapContinuous），通過type來區(qū)分。2.3認(rèn)知ECharts圖表組件及常用術(shù)語10．視覺映射【示例代碼2-8】option={visualMap:[{type:'continuous',…},{type:'piecewise',…}],…};2.3認(rèn)知ECharts圖表組件及常用術(shù)語11．標(biāo)注、標(biāo)線、標(biāo)域ECharts使用markPoint設(shè)置標(biāo)記點，使用markLine設(shè)置標(biāo)記線，使用markArea設(shè)置標(biāo)記區(qū)域。（1）圖表標(biāo)注（series-line.markPoint）markPoint用于設(shè)置圖表標(biāo)注。掃描二維碼，瀏覽電子活頁2-10中的內(nèi)容，熟悉圖表標(biāo)注的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語11．標(biāo)注、標(biāo)線、標(biāo)域（2）圖表標(biāo)線（series-line.markLine）markLine用于設(shè)置圖表標(biāo)線。掃描二維碼，瀏覽電子活頁2-11中的內(nèi)容，熟悉圖表標(biāo)線的主要屬性及其設(shè)置。（3）圖表標(biāo)域（series-line.markArea）markArea用于設(shè)置圖表標(biāo)域，常用于標(biāo)記圖表中某個范圍的數(shù)據(jù)，如標(biāo)出某段時間投放了廣告。掃描二維碼，瀏覽電子活頁2-12中的內(nèi)容，熟悉圖表標(biāo)域的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語12．繪制圖形元素繪制圖形元素（graphic）包括image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group等。ECharts圖表組件如圖2-2所示。圖2-2ECharts圖表組件快樂學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.4設(shè)置ECharts圖表的樣式2.4.1設(shè)置顏色主題最簡單的更改全局樣式的方式是直接采用顏色主題（theme）。ECharts5.x除了默認(rèn)主題，還內(nèi)置了'dark'主題，可以直接進行切換：varchart=echarts.init(dom,'dark');其他沒有內(nèi)置在ECharts中的主題，需要用戶自行加載。這些主題可以在主題編輯器里獲取，也可以使用主題編輯器自行編輯主題。下載下來的主題的使用方式如下。如果主題保存為JSON文件，則需要自行加載和注冊。2.4.1設(shè)置顏色主題【示例代碼2-10】fetch('theme/vintage.json').then(r=>r.json()).then(theme=>{echarts.registerTheme('vintage',theme);varchart=echarts.init(dom,'vintage');})如果保存為UMD格式的JavaScript文件，文件內(nèi)部已經(jīng)做了自注冊，直接引入JavaScript文件即可：varchart=echarts.init(dom,'vintage');2.4.2設(shè)置調(diào)色盤可以在option中設(shè)置調(diào)色盤，它給定了一組顏色，圖形、系列會自動從中選擇顏色?？梢栽O(shè)置全局的調(diào)色盤，也可以設(shè)置系列專屬的調(diào)色盤。2.4.3直接設(shè)置圖形元素的樣式直接的樣式設(shè)置是比較常用的樣式設(shè)置方式?？v觀ECharts的option，很多地方可以設(shè)置itemStyle、lineStyle、areaStyle、label等。這些地方可以直接設(shè)置圖形元素的顏色、線寬、點的大小、標(biāo)簽的文字、標(biāo)簽的樣式等。一般來說，ECharts的各個系列和組件都遵從這些命名習(xí)慣，雖然在不同圖表和組件中，itemStyle、label等可能出現(xiàn)在不同的地方。2.4.4通過emphasis屬性定制高亮的樣式鼠標(biāo)指針懸停在圖形元素上時，一般會出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動生成的，但也可以通過emphasis屬性來定制。emphasis的結(jié)構(gòu)和普通樣式的結(jié)構(gòu)相同。2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】option={series:{type:'scatter',itemStyle:{color:'red'},label:{show:true,formatter:'Thisisanormallabel.'},2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】emphasis:{itemStyle:{color:'blue'},label:{show:true,formatter:'Thisisaemphasislabel.'}}}};2.4.5數(shù)據(jù)的視覺映射數(shù)據(jù)可視化是數(shù)據(jù)到視覺元素的映射過程，這個過程也可稱為視覺編碼，視覺元素也可稱為視覺通道。ECharts的每種圖表都內(nèi)置了這種映射過程，如折線圖把數(shù)據(jù)映射到“線”，柱狀圖把數(shù)據(jù)映射到“長度”。一些更復(fù)雜的圖表（如關(guān)系圖、事件河流圖、樹圖）也都會進行各自內(nèi)置的映射。2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度ECharts中的數(shù)據(jù)一般存放于series.data中。圖表類型不同，數(shù)據(jù)的具體形式可能有些許差異，但它們都是數(shù)據(jù)項（dataItem）的集合。每個數(shù)據(jù)項含有數(shù)據(jù)值（value）和其他信息（如果需要的話）。每個數(shù)據(jù)值可以是單一的數(shù)值（一維）或者一個數(shù)組（多維）。例如，series.data最常見的形式是“線性表”，即一個普通數(shù)組。2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度【示例代碼2-13】series:{data:[{value:3.4,itemStyle:{}},4.2,10.8,7.2,];}2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度series:{data:[{value:[3.4,4.5,15],itemStyle:{}},[4.2,2.3,20],[10.8,9.5,30],[7.2,8.8,18]];}2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度在圖表中，往往默認(rèn)把value的前一兩個維度進行映射，如將第1個維度映射到x軸，將第2個維度映射到y(tǒng)軸。如果要把更多的維度展現(xiàn)出來，可以借助visualMap。常見的情況是，散點圖使用半徑展現(xiàn)第3個維度。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件ECharts的視覺映射組件分為連續(xù)型（visualMapContinuous）與分段型（visualMapPiecewise）。連續(xù)型的意思是進行視覺映射的數(shù)據(jù)維度是連續(xù)的數(shù)值，分段型則指數(shù)據(jù)被分成了多段或者是離散型的數(shù)據(jù)。（1）連續(xù)型視覺映射組件連續(xù)型視覺映射組件通過指定最大值、最小值，就可以確定視覺映射的范圍。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件【示例代碼2-14】option={visualMap:[{type:'continuous',min:0,max:5000,dimension:3,seriesIndex:4,inRange:{color:['blue','#121122','red'],symbolSize:[30,100]},outOfRange:{symbolSize:[30,100]}}]};2.4.5數(shù)據(jù)的視覺映射其中，visualMap.inRange表示在數(shù)據(jù)映射范圍內(nèi)的數(shù)據(jù)采用的樣式，visualMap.outOfRange指定了超出映射范圍的數(shù)據(jù)的樣式，visualMap.dimension則指定了將數(shù)據(jù)的哪個維度做視覺映射。2.4.5數(shù)據(jù)的視覺映射（2）分段型視覺映射組件分段型視覺映射組件有以下3種模式。①連續(xù)型數(shù)據(jù)平均分段：依據(jù)visualMap-piecewise.splitNumbe將數(shù)據(jù)自動平均分割成若干段。②連續(xù)型數(shù)據(jù)自定義分段：依據(jù)visualMap-piecewise.pieces定義每段數(shù)據(jù)的范圍。③離散數(shù)據(jù)（類別性數(shù)據(jù)）：類別定義在visualMap-piecewise.categories中。使用分段型視覺映射組件時，需要將type設(shè)為'piecewise'，并且選擇一種模式，其他配置項與連續(xù)型視覺映射組件的類似?？鞓穼W(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.5使用數(shù)據(jù)集管理數(shù)據(jù)數(shù)據(jù)集是專門用來管理數(shù)據(jù)的組件。雖然每個系列都可以在series.data中設(shè)置數(shù)據(jù)，但是從ECharts4支持?jǐn)?shù)據(jù)集開始，更推薦使用數(shù)據(jù)集來管理數(shù)據(jù)。這種做法的優(yōu)勢在于，數(shù)據(jù)可以被多個組件復(fù)用，也便于實現(xiàn)“數(shù)據(jù)和其他配置”分離的配置風(fēng)格，因為在實際應(yīng)用中，數(shù)據(jù)往往頻繁改變，而其他配置大多保持穩(wěn)定。2.5.1在系列中設(shè)置數(shù)據(jù)【訓(xùn)練2-1】在網(wǎng)頁文件test0201.html中將數(shù)據(jù)設(shè)置在系列中【代碼編寫】在Dreamweaver中編寫對應(yīng)的代碼。主要代碼如下：<divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;2.5.1在系列中設(shè)置數(shù)據(jù)option={xAxis:{type:'category',data:['蘋果','梨子','葡萄','杧果']},yAxis:{},series:[{type:'bar',name:'7月',data:[89.3,83.1,94.4,85.4]},2.5.1在系列中設(shè)置數(shù)據(jù){type:'bar',name:'8月',data:[95.8,89.4,91.2,76.9]},{type:'bar',name:'9月',data:[97.7,92.1,92.5,78.1]}]};myChart.setOption(option);</script>2.5.1在系列中設(shè)置數(shù)據(jù)【圖表展示】訓(xùn)練2-1對應(yīng)的柱狀圖如圖2-3所示。圖2-3訓(xùn)練2-1對應(yīng)的柱狀圖2.5.1在系列中設(shè)置數(shù)據(jù)在系列中設(shè)置數(shù)據(jù)適用于對一些特殊的數(shù)據(jù)結(jié)構(gòu)（如樹、圖等）進行一定的數(shù)據(jù)類型定制，但是需要用戶先處理數(shù)據(jù)，把數(shù)據(jù)分割并配置到各個系列（和類目軸）中。此外，這種方式不支持多個系列共享一份數(shù)據(jù)，給基于原始數(shù)據(jù)進行圖表類型、系列的映射安排帶來了不便。2.5.2在數(shù)據(jù)集中設(shè)置數(shù)據(jù)將數(shù)據(jù)設(shè)置在數(shù)據(jù)集中的好處如下。（1）貼近數(shù)據(jù)可視化常見思路：先提供數(shù)據(jù)，再指定數(shù)據(jù)到視覺元素的映射，從而形成圖表。（2）數(shù)據(jù)和其他配置分離，更易于管理。數(shù)據(jù)通常頻繁改變，其他配置通常不變。（3）數(shù)據(jù)可以被多個系列或者組件復(fù)用，對于數(shù)據(jù)量大的場景，不必分別為每個系列創(chuàng)建一份數(shù)據(jù)。（4）支持更多數(shù)據(jù)格式（如二維數(shù)組、對象數(shù)組等），一定程度上減輕了轉(zhuǎn)換數(shù)據(jù)格式的負(fù)擔(dān)。目前并非所有圖表都支持?jǐn)?shù)據(jù)集，支持?jǐn)?shù)據(jù)集的圖表有折線圖、柱狀圖、散點圖、特效散點圖、平行坐標(biāo)圖、K線圖、地圖、漏斗圖、自定義圖表。2.5.2在數(shù)據(jù)集中設(shè)置數(shù)據(jù)【訓(xùn)練2-2】在網(wǎng)頁文件test0202.html中將數(shù)據(jù)設(shè)置在數(shù)據(jù)集中【代碼編寫】在Dreamweaver中編寫對應(yīng)的代碼。主要代碼如下：option={legend:{},tooltip:{},dataset:{source:[['product','4月','5月','6月'],2.5.2在數(shù)據(jù)集中設(shè)置數(shù)據(jù)【訓(xùn)練2-2】在網(wǎng)頁文件test0202.html中將數(shù)據(jù)設(shè)置在數(shù)據(jù)集中['蘋果',43.3,85.8,93.7],['梨子',83.1,73.4,55.1],['葡萄',86.4,65.2,82.5],['杧果',72.4,53.9,39.1]]},xAxis:{type:'category'},yAxis:{},series:[{type:'bar'},{type:'bar'},{type:'bar'}]};2.5.2在數(shù)據(jù)集中設(shè)置數(shù)據(jù)【圖表展示】訓(xùn)練2-2對應(yīng)的柱狀圖如圖2-4所示。圖2-4訓(xùn)練2-2對應(yīng)的柱狀圖快樂學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件【任務(wù)2-1】繪制ECharts柱狀圖安家樂電器公司9月的空調(diào)、冰箱、洗衣機、電視機、電風(fēng)扇、熱水器銷售數(shù)量分別為150、200、360、100、180、200，試?yán)L制ECharts柱狀圖，展示9月該公司各類電器產(chǎn)品的銷售情況。【任務(wù)描述】【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖1．創(chuàng)建HTML文件啟動Dreamweaver，創(chuàng)建網(wǎng)頁task0201.html，將該文件保存到本模塊文件夾Unit02中。網(wǎng)頁task0201.html初始HTML代碼如下：【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖1．創(chuàng)建HTML文件<!doctypehtml><html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title></head><body></body></html>【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖2．引入ECharts在HTML文檔的<head>與</head>之間編寫代碼，引入ECharts<head><metacharset="utf-8"><title>ECharts圖表示例</title><!--引入ECharts文件--><scriptsrc="../ECharts/echarts.min.js"></script></head>【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖3．準(zhǔn)備HTML容器在HTML文檔中，準(zhǔn)備一個具有寬度和高度的DOM元素作為圖表的容器。HTML代碼如下：<divid="main"style="width:600px;height:400px;"></div>【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖4．初始化ECharts實例在JavaScript代碼中，通過echarts.init方法初始化ECharts實例，并將其綁定到之前準(zhǔn)備的DOM元素上。JavaScript代碼如下：varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖5．設(shè)置圖表的配置項和數(shù)據(jù)ECharts的圖表配置依賴于一個名為option的JavaScript對象或JSON格式的數(shù)據(jù)。option對象可以配置標(biāo)題、坐標(biāo)軸、數(shù)據(jù)系列等，決定了繪制出什么樣的圖表。配置柱狀圖的JavaScript代碼如下：【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖5．設(shè)置圖表的配置項和數(shù)據(jù)option={//配置標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

title:{text:'示例柱狀圖',subtext:'展示電器產(chǎn)品的銷量'},tooltip:{},//配置圖例組件，一個ECharts圖表可以包含多個圖例組件【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖5．設(shè)置圖表的配置項和數(shù)據(jù)legend:{data:['銷量']},//配置x軸

xAxis:{data:['空調(diào)','冰箱','洗衣機','電視機','電風(fēng)扇','熱水器']},【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖5．設(shè)置圖表的配置項和數(shù)據(jù)//配置y軸

yAxis:{},//配置系列，系列類型通過type控制

series:[{name:'銷量',type:'bar',data:[150,200,360,100,180,200]}]};【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖6．設(shè)置圖表選項并渲染圖表通過調(diào)用ECharts實例的setOption方法，將準(zhǔn)備好的option對象應(yīng)用到圖表上，從而渲染出圖表。JavaScript代碼如下：myChart.setOption(option);網(wǎng)頁task0201.html完整的代碼如下：【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖<!doctypehtml><html><head><metacharset="utf-8"><title>ECharts圖表示例</title><!--引入ECharts文件--><scriptsrc="../ECharts/echarts.min.js"></script></head>【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖<body><!--為ECharts準(zhǔn)備一個定義了寬度、高度的DOM--><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">//基于準(zhǔn)備好的DOM初始化ECharts實例

varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖

//設(shè)置圖表的配置項和數(shù)據(jù)

option={//配置標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

title:{text:'示例柱狀圖',subtext:'展示電器產(chǎn)品的銷量'},tooltip:{},【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖

//配置圖例組件，一個ECharts圖表可以包含多個圖例組件

legend:{data:['銷量']},//配置x軸

xAxis:{data:['空調(diào)','冰箱','洗衣機','電視機','電風(fēng)扇','熱水器']},【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖

//配置y軸

yAxis:{},//配置系列，系列類型通過type控制

series:[{name:'銷量',type:'bar',data:[150,200,360,100,180,200]}]};【實現(xiàn)過程】【任務(wù)2-1】繪制ECharts柱狀圖

//顯示圖表

myChart.setOption(option);</script></body></html>【圖表展示】【任務(wù)2-1】繪制ECharts柱狀圖任務(wù)2-1對應(yīng)的柱狀圖如圖2-19所示。圖2-19任務(wù)2-1對應(yīng)的柱狀圖快樂學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性（1）啟動Dreamweaver，創(chuàng)建網(wǎng)頁task0202.html，將該文件保存到本模塊文件夾Unit02中。（2）在網(wǎng)頁task0202.html中繪制ECharts柱狀圖，并進行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性設(shè)置圖表的配置項和數(shù)據(jù)的代碼如下：option={backgroundColor:'#D3D3D3',//配置標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

title:{text:'柱狀圖',//設(shè)置主標(biāo)題樣式

textStyle:{color:'#fff'},subtext:'12個月的銷售量',【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置副標(biāo)題樣式

subtextStyle:{color:'#fff'},//設(shè)置標(biāo)題位置，用padding屬性來定位

padding:[10,0,0,50]},

【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置圖例組件

legend:{//設(shè)置圖例類型，默認(rèn)為'plain'，當(dāng)圖例很多時可使用'scroll'type:'plain',//設(shè)置圖例相對容器的位置，可使用top、bottom、left、righttop:'1%',//設(shè)置圖例是否顯示，默認(rèn)為trueselected:{'銷量':true,},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置圖例內(nèi)容樣式

textStyle:{//設(shè)置所有圖例的字體顏色

color:'#fff',//設(shè)置所有圖例的字體背景色

//backgroundColor:'black',},//設(shè)置圖例的顏色標(biāo)簽，默認(rèn)不顯示

tooltip:{show:true,color:'#1e90ff',},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//設(shè)置圖例內(nèi)容

data:[{name:'銷量',//設(shè)置圖例的外框樣式

icon:'circle',textStyle:{//單獨設(shè)置某一個圖例的顏色

color:'#000080',//單獨設(shè)置某一個圖例的字體背景色

//backgroundColor:'black',}}],},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置提示框組件

tooltip:{//設(shè)置是否顯示提示框，默認(rèn)顯示

show:true,//設(shè)置數(shù)據(jù)項圖形觸發(fā)

trigger:'item',axisPointer:{//設(shè)置指示樣式

type:'shadow',axis:'auto',},padding:5,//設(shè)置提示框內(nèi)容樣式

textStyle:{color:"#fff",},},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置grid區(qū)域

grid:{//設(shè)置相對位置

top:80,left:'3%',right:'4%',bottom:'3%',//設(shè)置是否顯示直角坐標(biāo)系網(wǎng)格

show:false,//設(shè)置grid區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽

containLabel:true,【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性tooltip:{//鼠標(biāo)指針放在圖形上，顯示提示框

show:true,//設(shè)置觸發(fā)類型

trigger:'item',textStyle:{//設(shè)置提示框文字的顏色

color:'#666',}}},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置x軸

xAxis:{//設(shè)置x軸是否顯示

show:true,//設(shè)置x軸位置

position:'bottom',//設(shè)置x軸相對于默認(rèn)位置的偏移

offset:0,//設(shè)置x軸類型，默認(rèn)為'category'type:'category',//設(shè)置x軸標(biāo)題

name:'月份',【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸標(biāo)題相對位置

nameLocation:'end',//設(shè)置x軸標(biāo)題樣式

nameTextStyle:{color:"#1e90ff",//設(shè)置x軸標(biāo)題與周圍元素的距離

padding:[5,0,0,-5],},//設(shè)置x軸標(biāo)題與軸線的距離

nameGap:5,//設(shè)置x軸標(biāo)題的旋轉(zhuǎn)角度

nameRotate:90,【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸線

axisLine:{//設(shè)置x軸線是否顯示

show:true,//設(shè)置是否顯示x軸線箭頭

symbol:['none','arrow'],//設(shè)置x軸線箭頭大小

symbolSize:[8,8],//設(shè)置x軸線箭頭位置

symbolOffset:[0,8],【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸線樣式

lineStyle:{//設(shè)置x軸線的顏色

color:'#fff',//設(shè)置x軸線的寬度

width:1,//設(shè)置x軸線的類型

type:'solid',},},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸刻度

axisTick:{//設(shè)置x軸刻度是否顯示

show:true,//設(shè)置x軸刻度是否朝內(nèi)

inside:true,//設(shè)置x軸刻度的長度

lengt:3,【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

lineStyle:{//設(shè)置x軸刻度的顏色，默認(rèn)為軸線的顏色

color:'#fff',//設(shè)置x軸刻度的寬度

width:1,//設(shè)置x軸刻度的類型

type:'solid',},},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸刻度標(biāo)簽

axisLabel:{//設(shè)置x軸刻度標(biāo)簽是否顯示

show:true,//設(shè)置x軸刻度標(biāo)簽是否朝內(nèi)

inside:false,//設(shè)置x軸刻度標(biāo)簽的旋轉(zhuǎn)角度

rotate:0,//設(shè)置x軸刻度標(biāo)簽與軸線的距離

margin:10,//設(shè)置x軸刻度標(biāo)簽的顏色，默認(rèn)為軸線的顏色

color:'#1e90ff',},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置grid區(qū)域中的分隔線

splitLine:{//設(shè)置grid區(qū)域中的分隔線是否顯示

show:true,lineStyle:{color:'#fff',width:1,type:'solid',},},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置網(wǎng)格區(qū)域

splitArea:{//設(shè)置網(wǎng)格區(qū)域是否顯示，默認(rèn)不顯示

show:true,},data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//配置y軸

yAxis:{//設(shè)置y軸是否顯示

show:true,//設(shè)置y軸位置

position:'left',//設(shè)置y軸相對于默認(rèn)位置的偏移

offset:0,//設(shè)置y軸類型，默認(rèn)為'category'type:'value',//設(shè)置y軸標(biāo)題

name:'銷量',【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸標(biāo)題相對位置

nameLocation:'end',//設(shè)置y軸標(biāo)題樣式

nameTextStyle:{color:"#1e90ff",//設(shè)置y軸標(biāo)題與周圍元素的距離

padding:[5,0,0,0],},//設(shè)置y軸標(biāo)題與軸線的距離

nameGap:10,//設(shè)置y軸標(biāo)題的旋轉(zhuǎn)角度

nameRotate:0,【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸線

axisLine:{//設(shè)置y軸線是否顯示

show:true,//------設(shè)置箭頭-------//設(shè)置是否顯示y軸線箭頭

symbol:['none','arrow'],//設(shè)置y軸線箭頭大小

symbolSize:[8,8],//設(shè)置y軸線箭頭位置

symbolOffset:[0,8],【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸線樣式

lineStyle:{color:'#fff',width:1,type:'solid',},},【