內容摘要

ECharts 的基本使用
ECharts常用圖表
直角坐標系常見配置
ECharts配置項小結
ECharts高級

1. ECharts基本使用

1.1 ECharts介紹

ECharts 能夠做出各種各樣漂亮的圖表，它能滿足絕大多數可視化圖表的實現.它的兼容性強, 使用方便, 功能強大, 是實現數據可視化的最佳選擇之一, 更多特點和介紹可以查閱官網地址：ECharts官網

1.2 ECharts的快速上手

ECharts 的入門使用特別簡單, 5分鐘就能夠上手.。

• 步驟1：引入 echarts.js 文件（echarts是一個 js 的庫，當然得先引入這個庫文件）

<script src="js/echarts.min.js"></script>

• 步驟2：準備一個呈現圖表的盒子（盒子必須具備寬高）

<div id="box" style="width: 600px;height:400px;"></div>

• 步驟3：初始化 echarts 實例對象（在這個步驟中, 需要指明圖表最終顯示在哪里的DOM元素）

var myChart = echarts.init(document.getElementById('box'))

• 步驟4：準備配置項（這步很關鍵，我們最終的效果，到底是顯示餅圖還是折線圖，基本上都是由配置項決定的）

var option = {xAxis: {type: 'category', data: ['小明', '小紅', '小王'] },yAxis: { type: 'value' },series: [ { name: '語文', type: 'bar', data: [70, 92, 87], } ] }

• 步驟5：將配置項設置給 echarts 實例對象

myChart.setOption(option)

呈現

總結：通過簡單的5個步驟, 就能夠把一個簡單的柱狀圖給顯示在網頁中了.這幾個步驟中, 步驟4最重要,一個圖表最終呈現什么樣子,完全取決于這個配置項.所以對于不同的圖表, 除了配置項會發生改變之外,其他的代碼 都是固定不變的.

1.3 相關配置項

• xAxis
  直角坐標系 中的x 軸, 如果 type 屬性的值為 category ,那么需要配置 data 數據, 代表在 x 軸的呈現。

• yAxis
  直角坐標系 中的 y 軸, 如果 type 屬性配置為 value , 那么無需配置 data , 此時 y 軸會自動去series 下找數據進行圖表的繪制。

• series
  系列列表。每個系列通過 type 決定自己的圖表類型, data 來設置每個系列的數據

總結：配置項都是以鍵值對的形式存在, 并且配置項有很多, ECharts 的學習大多是針對于這些配置項的, 對于
配置項的使用及學習，可多參考官方配置項文檔：ECharts配置項

2. ECharts常用圖表

2.1 柱狀圖

柱狀圖特點：柱狀圖描述的是分類數據，呈現的是每一個分類中有多少？, 圖表所表達出來的含義在于不同類別數據的排名\對比情況
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 準備x軸的數據

var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺', '二妞', '大強']

• 步驟3 準備y 軸的數據

var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

• 步驟4 準備 option , 將 series 中的 type 的值設置為: bar

var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { type: 'bar', data: yDataArr } ] }

注意：坐標軸 xAxis 或者 yAxis中的配置, type 的值主要有兩種:category 和 value, 如果 type屬性的值為category ,那么需要配置 data數據, 代表在x 軸的呈現. 如果 type 屬性配置為 value,那么無需配置 data , 此時 y 軸會自動去 series 下找數據進行圖表的繪制

2.1.1 柱狀圖的常見效果

標記

最大值\最小值 markPoint（哪組數據需要標記就在哪組數據下寫，無需在創造對象）

series: [{ ......markPoint: { data: [ { type: 'max', name: '最大值' },{ type: 'min', name: '最小值' } ] } } ]

平均值 markLine

series: [ { ...... markLine: { data: [ { type: 'average', name: '平均值' } ] } } ]

顯示

數值顯示 label

