ECharts初級配置指南
初始化
記住三個步驟：init + option + setOption
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
然而 init 與 setOption 并沒有什么技術含量，就一句代碼的事。咱們直接把焦點放在 option 上就好。
如果是在 react 項目中使用 ECharts , 可以使用插件 echarts-for-react
配置項
配置項守則
這是個人在做項目的一路下來的一些總結，不一定適合所有人所有項目，但對于剛剛接觸echarts，對一切配置項都一臉懵逼的童鞋來說，可以首先掌握以下幾個，能解決入門遇到的70%的配置。
一般圖形配置
ECharts 中有一些通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等，這些樣式一般都會在系列的 itemStyle 里設置。
部分涉及到線條樣式的都會在 lineStyle 里設置。
文字部分的樣式一般會在 textStyle 里設置。
圖表大部分配置，都會區分兩種狀態：normal 與 emphasis。
normal是圖形在默認狀態下的樣式；
emphasis是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
至于里面具體的配置項，就是充分體現CSS 功底的時候了
{
color: '#000',
width: 2,
type: solid,
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
}
刻度
刻度主要在折線圖、柱狀圖上設置顏色與分段，在儀表盤上應用則設置的種類較多。
常用的主要有一下幾項：
{
axisLine: {...}, // 坐標軸線
axisTick: {...}, // 坐標軸刻度樣式
axisLabel: {...}, // 坐標軸上的數值標記
splitLine: {...}, // 坐標分隔線（分段刻度）
}
還是按照上面的“規則”，字體用textStyle, 線條用lineStyle.
設置后的代碼片段：
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默認透明
shadowBlur: 10
}
},
axisLabel: { // 坐標軸小標記
textStyle: { // 屬性lineStyle控制線條樣式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默認透明
shadowBlur: 10
}
},
axisTick: { // 坐標軸小標記
length :12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto',
shadowColor : '#fff', //默認透明
shadowBlur: 10
}
},
splitLine: { // 分隔線
length :20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width:3,
color: '#fff',
shadowColor : '#fff', //默認透明
shadowBlur: 10
}
},
位置
幾乎所有的標題、標記描述、圖例等都有特性的位置控制。
主要以 top, left, right, bottom 四個屬性控制。
默認值是
auto
值可以為數值(100)、百分比(20%)
左右還可以為left,center,right
上下為top, middle, bottom
配置項簡介
常用的在用途上有寫明，空白的都比較少用，使用到的話自己去查找哪些可配置。
| 配置項 | 用途 | 備注 |
|---|---|---|
| title | 標題、副標題 | |
| legend | 圖例 | |
| grid | 圖表繪制區域 | |
| xAxis | x軸 | |
| yAxis | y軸 | |
| polar | 極坐標系 | |
| radiusAxis | ||
| angleAxis | ||
| radar | 雷達 | |
| dataZoom | 區域縮放控件 | xy軸上數據量較大的時候，可以通過選擇放大/縮小區域范圍，使數據更直觀 |
| visualMap | 視圖映射組件 | |
| tooltip | 提示框組件 | 可以設置在全局、坐標系、系列、系列的每個數據項中 |
| axisPointer | 坐標軸指示器：指示坐標軸當前刻度的工具 | |
| toolbox | 工具欄 | 內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。 |
| brush | ||
| geo | ||
| parallel | ||
| parallelAxis | ||
| singleAxis | ||
| timeline | ||
| graphic | 圖形元素組件 | 可以自定義顯示的圖形，如溫度計?? |
| calendar | 日歷坐標系組件 | |
| series | 系列列表 | 每個系列通過 type 決定自己的圖表類型 |
| color | 調色盤顏色列表 | |
| backgroundColor | 背景色，默認無背景 | |
| textStyle | 全局的字體樣式 | |
| animation | ||
| animationThreshold | ||
| animationDuration | ||
| animationEasing | ||
| animationDelay | ||
| animationDurationUpdate | ||
| animationEasingUpdate | ||
| animationDelayUpdate | ||
| progressive | ||
| progressiveThreshold | ||
| blendMode | ||
| hoverLayerThreshold | ||
| useUTC |
事件
在 ECharts 中事件分為兩種類型，一種是用戶鼠標操作點擊，或者 hover 圖表的圖形時觸發的事件，還有一種是用戶在使用可以交互的組件后觸發的行為事件，例如在切換圖例開關時觸發的 legendselectchanged 事件（這里需要注意切換圖例開關是不會觸發legendselected事件的），數據區域縮放時觸發的 datazoom 事件等等。
詳細的事件使用請參考文檔，這里僅介紹三個事件。
click
click 事件在全局監聽。
myChart.on('click', function (params) {
console.log('Hello ECharts!');
});
所有的鼠標事件包含參數 params，這是一個包含點擊圖形的數據信息的對象
{
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
seriesIndex: number,
// 系列名稱。當 componentType 為 'series' 時有意義。
seriesName: string,
// 數據名，類目名
name: string,
// 數據在傳入的 data 數組中的 index
dataIndex: number,
// 傳入的原始數據項
data: Object,
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data，dataType 無意義。
dataType: string,
// 傳入的數據值
value: number|Array
// 數據圖形的顏色。當 componentType 為 'series' 時有意義。
color: string
}
具體獲取到的數據根據 params 中的屬性進行判斷與篩選。更多可參考ECharts 中的事件和行為
legendselectchanged
圖例更換 返回對象的 selected 屬性就是當前的圖例列表的狀態。與 legend 的 selected 一致。
datazoom
數據區域縮放后的事件。
鼠標的滾動縮放與拖拽區域組件上的變換截然不同。
但都觸發 datazoom 事件, 只是從事件中獲取的對象不一樣。
可以參考一下代碼片段
handleDataZoomChange = (e) => {
var that = this;
var start = 0, end = 0;
if (e.dataZoomId) {
start = e.start;
end = e.end;
} else if (e.batch && e.batch.length>0) {
start = e.batch[0].start;
end = e.batch[0].end;
}
// deal with start and end here
}
知多D
圖表的發光效果
發光效果在一些深色系的呈現中可以為視覺增加一定的奇妙效果。例如邊框發光，元素發光等。
發光效果主要實現是采用
陰影 (shadow)原理。
如圖片中就是使用box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);，為每一個邊框增加一些白色的“光芒”。
box-shadow 的具體參數配置可參考文檔
而在圖表中已經封裝好了許多樣式效果，如果需要帶發光的效果，就直接設置
shadowColor : '#fff', shadowBlur: 10, 效果如圖
折線圖上添加漸變
在深色系呈現方式下的折線圖，在添加了一層漸變的效果之后，立馬從屌絲變成富二代。
這一層漸變效果是在
series里面數據項的areaStyle 區域填充樣式屬性中實現的.
areaStyle: { //區域填充樣式
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //填充的顏色。
offset: 0, // 0% 處的顏色
color: 'rgba( 18,133,243, 0.7)'
}, {
offset: 0.8, // 80% 處的顏色
color: 'rgba( 18,133,243, 0.15)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)', //陰影顏色。支持的格式同color
shadowBlur: 10 //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果
}
}
漸變效果具體配置參數請參考文檔
阻止當鼠標處于在數據上方時的鼠標效果
這個操作有點奇葩，但是在圖表實現時候，的確是需要的。
例如百分比的顯示，其實使用餅狀圖兩個數據項共同顯示的：20%,80%。
當用戶把鼠標放在 20% 的數據上時(紅色部分)，鼠標 hover 會使得該部分有不一樣的效果，這個表現效果可能狠狠地抓住了用戶的關注點。
但是如果把鼠標放在灰色的 80% 部分時（該部分無實際數據意義，僅僅由于表現而存在），如果有同樣的提醒，似乎多此一舉了。所以這時候需要設置
hoverAnimation: false, 關閉了該項的鼠標效果。
而如果整個都不需要鼠標hover效果, 則是使用 silent 屬性
如溫度計，溫度計的圖形已經是一種別致的表現效果，可以不需要鼠標放在上方時還展示有其他效果，就可以直接禁止所有的鼠標事件。
legend 對象內的部分屬性失效
當數據類型較多的時候，圖例展示會相當的占位，所占面積有時甚至會比圖表還多。
ECharts 提供一個圖例分頁展示的屬性： demo
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: [...]
}
但是在使用
React的項目中引用ECharts ，legend 的 scroll 屬性會失效。
作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小游戲。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發，專注于前端框架、服務端渲染、SEO技術、交互設計、圖像繪制、數據分析等研究。
歡迎和我們一起并肩作戰： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多
