前言
作為一個前端打字員，除了綠茶婊之外，最討厭的就是圖表：一個讓我傷心，一個讓我難過；比這更討厭的就是文件寫得不清不楚的圖表庫（大概率是九年義務教育期間沒有學好語文），讓我又愛又恨！所以本篇博文會比較枯燥，只簡單描述一下使用BizCharts的過程，當然，重要的是總結遇到的坑（遵從一個坑不踩兩次，一個女生不泡兩次原則）。
By the way，提到BizCharts，讓我們感謝一下阿里巴巴：其開源了這個好用的（雖然偶爾不那麼好用，還偶得挺經常的）的react圖表庫供大家使用，對使用react技術棧的前端打字員來說簡直就是福音。本文不會有過多的api解釋，具體的介面可以看官網文件鬼門關。
正經篇幅
剛開始， 視覺設計師哄我說：“我的要求並不高，待我從前一樣好”，啊呸，說錯了，“我的要求是：只要能把資料用直方圖展現出來就好了”，so easy
// 引入相關的元件 import {
Chart, Axis, Tooltip, Geom
} from 'bizcharts';
// 隨便mock一下資料 const str = ['we', 'are', 'the', 'black', 'gold', 'team'];
const mockData = () =>
{
let result = [];
for (let i = 0, len = 6;
i <
len;
i++) {
result.push({
xAxis: ticks[i], yAxis: Math.floor(Math.random() * 100)
});
} return result;
};
// 圖表元件 <
Chart width={
600
} height={
400
} data={
mockData()
} >
{/* x軸，橫軸，以data資料的xAxis屬性值為柱子的值 */
} <
Axis name="xAxis" />
{/* y軸，縱軸，以data資料的yAxis屬性值為柱子的值 */
} <
Axis name="yAxis" />
{/* 滑鼠hover直方圖柱子的時候，tooltip顯示的值 */
} <
Tooltip />
{/* 幾何標記物件，主要用以描述你要畫的是什麼圖形（直方圖、折線圖、餅狀圖、區域圖）：interval是直方圖 */
} <
Geom type="interval" position="xAxis*yAxis" />
<
/Chart>
複製程式碼一波操作猛如狗，讓視覺設計師看看效果：
note：此直方圖每一根柱子都是單點的，也就是其反映了某個橫座標點的資料情況。加入我們需要一個連續區間柱子，那麼作為xAxis的資料欄位值應該為一個陣列，包含兩個元素，表明區間的起始值。
const mockData = () =>
{
let result = [];
for (let i = 0, len = 6;
i <
len;
i++) {
result.push({
xAxis: [i + 0.01, i + 1 - 0.01], // 如果不加減0.01，那麼第一根柱子的終點跟第二根柱子的起點是同一個，會感覺兩個柱子粘在一起 yAxis: Math.floor(Math.random() * 100)
});
} return result;
};
複製程式碼視覺設計師：“emmmmmm，圖表長寬定死了會不會有點僵硬啊，高度可以寫死，寬度總得來個自適應吧？”
“毛悶臺”
<
Chart height={
400
} data={
mockData()
} forceFit // 我媽說了（guanfang wendang shuode），加上這個屬性就可以使圖表寬度自適應了，隔壁echart同學要學習一下 >
<
/Chart>
複製程式碼效果秀一波
視覺（蜜汁微笑）：“猿子，你這玩意有bug啊”
“胡說，你這傻*不會用吧”
（理直氣壯）“哼哼，放大視窗圖表寬度確實會自適應，但是縮小就掛掉了（並不自適應），ahhhhhh”
（諂媚）“討厭，再給我兩分鐘~~讓我把bug結成冰。。。”
note: 實驗表明，如果Chart元件的父元件Father採用flex佈局，即Father使用flex自適應寬度，那麼就會出現上述的問題；所以，如果有多個圖表同行並列佈局，請不要使用flex佈局，給Father元件的寬度設定為百分比吧，此時的forceFit就會起作用了。同時， BizCharts對重繪設定了防抖，只有當停止縮放的時候才會重繪。
（屌到飛起）“over，拿去用吧”
（一臉鄙視）“哇喔~好棒棒呀，敢不敢讓我調一點點小細節，我保證就一點點！”
“Come on baby！”
“
- 滑鼠hover柱子的時候，為什麼柱子後面有個很醜的方框，換個顏色吧！
- 滑鼠hover柱子的時候，出現的tooltip樣式醜爆了，待會我給你設計一個吧
- 滑鼠hover柱子的時候，柱子的顏色應該有所改變，對使用者比較友好！！！
- …哎， 你別拿刀啊~~~
”
把視覺殺了之後，需求還是要做的，先解決 死者的第一個遺願。
Tooltip元件提供了一個屬性crosshairs，用以設定tooltip的輔助線和輔助框； 預設情況下，此屬性會為’line’、‘area’、‘path’、‘areaStack’型別的Geom元件開啟垂直輔助線、為‘interval’型別的Geom 元件展示矩形背景框。死者說的很醜的方框就是這個！
<
Tooltip crosshairs={
false
}/>
複製程式碼好的，把框去掉了！咦，我們不是說要修改它的顏色嗎？好的，改一下
<
Tooltip crosshairs={{
type: "rect" // 可選值：rect、x、y、cross，分別對應輔助狂、平行x軸輔助線、平行y軸輔助線，十字輔助線 style: {
fill: 'red', // 輔助框顏色 shadowColor: 'red', // 輔助框周邊陰影的顏色 shadowBlur: 1, // 輔助框周邊陰影的透明度 opacity: 0 // 輔助框的透明度
}
}
} />
複製程式碼note：假如開啟的是輔助線，即type不是“rect”，那麼上述的樣式定義將不起作用。究其原因，看了此元件的原始碼之後才發現，描述輔助線樣式的屬性不是style物件，而是lineStyle物件，官方文件並未說明這一點。
<
Tooltip crosshairs={{
type: "y" lineStyle: {
stroke: 'red', // 輔助線顏色 lineWidth: 4, // 輔助線寬度，單位為px opacity: 1 // 輔助線透明度
}
}
} />
複製程式碼看起來還是很容易就實現了死者的第一個遺願，就這樣懟死了視覺，是不是太殘忍了點？事已至此，繼續實現他的遺願吧。
第二個遺願是給tooltip換個樣式。既然要修改tooltip的樣式， 就應該繼續對Tooltip元件下手。通過閱讀文件，發現其還有一個itemTpl的屬性，也就是 可以通過這個屬性定義tooltip的模板
// 定義一個模板 // name-value是相關柱子的key- value值 const tooltipsDisplayTpl = ` <
p class="chart-tooptip">
<
span class="chart-tooptip-right">
{name
}<
/span>
<
span>
{value
}<
/span>
<
/p>
`;
/* // 重寫tooltip元素的樣式 // 因為視覺已死， 樣式是隨便搞的， 就弄點黑色背景當默哀一下吧 .g2-tooltip {
background-color: rgba(44, 49, 68, 0.80) !important;
} .chart-tooptip {
margin: 0;
color: white;
} .chart-tooptip-right {
margin-right: 12px;
} */ <
Tooltip crosshairs={
false
} itemTpl={
tooltipsDisplayTpl
} showTitle={
false
} // 去頭（標題，即橫軸對應的刻度），往往影響我顏值的不是 我的身材，而是我的臉，所以不要臉了 />
複製程式碼note：如果想自定義tooltip展示的內容，還需要設定Geom元件的tooltip屬性，即將資料對映到Tooltip物件上；所以此屬性值如果為false的話，就不會向Tooltip元件傳遞任何資料（此時Tooltip只會顯示title）；還可設定為字串，展示字串對應的資料欄位；But, it’s not the point，重點在於可自定義
// 定義資料返回的格式，name屬性對應的是itemTpl 裡面的同名變數 const getTooltipData = (xAxis, yAxis) =>
{
return {
name: xAxis, value: yAxis
};
} <
Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]
} />
複製程式碼第二個遺願也實現了，愧疚感也多了一點！最主要是寫程式碼的時候老是覺得後面有人站著 盯著我看。
說不定實現所有遺願就不會有這種感覺了呢，那就繼續第三個遺願吧：“改變滑鼠hover柱子時候柱子的顏色”，翻遍了整個文件，發現沒有關於hover的介面啊！看來 視覺是要死不瞑目了，阿門。
就在我感覺到後背越發的涼颼颼的時候，我發現Geom元件有一個屬性active
文件就真的描述了那麼兩句話，也沒例子。急病亂投醫的我只能嘗試一波，設定為true，得了，hover柱子的時候柱子顏色改變了！！！
<
Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]
} active={
true
} />
複製程式碼那如果需要自定義滑鼠hover柱子 的樣式呢？對照著Geom文件的select屬性，又嘗試了一遍
<
Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]
} style={{
cursor: 'pointer'
}
} // 滑鼠hover上去的時候，顯示小手手，免費送的 active={[ true, {
style: {
fill: 'black', // 柱子顏色，繼續默哀 shadowColor: 'red', // 整體陰影顏色，包括邊緣 shadowBlur: 1, // 陰影的透明度 opacity: 0 // 柱子顏色透明度
}
} ]
} />
複製程式碼（神氣的）“狗子，別死了， 老子搞定啦”
“靠，我都裝死兩天了，你敢不敢再慢一點”
“那官方文件就寫了一行字：只可意會不可言傳！我天分有限，意會了比較久”
“ 嘚瑟， 看，又出bug了吧！你的表子一閃一閃的”
（掐著他脖子使勁晃）“那TM不是bug！！！”
不過話說回來，當資料更新時，從舊資料切換到新資料，會很突兀，沒有緩衝過程，看著特別不舒服。我尋思著，在資料更新的時候， 加個動畫唄！但是初始動畫生效了，更新動畫就不生效了（如看官們知道解決辦法，請不吝賜教）。由於趕著下班，我決定使用DataSet：一個用於管理表格資料的神器，據說 更新資料的時候，其會給我弄個動畫（除此以外有方便地匯入非json資料等等功能，下文有一些例子，具體細節我沒有詳細去研究，以後學習了再分享）。唔好理，總之好犀利！
// 安裝 // npm install @antv/data-set // 引入 import DataSet from '@antv/data-set';
// 生成一個View例項，作為類的屬性，故不要在render方法裡面生成這個例項 dv = new DataSet().createView();
render() {
this.dv.source(data);
<
Chart height={ 400
} data={ this.dv
} forceFit >
<
/Chart>
}複製程式碼“猿子，6啊！吃宵夜嗎？我的”
“雖然不怎麼餓， 但是你請就不一樣了，go”
吃了一桶泡麵後……
“ 猿子，你看，宵夜也吃了·······”
“你又想幹嘛···············”
簡直就是飽飯思淫慾啊！！！
”我只是覺得柱子的顏色可以漸變會顯得 我們公司的產品更屌一點“
”狗子，你扛揍不？“
（可憐兮兮）”揍完之後可以加個漸變嗎……“
”……“
”我就知道你對我最好了，我給你捶背捏大腿吧~“
”滾一邊去“
<
Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]
} color={['xAxis', '#3DA4FF-#FFFFFF']
} />
複製程式碼（掐著我脖子使勁晃）”老子要的是從上往下漸變，不是從左往右漸變“
“別…..別…..掐…..我….改….改…..”
<
Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]
} color={['xAxis', 'l(90) 0:#3DA4FF 1:#FFFFFF']
} />
複製程式碼note：l是指線性漸變， 90是指旋轉九十度（即從上到下漸變，看官們可以多試試幾個姿勢，啊呸，多試試幾個角度）
0和1標定的色值標明 初始色值和終止色值，注意一點，色值不可以使用顏色名字，如“red”、“blue”等
可新增多個漸變色值，如
color="l(90) 0:#000000 0.5:#FFFFFF 1:#000000"複製程式碼note：如果是area型別的 Geom，那麼第一種漸變方式是不起作用的，只能選用第二種
“狗子，我真要下班了”
“那個，你看都搞著漸變了，要不搞一波顏色分類”
”沒得談，goodbye！“
”宵夜我的“
”頂你個肺，又想用泡麵忽悠我！！！“
”擼串，騙你我是狗“
”emmmmmm…..“
既然提到顏色分類，我們就接著提一下dv.transform 吧, dv.transform內建了一些基礎的函式：filter，map，pick，rename，reverse …… 具體可自行檢視文件
只需要新增 groupBy 欄位，並且在傳入的原始資料data中新增對應的欄位classify即可輕鬆搞定。
dv.transform({
groupBy: ['classify'], // 以classify欄位進行分組
});
複製程式碼”猿子，顏色還是要自定義的哦“
（白眼）
<
Geom position={'xAxis*yAxis'
} color={['classify', classify =>
{
// 這裡根據不同欄位返回不同顏色 return classify === 'test' ? 'red' : 'yellow';
}]
} style={{
cursor: 'pointer'
}
} />
複製程式碼作為一個有責任的前端打字員，有一點即使設計不要求的，我還是需要說明的，橫軸的刻度值是可以自定義的
<
Axis name={xAxis
} label={{
textStyle: {
fill: 'red', // 顏色 textBaseline: 'top' // 對齊基線
}, formatter: (val) =>
{
return `${
val
}\n換行了`
}
}
} />
複製程式碼”狗子，擼串去！！！“
”要不還是吃個泡麵？？？？“
狗子，卒！
總結
感謝看官們看完了我的胡扯，需要更正一點的是，我司程式設計師與視覺、互動設計師的相處是非常友愛和睦的。以上總結，僅參考學習之用，不喜勿噴；如有錯漏， 歡迎指正。
@Author: beidan, PaperCrane