series: [ { ...... label: { show: true, // 是否可見 rotate: 60 // 旋轉角度 } } ]

柱寬度 barWidth

series: [ {...... barWidth: '30%' // 柱的寬度 } ]

橫向柱狀圖（所謂的橫向柱狀圖, 只需要讓x軸的角色和y軸的角色互換一下即可. 即 xAxis 的 type 設置為value , yAxis 的 type 設置為 category , 并且設置 data 即可）

var option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: xDataArr},series: [{type: 'bar',data: yDataArr}]}

2.1.2 通用配置

使用 ECharts 繪制出來的圖表, 都天生就自帶一些功能, 這些功能是每一個圖表都具備的, 我們可以通過配置, 對這些功能進行設置.

標題: title

var option = {title: {text: "成績", // 標題文字 textStyle: {color: 'red' // 文字顏色 },borderWidth: 5, // 標題邊框 borderColor: 'green', // 標題邊框顏色 borderRadius: 5, // 標題邊框圓角 left: 20, // 標題的位置 top: 20 // 標題的位置 }}

提示框: tooltip （tooltip 指的是當鼠標移入到圖表或者點擊圖表時, 展示出的提示框）

觸發類型: trigger

可選值有item\axis

觸發時機: triggerOn

可選值有 mouseOver\click

格式化顯示: formatter（分為字符串模板、回調函數 官方文檔：formatter）

var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: '{b}:{c}'}}// 這個{b} 和 {c} 所代表的含義不需要去記, 在官方文檔中有詳細的描述 var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: function(arg) {return arg.name + ':' + arg.data}}}

工具按鈕: toolbox

toolbox 是 ECharts 提供的工具欄, 內置有 導出圖片，數據視圖, 重置, 數據區域縮放, 動態類型切換五個工具
注意：工具欄的按鈕是配置在 feature 的節點之下

var option = {toolbox: {feature: {saveAsImage: {}, // 將圖表保存為圖片 dataView: {}, // 是否顯示出原始數據 restore: {}, // 還原圖表 dataZoom: {}, // 數據縮放 magicType: { // 將圖表在不同類型之間切換,圖表的轉換需要數據的支持 type: ['bar', 'line']}}}}

圖例: legend （legend 是圖例,用于篩選類別,需要和 series 配合使用）

注意：legend 中的 data 是一個數組；legend 中的 data 的值需要和 series 數組中某組數據的 name 值一致。

var option = {legend: {data: ['語文', '數學']},xAxis: {type: 'category',data: ['張三', '李四', '王五', '閏土', '小明', '茅臺', '二妞', '大強']},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar',data: [88, 92, 63, 77, 94, 80, 72, 86]}, {name: '數學',type: 'bar',data: [93, 60, 61, 82, 95, 70, 71, 86]}]}

2.2 折線圖

折線圖特點：折線圖更多的使用來呈現數據隨時間的『變化趨勢』
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 準備x軸的數據

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

• 步驟3 準備y 軸的數據

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

• 步驟4 準備 option , 將 series 中的 type 的值設置為: line

var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'line',data: yDataArr}]}

呈現

2.2.1 折線圖的常見效果

標記

最大值\最小值 markPoint

var option = {series: [{......markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]}}]}

平均值 markLine

var option = {series: [{......markLine: {data: [{type: 'average',name: '平均值'}]}}]}

標注區間 markArea

var option = {series: [{......markArea: {data: [[{xAxis: '1月'}, {xAxis: '2月'}],[{xAxis: '7月'}, {xAxis: '8月'}]]}}]}

線條控制

平滑線條 smooth

var option = {series: [{......smooth: true}]}

線條樣式 lineStyle

var option = {series: [{......,smooth: true,lineStyle: {color: 'green',type: 'dashed' // 可選值還有 dotted solid }}]}

填充風格 areaStyle

var option = {series: [{type: 'line',data: yDataArr,areaStyle: {color: 'pink'}}]}

緊挨邊緣 boundaryGap（boundaryGap 是設置給 x 軸的, 讓起點從 x 軸的0坐標開始）

var option = {xAxis: {type: 'category',data: xDataArr,boundaryGap: false}}

縮放, 脫離0值比例（如果每一組數據之間相差較少, 且都比0大很多, 那么有可能會出現這種情況，繪制出一根直線，所以我們要進行scale配置）

var option = {yAxis: {type: 'value',scale: true}}

堆疊圖（堆疊圖指的是, 同個類目軸上系列配置相同的 stack 值后，后一個系列的值會在前一個系列的值上相加）

var option = {series: [{type: 'line',data: yDataArr1,stack: 'all' // series中的每一個對象配置相同的stack值, 這個all可以任 意寫 }, {type: 'line',data: yDataArr2,stack: 'all' // series中的每一個對象配置相同的stack值, 這個all可以任意 寫 }]}

注意：第二條線在第一條線的基礎之上進行繪制. 基于前一個圖表進行堆疊

2.3 散點圖

散點圖的特點：散點圖可以幫助我們推斷出不同維度數據之間的相關性, 比如,看得出身高和體重是否正相關。也經常用在地圖的標注上
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 準備 x 軸和 y 軸 的數據

axisData 就是一個二維數組, 數組中的每一個元素還是一個數組, 最內層數組中有兩個元素, 一個代表身高, 一個代表體重

• 步驟3 準備配置項（xAxis 和 yAxis 的 type 都要設置為 value ；在 series 下設置 type:scatter）

var option = {xAxis: {type: 'value'},yAxis: {type: 'value'},series: [{type: 'scatter',data: axisData}]}

• 步驟4 調整配置項, 脫離0值比例

var option = {xAxis: {type: 'value',scale: true},yAxis: {type: 'value',scale: true},series: [{type: 'scatter',data: axisData,}]}

呈現

2.3.1 散點圖的常見效果

氣泡圖效果（要能夠達到氣泡圖的效果, 其實就是讓每一個散點的大小不同, 讓每一個散點的顏色不同）

symbolSize 控制散點的大小
itemStyle.color 控制散點的顏色
這兩個配置項都支持固定值的寫法, 也支持回調函數的寫法

固定值寫法：

var option = {series: [{type: 'scatter',data: axisData,symbolSize: 25,itemStyle: {color: 'green',}}]}

回調函數寫法：

var option = {series: [{type: 'scatter',data: axisData,symbolSize: function(arg) {var weight = arg[1]var height = arg[0] / 100 // BMI > 28 則代表肥胖, 肥胖的人用大的散點標識, 正常的人用小散點標識 // BMI: 體重/ 身高*身高 kg m var bmi = weight / (height * height)if (bmi > 28) {return 20}return 5},itemStyle: {color: function(arg) {var weight = arg.data[1]var height = arg.data[0] / 100var bmi = weight / (height * height)if (bmi > 28) {return 'red'}return 'green'}}}]}

漣漪動畫效果

type:effectScatter（將 type 的值從 scatter 設置為 effectScatter 就能夠產生漣漪動畫的效果）
rippleEffect（rippleEffect 可以配置漣漪動畫的大小）

var option = {series: [{type: 'effectScatter',rippleEffect: {scale: 3}}]}

showEffectOn
showEffectOn 可以控制漣漪動畫在什么時候產生, 它的可選值有兩個: render 和 emphasis
render代表界面渲染完成就開始漣漪動畫
emphasis 代表鼠標移過某個散點的時候, 該散點開始漣漪動畫

var option = {series: [{type: 'effectScatter',showEffectOn: 'emphasis',rippleEffect: {scale: 3}}]}

:結合地圖（散點圖也經常結合地圖來進行地圖區域的標注）

2.4 直角坐標系常見配置

直角坐標系的圖表指的是帶有x軸和y軸的圖表, 常見的直角坐標系的圖表有: 柱狀圖 折線圖 散點圖。針對于直角坐標系的圖表, 有一些通用的配置

網格 grid（grid是用來控制直角坐標系的布局和大小, x軸和y軸就是在grid的基礎上進行繪制的）

顯示 grid show: true
grid 的邊框 borderWidth : 10
grid 的位置和大小 left top right bottom width height

var option = {grid: {show: true, // 顯示grid borderWidth: 10, // grid的邊框寬度 borderColor: 'red', // grid的邊框顏色 left: 100, // grid的位置 top: 100,width: 300, // grid的大小 height: 150}}

坐標軸 axis（坐標軸分為x軸和y軸, 一個 grid 中最多有兩種位置的 x 軸和 y 軸）

坐標軸類型type
value : 數值軸, 自動會從目標數據中讀取數據
category: 類目軸, 該類型必須通過 data 設置類目數據

坐標軸位置
xAxis: 可取值為 top 或者 bottom
yAxis: 可取值為 left 或者 right

var option = {xAxis: {type: 'category',data: xDataArr,position: 'top'},yAxis: {type: 'value',position: 'right'}}

區域縮放 dataZoom

dataZoom 用于區域縮放, 對數據范圍過濾, x軸和y軸都可以擁有, dataZoom 是一個數組, 意味著
可以配置多個區域縮放器

區域縮放類型 type
slider: 滑塊
inside: 內置, 依靠鼠標滾輪或者雙指縮放

產生作用的軸
xAxisIndex :設置縮放組件控制的是哪個 x 軸, 一般寫0即可
yAxisIndex:設置縮放組件控制的是哪個 y 軸, 一般寫0即可

指明初始狀態的縮放情況
start : 數據窗口范圍的起始百分比
end : 數據窗口范圍的結束百分比

var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},dataZoom: [{type: 'slider',xAxisIndex: 0}, {type: 'slider',yAxisIndex: 0,start: 0,end: 80}]}

注意：針對于非直角坐標系圖表, 比如餅圖 地圖 等, 以上三個配置可能就不會生效了

2.5 餅圖

餅圖的特點：餅圖可以很好地幫助用戶快速了解不同分類的數據的占比情況
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 準備數據

var pieData = [{value: 11231,name: "淘寶",}, {value: 22673,name: "京東"}, {value: 6123,name: "唯品會"}, {value: 8989,name: "1號店"}, {value: 6700,name: "聚美優品"}]

• 步驟3 準備配置項 在series 下設置 type:pie

var option = {series: [{type: 'pie',data: pieData}]}

呈現

注意：餅圖的數據是由 name 和 value 組成的對象所形成的數組。餅圖無須配置 xAxis 和 yAxis

2.5.1 餅圖的常見效果

顯示數值

label.show : 顯示文字
label.formatter : 格式化文字

var option = {series: [{type: 'pie',data: pieData,label: {show: true,formatter: function(arg) {return arg.data.name + '平臺' + arg.data.value + '元\n' + arg.percent + '%'}}}]}

南丁格爾圖（南丁格爾圖指的是每一個扇形的半徑隨著數據的大小而不同, 數值占比越大, 扇形的半徑也就越大）

roseType:‘radius’

選中效果

selectedMode: ‘multiple’
選中模式，表示是否支持多個選中，默認關閉，支持布爾值和字符串，字符串取值可選 ‘single’ ， ‘multiple’ ，分別表示單選還是多選
selectedOffset: 30
選中扇區的偏移距離

var option = {series: [{type: 'pie',data: pieData,selectedMode: 'multiple',selectedOffset: 30}]}

圓環

radius
餅圖的半徑。可以為如下類型：
number：直接指定外半徑值。
string：例如， ‘20%’ ，表示外半徑為可視區尺寸（容器高寬中較小一項）的 20% 長度。
Array. ：數組的第一項是內半徑，第二項是外半徑, 通過 Array , 可以將餅圖設置為圓環圖

var option = {series: [{type: 'pie',data: pieData,radius: ['50%', '70%']}]}

呈現

2.6 地圖

地圖的特點：地圖主要可以幫助我們從宏觀的角度快速看出不同地理位置上數據的差異

2.6.1 地圖圖表的使用方式

百度地圖API : 使用百度地圖的 api , 它能夠在線聯網展示地圖, 百度地圖需要申請
矢量地圖 : 可以離線展示地圖, 需要開發者準備矢量地圖數據（地圖數據可以是json數據，也可以是js數據）

2.6.2 矢量地圖的實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 準備中國的矢量 json 文件, 放到 json/map/ 目錄之下（假設）
• 步驟3 使用 Ajax 獲取 china.json

$.get('json/map/china.json', function (chinaJson) { })

• 步驟4 在Ajax的回調函數中, 往 echarts 全局對象注冊地圖的 json 數據

$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })

• 步驟5 獲取完數據之后, 需要配置 geo 節點, 再次的 setOption

var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {echarts.registerMap('chinaMap', chinaJson) var option = {geo: {type: 'map', // map是一個固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數保持一致 }};mCharts.setOption(option)})

注意：由于在代碼中使用了 Ajax , 所以, 關于此文件的打開, 不能以 file 的協議打開, 應該將其置于 HTTP 的服務之下方可正常展示地圖

2.6.3 地圖的常見配置

縮放拖動: roam

var option = {geo: {type: 'map', // map是一個固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數保持一致, roam: true, // 運行使用鼠標進行拖動和縮放 }}

名稱顯示: label（顯示各個地名）

var option = {geo: {type: 'map', // map是一個固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數保持一致, roam: true,label: {show: true}}}

初始縮放比例: zoom 、地圖中心點: center

var option = {geo: {type: 'map', // map是一個固定的值 map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數保持一致, roam: true,label: {show: true},zoom: 0.8, // 地圖的縮放比例, 大于1代表放大, 小于1代表縮小 center: [87.617733, 43.792818] // 當前視角的中心點，用經緯度表示 }}

2.6.4 地圖的常見效果

顯示某個區域

當點擊某個省份時顯示該省份的矢量地圖，注冊地圖跟上述步驟一致，只是給ECharts實例添加點擊事件

不同城市顏色不同

- 顯示基本的中國地圖- 準備好城市數據, 并且將數據設置給 series- 將 series 下的數據和 geo 關聯起來- 結合 visualMap 配合使用

visualMap 是視覺映射組件, 和之前區域縮放 dataZoom 很類似, 可以做數據的過濾. 只不過dataZoom 主要使用在直角坐標系的圖表, 而 visualMap 主要使用在地圖或者餅圖中

var option = {geo: {type: 'map',map: 'chinaMap',roam: true,label: {show: true}},series: [{data: airData,geoIndex: 0,type: 'map'}],visualMap: {min: 0, // 最小值 max: 300, // 最大值 inRange: {color: ['white', 'red'] // 顏色的范圍 },calculable: true // 是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍） }}

地圖和散點圖結合

- 給 series 這個數組下增加新的對象- 準備好散點數據,設置給新對象的 data- 配置新對象的 type type:effectScatter、讓散點圖使用地圖坐標系統 coordinateSystem: 'geo'、- 讓漣漪的效果更加明顯 rippleEffect: { scale: 10 }

var option = {series: [{data: airData,geoIndex: 0,type: 'map'}, {data: scatterData,type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10}}]}

2.7 雷達圖

雷達圖的特點：雷達圖可以用來分析多個維度的數據與標準數據的對比情況
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2 定義各個維度的最大值

var dataMax = [{name: '易用性',max: 100}, {name: '功能',max: 100}, {name: '拍照',max: 100}, {name: '跑分',max: 100}, {name: '續航',max: 100}]

• 步驟3 準備具體產品的數據

var hwScore = [80, 90, 80, 82, 90] var zxScore = [70, 82, 75, 70, 78]

• 步驟4 在 series 下設置 type:radar

var option = {radar: {indicator: dataMax},series: [{type: 'radar',data: [{name: '華為手機1',value: hwScore}, {name: '中興手機1',value: zxScore}]}]}

2.7.1 雷達圖的常見效果

顯示數值 label（show:true）

區域面積 areaStyle （areaStyle: {}）

繪制類型 shape （雷達圖繪制類型，支持 ‘polygon’ 和 ‘circle’ ‘polygon’ : 多邊形、‘circle’ 圓形。配置在radar）

2.8 儀表盤圖

儀表盤的特點：儀表盤可以更直觀的表現出某個指標的進度或實際情況
實現步驟

• 步驟1 ECharts 最基本的代碼結構
• 步驟2: 準備數據, 設置給 series 下的 data data:[97]
• 步驟3: 在 series 下設置 type:gauge

var option = {series: [{type: 'gauge',data: [{value: 97,}]}]}

2.8.1 儀表盤的常見效果

數值范圍: max min

多個指針: 增加data中數組的元素

多個指針顏色的差異: itemStyle

var option = {series: [{type: 'gauge',data: [{value: 97,itemStyle: {color: 'pink'}}, {value: 85,itemStyle: {color: 'green'}}],min: 50}]}

3. ECharts配置項小結

3.1 柱狀圖 bar

series[].typexAxisyAxismarkPointmarkLinelabelbarWidth

圖表類型	x軸	y軸	最大值\最小 值	平均值	顯示文本	柱寬度

3.2 折線圖 line

series[].typexAxisyAxismarkPointmarkLinemarkAreasmoothlineStyleareaStyleboundaryGapscale

圖表類型	x軸	y軸	最大值\最小 值	平均值	標注區域	平滑線	線條風格	風格x軸	緊挨邊緣	脫離0值比例

3.3 散點圖 scatter

series[].typexAxisyAxissymbolSizeitemStyleshowEffectOnrippleEffectscale

圖表類型	x軸	y軸	散點大小	散點樣式	顯示時機	漣漪效果	脫離0值比例

3.4 餅圖 pie

series[].typelabelradiusroseTypeselectedModeselectedOffset

圖表類型	顯示文本	半徑	餅圖類型	是否多選	選中扇區偏移量

3.5 地圖 map

series[].typegeomaproamzoomcenterlabelgeoIndexvisualMapcoordinateSystem

圖表類型	地理坐標系組件	指明地圖數據	開啟鼠標拖動和縮放	平均值	圖表的中心點	是否顯示地區	指明關聯的geo組 件	視覺映射組件	使用坐標系統

3.6 雷達圖 radar

series[].typeradarindicatorlabelareaStyleshape

圖表類型	雷達圖組件	雷達圖的指示器	文字	區域顏色	雷達圖形狀

3.7 儀表盤 gauge

series[].typemaxminitemStyle

圖表類型	最大值	最小值	指針樣式

3.8 直角坐標系配置

grid

show[].typeborderWidthborderColorlefttoprightbottomwidthheight

是否可見	邊框寬度	邊框顏色	左邊	頂部	右邊	底部	寬度	高度

axis

typedataposition

軸類型	數據	顯示位置

dataZoom

typexAxisIndexyAxisIndexstartend

縮放塊類型	x軸索引	y軸索引	初始值	結束值

3.9 通用配置

title

textStyleborderWidthborderColorborderRadiuslefttoprightbottom

文字樣式	邊框寬度	邊框顏色	邊框圓角	左邊	頂部	右邊	底部

tooltip

triggertriggerOnformatter

觸發類型	觸發時機	內容自定義

toolbox.feature

saveAsImagedataViewrestoredataZoommagicType

保存圖片	數據視圖	重置	縮放	圖表轉換

legend

data

圖例數據, 需要和series數組中某組數據的name值一致

4. ECharts高級

4.1 顯示相關

4.1.1 主題

默認主題

ECharts 中默認內置了兩套主題: light、dark在初始化對象方法 init 中可以指明

var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark')

自定義主題

- 在主題編輯器中編輯主題（可以自定義很多內容）：[去編輯](https://echarts.apache.org/zh/theme-builder.html)- 下載主題, 是一個 js 文件- 引入主題 js 文件- 在 init 方法中使用主題

4.1.2 調色盤

它是一組顏色，圖形、系列會自動從其中選擇顏色, 不斷的循環從頭取到尾, 再從頭取到尾, 如此往復.

主題調色盤

echarts.registerTheme('itcast', {"color": ["#893448", "#d95850", "#eb8146", "#ffb248", "#f2d643", "#ebdba4"],"backgroundColor": "rgba(242,234,191,0.15)",......})

全局調色盤（全局調色盤是在 option 下增加一個 color 的數組）

var option = { color: ['red', 'green', 'blue'],// 全局調色盤 ......}mCharts.setOption(option)

局部調色盤（局部調色盤就是在 series 下增加一個 color 的數組）

var option = { // 全局調色盤 color: ['red', 'green', 'blue'],series: [{type: 'pie',data: pieData, // 局部調色盤 color: ['pink', 'yellow', 'black']}]}mCharts.setOption(option)

注意：如果全局的調色盤和局部的調色盤都設置了, 局部調色盤會產生效果, 這里面遵循的是就近原則

漸變顏色的實現（在 ECharts 中, 支持線性漸變和徑向漸變兩種顏色漸變的方式）

線性漸變
線性漸變的類型為 linear , 他需要配置線性的方向, 通過 x, y, x2, y2 即可進行配置。
x , y , x2 , y2 ,范圍從 0 - 1，相當于在圖形包圍盒中的百分比，如果 global 為 true ，則該四個值是絕對的像素位置 在下述代碼中的0 0 0 1意味著從上往下進行漸變

series: [{type: 'bar',data: yDataArr,itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 處的顏色 }, {offset: 1,color: 'blue' // 100% 處的顏色 }],globalCoord: false // 缺省為 false }}}]

徑向漸變
徑向漸變的類型為 radial , 他需要配置徑向的方向, 通過x , y , r 即可進行配置前三個參數分別是圓心 x , y 和半徑，取值同線性漸變
在下述代碼中的 0.5 0.5 0.5 意味著從柱的重點點, 向外徑向擴散半徑為寬度一半的圓

series: [{itemStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'red' // 0% 處的顏色 }, {offset: 1,color: 'blue' // 100% 處的顏色 }],global: false // 缺省為 false }}}]

4.1.3 樣式

直接樣式

itemStyle textStyle lineStyle areaStyle label

data: [{value: 11231,name: "淘寶",itemStyle: {color: 'black'}}] title: {text: '我是標題',textStyle: {color: 'red'}}label: {color: 'green'}

注意：這些樣式一般都可以設置顏色或者背景或者字體等樣式, 他們會覆蓋主題中的樣式

高亮樣式

圖表中, 其實有很多元素都是有兩種狀態的, 一種是默認狀態, 另外一種就是鼠標滑過或者點擊形成的高亮狀態. 而高亮樣式是針對于元素的高亮狀態設定的樣式（,在 emphasis 中包裹原先的 itemStyle）

series: [{type: 'pie',label: {color: 'green'},emphasis: {label: {color: 'red'},},data: [{value: 11231,name: "淘寶",itemStyle: {color: 'black'},emphasis: {itemStyle: {color: 'blue'},}}]}]

4.1.4 自適應

實現步驟

• 步驟1: 監聽窗口大小變化事件
• 步驟2: 在事件處理函數中調用 ECharts 實例對象的 resize 即可

4.2 動畫的使用

ECharts 已經內置好了加載數據的動畫, 我們只需要在合適的時機顯示或者隱藏即可

4.2.1 加載動畫

顯示加載動畫

mCharts.showLoading() 一般, 我們會在獲取圖表數據之前 顯示加載動畫

隱藏加載動畫

mCharts.hideLoading() 一般, 我們會在獲取圖表數據之后 隱藏加載動畫, 顯示圖表

4.2.2 增量動畫

所有數據的更新都通過 setOption 實現, 我們不用考慮數據到底產生了那些變化, ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。

4.2.3 動畫的配置

開啟動畫

animation: true

動畫時長

animationDuration: 5000

緩動動畫（眾多參數看官網https://echarts.apache.org/examples/zh/editor.html?c=line-easing）

動畫閾值

animationThreshold: 8

單種形式的元素數量大于這個閾值時會關閉動畫

4.3 交互API

4.3.1 全局echarts 對象

全局 echarts 對象是引入 echarts.js 文件之后就可以直接使用的

echarts.init（初始化ECharts實例對象 使用主題）

echarts.registerTheme（注冊主題 只有注冊過的主題,才能在init方法中使用該主題）

echarts.registerMap（注冊地圖數據）

echarts.connect
- 一個頁面中可以有多個獨立的圖表
- 每一個圖表對應一個 ECharts 實例對象
- connect 可以實現多圖關聯，傳入聯動目標為 EChart 實例，支持數組

4.3.2 echarts實例（echartsInstance）對象

eChartsInstance 對象是通過 echarts.init 方法調用之后得到的

echartsInstance.setOption

設置或修改圖表實例的配置項以及數據 多次調用setOption方法 合并新的配置和舊的配置 增量動畫

echartsInstance.resize

重新計算和繪制圖表一般和window對象的resize事件結合使用 window.onresize = function(){ myChart.resize(); }

echartsInstance.on 、echartsInstance.off

綁定或者解綁事件處理函數（on多用于初始化圖標實例后）

echartsInstance.dispatchAction（主動觸發某些行為, 使用代碼模擬用戶的行為）

// 觸發高亮的行為 mCharts.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 1})// 觸發顯示提示框的行為 mCharts.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: 3})

echartsInstance.clear

清空當前實例，會移除實例中所有的組件和圖表 清空之后可以再次 setOption

echartsInstance.dispose

銷毀實例 銷毀后實例無法再被使用

OVER（報告大哥：您已成功拿下ECharts）

總結

以上是生活随笔為你收集整理的ECharts实操手册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。