ECharts 3 測試版發布，煥然一新的面貌
ECharts 3 測試版發布
注：由于直接轉載內容，文章中實例效果無法查看，如需查看詳情請往 ECharts3 帶來了什么
ECharts 在 github 上沉寂了數個月，想必很多小伙伴充滿了各種疑問，ECharts是不是不維護了？你們以后是不是不做了？別著急，其實這幾個月，我們的設計師、工程師一直厲兵秣馬，加班加點，沒有周末，沒有女朋友地瘋狂工作中。 終于，ECharts 的又一個重大版本即將出爐，在 ECharts 3 正式版發行前，我們選擇了今天，12.3，一個能夠隱喻我們一步一步從1.0到2.0再到3.0走來的日子，提前給廣大用戶帶來 ECharts 3 的測試版。 那 ECharts 3 究竟會有哪些新的特征，我們用數月究竟在顛覆著自己的什么呢？接下來讓我們一一為您道來：
煥然一新的面貌
從底層的技術架構到上層的外觀展現，都進行了較大的升級。無需多言，請看下面的諸多例子。
數據和坐標系的抽象及統一
ECharts 3 中，數據結構進行了統一化抽象，最常用的數據結構有：線性表、樹、圖。例如，線性表以及樹、圖的節點列表的結構可以歸一化為這樣的二維數組：
[ [1,91,45,125,"良"], [2,65,27,78,"良"], [3,83,60,84,"優"], ... ]
這種設計利于跨組件的數據處理（數據過濾、視覺編碼等），并且為多維度的數據使用帶來了方便。
ECharts 3 中另一個重要的數據結構抽象是獨立出了“坐標系”概念。事實上在 ECharts 2 中已經有gridpolar配置項存在，但是并不是按一個“坐標系”的理解去實現的。ECharts 3 中，支持了直角坐標系（catesian，兼容 ECharts 2 中的 grid）、極坐標系（polar）、地理坐標系（geo）。圖表可以跨坐標系存在，例如折、柱、散點等圖可以放在直角坐標系上，也可以放在極坐標系上，甚至可以放在地理坐標系中。
下面是一個極坐標系的例子：
點擊圖片加載真實圖表
下面是一個散點圖在地理坐標系上的例子：
點擊圖片加載真實圖表
我們要可視化的數據有多種類型，比如“數值型”、“類別型”，數軸也要對這不同的類型給予支持。更細致的，還支持“時間軸”、“對數軸”等。數據和坐標系統一抽象后，能夠方便得搭配不同類型的數軸。
下面是一個x軸y軸均為“類別型“數軸（category）的例子：
點擊圖片加載真實圖表
一個 ECharts 實例中，也可以同時存在多個坐標系了，這便于做出更豐富的協同分析效果。
下面是著名的 Anscombe's Quartet：
點擊圖片加載真實圖表
其實，ECharts 3 中每一種組件都可以同時存在多個。比如可以使用多個dataRange組件進行更復雜的篩選，多個title組件表達更個性化的文字展示。在 Option 中，用數組來表示每種組件的多個實例，如：
polar: [
{...}, // 第一個極坐標系
{...}, // 第二個極坐標系
...
] 移動支持
流量珍貴的移動端需要圖表庫的體積盡量小。ECharts 和 ZRender 代碼的重構，帶來了核心部分體積的減小。ECharts 組件眾多，并且會逐漸增加，我們提供了更細粒度的按需打包能力。最小體積縮小為 ECharts 2 的 40%。
這是 ECharts 3 的在線構建頁面
移動端交互也做了優化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移，如下圖：
點擊圖片加載真實圖表
配置方式說明：
chart.setOption({
..., // 其他配置項
dataZoom: [
// 下面來定義三個dataZoom組件
{
type: 'inside', // 表示手指或鼠標的操作區域在坐標系中。
xAxis: 0,
start: 20,
end: 70
}
]
}); 另外說一個細節：ECharts 2 中，直角坐標系的位置設置參數（x, y, x2, y2 等），設置的是“兩個數軸所形成的矩形”的位置，并不包含數軸的文字、刻度。這種做法使得數據變化時數軸位置能夠穩定，從而方便存在動態數據或數據過濾組件（dataZoom）等場景下的展示。但是缺點是，使用者需要估算數軸文字的寬度，并不方便使用。ECharts 3 中，直角坐標系（grid屬性）中加入了 containLabel 參數，位置參數包含了數軸文字的尺寸，從而方便自適應數軸文字的寬度，不用擔心超出屏幕。
grid: {
containLabel: true
} ECharts 3 還將持續對移動端的體驗進行優化。
更深度的交互式數據探索
交互是從數據中發掘信息的重要手段。總覽為先縮放過濾按需查看細節是數據可視化交互的基本需求。
ECharts 一直在“交互”的路上前進，legenddataRangedataZoomroamselecttooltip等組件提供了數據篩取、視圖縮放、展示細節等能力。
ECharts 3 中，對這些組件進行了廣泛增強，例如支持在數據的各種坐標軸、維度進行數據過濾、縮放，以及在更多的圖中采用這些組件。下面舉幾個例子。
點擊圖片加載真實圖表
在任何數軸，都支持使用dataZoom組件進行數據窗口操作。 如上圖，在左右y軸的dataZoom，
配置方式說明：
chart.setOption({
..., // 其他配置項
dataZoom: [
// 下面來定義三個dataZoom組件
{
xAxis: 0, // 這個dataZoom組件控制x軸。
start: 10, // 初始時，區域開始自總長的 10%。
end: 30 // 初始時，區域結尾為總長的 30%。
},
{
yAxis: 0, // 這個dataZoom組件控制第一個y軸。
filterMode: 'empty' // 數據過濾的方式，可選值'filter'或'empty'。
// 'filter'表示dataZoom窗口外的節點直接刪去，折線會連接。
// 'empty'表示dataZoom窗口外的節點設置為缺失點，折線會斷開。
},
{
yAxis: 1 // 這個dataZoom組件控制第二個y軸
}
]
}); 另一個例子：
點擊圖片加載真實圖表
上圖的數據實際是多維的：
[ [1,91,45,125,0.82,34,23,"良"], [2,65,27,78,0.86,45,29,"良"], [3,83,60,84,1.09,73,27,"良"], [4,109,81,121,1.28,68,51,"良"], [5,106,77,114,1.07,55,51,"輕度污染"], [6,109,81,121,1.28,68,51,"輕度污染"], [7,106,77,114,1.07,55,51,"輕度污染"], [8,89,65,78,0.86,51,26,"良"], ... ]
里面每一列是一個維度，從左到右，依次是：
日期AQI指數PM2.5PM10一氧化碳 (CO)二氧化氮 (NO2)二氧化硫 (SO2)等級。
一個直角坐標系只有兩個軸，我們可以把第一個維度（時間）映射到x軸，第二個維度（AQI指數）映射到y軸。但如果想對其他維度的數據進行視覺表達和交互式的篩選，則可以用到上圖中的dataRange組件。
第一個dataRange組件表達了PM2.5這一維度的篩選，把數值映射到了圓形大小；
第二個dataRange組件表達了二氧化硫這一維度的篩選，把數值映射到了顏色明暗。
配置方式說明：
視覺映射配置在inRangeoutOfRange屬性中。
圖表的和dataRange組件本身的能分別配置這兩個屬性（見下面方controller屬性） 。
inRangeoutOfRange中，能夠配置的視覺通道有：color,colorSaturation,colorLightness,colorHue,symbol,symbolSize。
color設置為顏色值列表，如[#324123, '#453e2f', '#756ff2', ...]，會自動根據數值進行差值計算，得到映射的顏色。
其他視覺通道均使用數組的形式表明 [最小值, 最大值]。
chart.setOption({
..., // 其他配置項
dataRange: [
{ // 右上方的dataRange組件
dimension: 2, // 這個dataRange組件把維度2的數值進行視覺映射
// 維度從零開始計數，維度值2表示第三個維度。
min: 0, // 最小值
max: 250, // 最大值
calculable: true,
text: ['圓形大小：PM2.5'],
inRange: {
symbolSize: [10, 70] // 選中范圍內的數值被映射到10px~70px的圖形尺寸上
},
outOfRange: {
symbolSize: [10, 70], // 選中范圍外的數值被映射到10px~70px的圖形尺寸上
color: ['rgba(255,255,255,.2)'] // 選中范圍外設置為灰色
},
controller: {
inRange: {
color: ['#c23531'] // dataRange組件本身的（選中范圍內的）顏色
},
outOfRange: {
color: ['#444'] // dataRange組件本身的顏色（選中范圍外的）顏色
}
},
..., // 其他位置、尺寸、樣式相關配置項
},
{ // 右下方的dataRange組件
dimension: 6, // 這個dataRange組件把維度6的數值進行視覺映射
min: 0,
max: 50,
calculable: true,
precision: 0.1,
text: ['明暗：二氧化硫'],
inRange: {
colorLightness: [1, 0.5] // 選中范圍內的數值被映射到1~0.5的顏色亮度上
// 顏色亮度（lightness）的含義是 HLV 中的L。
},
outOfRange: {
color: ['rgba(255,255,255,.2)'] // dataRange組件本身的顏色（選中范圍外的）顏色
},
controller: {
inRange: {
color: ['#c23531'] // dataRange組件本身的（選中范圍內的）顏色
},
outOfRange: {
color: ['#444'] // dataRange組件本身的顏色（選中范圍外的）顏色
}
}
}
]
}); 更豐富的視覺編碼手段
“數據可視化”本質是數據到視覺元素的編碼過程。我們把數據映射到坐標系中的點，或者顏色、形狀、圖形大小等視覺通道。前述的dataRange提供了豐富的視覺編碼的方式。另外在各種圖中，也提供了一些有一定意義的視覺編碼方式。例如：
點擊圖片加載真實圖表
這個Treemap是奧巴馬2012年的預算，每種類別的預算額度映射到了面積，使我們可以直觀地感受到預算額的大小。而如果在這個圖上，要進一步描述相比于 2011年 的增長率，我們可以將其映射到顏色的明暗度上。點擊右上角圖例中第三項“增長率”，能體會到這種比較效果。
映射到明暗的配置方式說明：
chart.setOption({
..., // 其他配置項
series: [
{
type: 'treemap',
data: [
{
value: [121212, 131313, 50],
name: 'Centers for Medicare',
children: [
{ ... }
]
},
...
],
visualDimension: 2, // 表示用data的value[2]的數值（即增長率）進行顏色映射
levels: [ // levels 中設置了樹的每層級的參數。level[0]是最頂層。
{
color: [
'#c23531', '#314656', '#61a0a8', '#dd8668',
'#91c7ae', '#6e7074', '#61a0a8', '#bda29a',
'#44525d', '#c4ccd3'
], // 這是根層級的顏色列表，每個塊分配的顏色會向子樹傳遞
colorMappingBy: 'id' // 表示根層級的的數值按照類別映射到映射列表
},
{
colorAlpha: [0.5, 1] // 第二層級開始，數值映射到color的alpha值。
}
],
... // treemap series中其他配置項
}
]
}); 動畫
支持動畫并不容易，容易帶來代碼結構的復雜、體積的增加、魯棒性的降低。但是在可視化中動畫往往易于表達出數據在變化時的聯系，使用戶不至于迷失焦點，這些對于用戶交互分析、動態數據展示有著重要作用。
ECharts 3 中在各種初始動畫、轉換動畫、強調動畫上都做了相當多的工作，使得數據觀察更人性和清晰。
動畫表達變化的一個例子，各國人均收入（x軸）、平均壽命（y軸）、人口（圓面積）在時間維度上的展現：
點擊圖片加載真實圖表
新圖表
ECharts 3 中加入了一些新的圖表。
關系圖（Graph）：最直觀的表達關系數據。支持了 gexf。能夠采用不同的布局方法。
點擊圖片加載真實圖表
Treemap：易于展示樹狀結構的數據，較大的數據更容易被關注到。
點擊圖片加載真實圖表
平行坐標系（Parallel Coordinates）：易于表達多維數據。
點擊圖片加載真實圖表
TODO 更多的圖表還有待被加入。
Option的變動
ECharts 3 對于 ECharts 2 的 Option 配置兼容，但是一小部分原有的 Option 配置方式已經不被推薦（deprecated），個別細節有所差異。
-
組件/圖表位置的統一配置
組件/圖表位置的描述，統一采用了x，x2，y，y2，width，height的方式，每個屬性值都可以使用絕對數值（表示px）或者百分比（表示占 echarts container 的百分比）。這樣的表達方式和 css 比較相近，表達能力比較強，易于屏幕尺寸的適應和調整。
-
label的配置結構的變化
label屬性描述了系列中標簽的相關配置信息。
ECharts 2 中，label屬性一般放在itemStyle.normal和itemStyle.emphsis中，例如：
itemStyle: {
normal: {
...,
label: {
show: true,
formatter: ...,
textStyle: {
...
}
}
},
emplsis: {
...,
label: {
show: true,
position: 'top',
formatter: ...,
textStyle: {
...
}
}
}
} 為了讓結構更合理，ECharts 3 中 label 被移出來和 itemStyle 平級：
itemStyle: {
normal: {
...
},
emphsis: {
...
}
},
label: {
normal: {
...
},
emphasis: {
...
}
} 當然，原來的配置方式還是兼容的，但是不推薦。
另外，ECharts 3 中新增了不少Option配置項，在前面的例子中簡單做了一些介紹了，這里不贅述。更多細節會在將要發布的文檔中描述。
更豐富、漂亮的圖表、更炫酷的動畫、更加專業的可視化實現、更深度的交互式數據探索、更豐富的視覺編碼手段、更好的移動支持、更好的性能、更小的體積，不知道上面的新特性是否有擊中您對于圖表、對于數據可視化的需求與痛點，如果還沒看過癮，可以點擊我們全新的示例頁面查看更多漂亮而強大的 ECharts 圖表。
在 3.0 正式版發布之前，我們還有很多的工作需要完善：
-
完善產品質量，這需要廣大 ECharts 用戶的共同參與，如果您在使用 ECharts 3 測試版過程中有任何問題，歡迎通過以下渠道向我們反饋
-
通過發郵件給我們的郵箱 echarts-bug@baidu.com
-
加入我們的 ECharts 溝通 Baidu Hi群組（1379172）
-
完善文檔、相關示例、以及學習資料
正式版我們將精耕細作，為大家帶來一份優質的新年禮物。
最后，歡迎大家繼續支持 ECharts，我們會一如既往地給大家帶來優秀的產品。