最近項(xiàng)目的管理后臺(tái)都在用阿里粑粑開源的管理框架Ant Design Pro，說真話，還是比較好用的。該框架內(nèi)部也封裝了一些圖標(biāo)插件，但是在最近的一個(gè)項(xiàng)目中發(fā)現(xiàn)，這些圖標(biāo)可定制性還是差了點(diǎn)，不能滿足客戶需求。
好在它的后面也介紹了自己親生的BizChart可視化圖表組件，因?yàn)槎ㄖ菩员容^高，但是api中的介紹又不是每個(gè)都有例子，更沒有組合使用的例子，經(jīng)過度娘介紹，發(fā)現(xiàn)這片文章備受我青睞，我怕作者哪天不高興放棄了，所以轉(zhuǎn)存了一份，順便把自己實(shí)踐到的補(bǔ)充到后面。
原文
作為一個(gè)前端打字員，除了綠茶婊之外，最討厭的就是圖表：一個(gè)讓我傷心，一個(gè)讓我難過；比這更討厭的就是文檔寫得不清不楚的圖表庫（大概率是九年義務(wù)教育期間沒有學(xué)好語文），讓我又愛又恨！所以本篇博文會(huì)比較枯燥，只簡單描述一下使用BizCharts的過程，當(dāng)然，重要的是總結(jié)遇到的坑（遵從一個(gè)坑不踩兩次，一個(gè)女生不泡兩次原則）。
By the way，提到BizCharts，讓我們感謝一下阿里巴巴：其開源了這個(gè)好用的（雖然偶爾不那么好用，還偶得挺經(jīng)常的）的react圖表庫供大家使用，對使用react技術(shù)棧的前端打字員來說簡直就是福音。本文不會(huì)有過多的api解釋，具體的接口可以看官網(wǎng)文檔鬼門關(guān)。
正經(jīng)篇幅
剛開始，視覺設(shè)計(jì)師哄我說：“我的要求并不高，待我從前一樣好”，啊呸，說錯(cuò)了，“我的要求是：只要能把數(shù)據(jù)用直方圖展現(xiàn)出來就好了”，so easy
// 引入相關(guān)的組件
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
// 隨便mock一下數(shù)據(jù)
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數(shù)據(jù)的xAxis屬性值為柱子的值 */}
<Axis name="xAxis" />
{/* y軸，縱軸，以data數(shù)據(jù)的yAxis屬性值為柱子的值 */}
<Axis name="yAxis" />
{/* 鼠標(biāo)hover直方圖柱子的時(shí)候，tooltip顯示的值 */}
<Tooltip />
{/* 幾何標(biāo)記對象，主要用以描述你要畫的是什么圖形（直方圖、折線圖、餅狀圖、區(qū)域圖）：interval是直方圖 */}
<Geom
type="interval"
position="xAxis*yAxis"
/>
</Chart>
一波操作猛如狗，讓視覺設(shè)計(jì)師看看效果：
note：此直方圖每一根柱子都是單點(diǎn)的，也就是其反映了某個(gè)橫坐標(biāo)點(diǎn)的數(shù)據(jù)情況。加入我們需要一個(gè)連續(xù)區(qū)間柱子，那么作為xAxis的數(shù)據(jù)字段值應(yīng)該為一個(gè)數(shù)組，包含兩個(gè)元素，表明區(qū)間的起始值。
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，那么第一根柱子的終點(diǎn)跟第二根柱子的起點(diǎn)是同一個(gè)，會(huì)感覺兩個(gè)柱子粘在一起
yAxis: Math.floor(Math.random() * 100)
});
}
return result;
};
視覺設(shè)計(jì)師：“emmmmmm，圖表長寬定死了會(huì)不會(huì)有點(diǎn)僵硬啊，高度可以寫死，寬度總得來個(gè)自適應(yīng)吧？”
“毛悶臺(tái)”
<Chart
height={ 400 }
data={ mockData() }
forceFit // 我媽說了（guanfang wendang shuode），加上這個(gè)屬性就可以使圖表寬度自適應(yīng)了，隔壁echart同學(xué)要學(xué)習(xí)一下
>
</Chart>
效果秀一波
視覺（蜜汁微笑）：“猿子，你這玩意有bug啊”
“胡說，你這傻*不會(huì)用吧”
（理直氣壯）“哼哼，放大窗口圖表寬度確實(shí)會(huì)自適應(yīng)，但是縮小就掛掉了（并不自適應(yīng)），ahhhhhh”
（諂媚）“討厭，再給我兩分鐘~~讓我把bug結(jié)成冰。。?！?/p>
note: 實(shí)驗(yàn)表明，如果Chart組件的父組件Father采用flex布局，即Father使用flex自適應(yīng)寬度，那么就會(huì)出現(xiàn)上述的問題；所以，如果有多個(gè)圖表同行并列布局，請不要使用flex布局，給Father組件的寬度設(shè)置為百分比吧，此時(shí)的forceFit就會(huì)起作用了。同時(shí)，BizCharts對重繪設(shè)置了防抖，只有當(dāng)停止縮放的時(shí)候才會(huì)重繪。
（屌到飛起）“over，拿去用吧”
（一臉鄙視）“哇喔~好棒棒呀，敢不敢讓我調(diào)一點(diǎn)點(diǎn)小細(xì)節(jié)，我保證就一點(diǎn)點(diǎn)！”
“Come on baby！”
“
- 鼠標(biāo)hover柱子的時(shí)候，為什么柱子后面有個(gè)很丑的方框，換個(gè)顏色吧！
- 鼠標(biāo)hover柱子的時(shí)候，出現(xiàn)的tooltip樣式丑爆了，待會(huì)我給你設(shè)計(jì)一個(gè)吧
- 鼠標(biāo)hover柱子的時(shí)候，柱子的顏色應(yīng)該有所改變，對用戶比較友好?。?！
- ...哎，你別拿刀啊~~~
”
把視覺殺了之后，需求還是要做的，先解決死者的第一個(gè)遺愿。
Tooltip組件提供了一個(gè)屬性crosshairs，用以設(shè)置tooltip的輔助線和輔助框；默認(rèn)情況下，此屬性會(huì)為’line’、‘a(chǎn)rea’、‘path’、‘a(chǎn)reaStack’類型的Geom組件開啟垂直輔助線、為‘interval’類型的Geom組件展示矩形背景框。死者說的很丑的方框就是這個(gè)！
<Tooltip crosshairs={ false }/>
好的，把框去掉了！咦，我們不是說要修改它的顏色嗎？好的，改一下
<Tooltip
crosshairs={{
type: "rect" // 可選值：rect、x、y、cross，分別對應(yīng)輔助狂、平行x軸輔助線、平行y軸輔助線，十字輔助線
style: {
fill: 'red', // 輔助框顏色
shadowColor: 'red', // 輔助框周邊陰影的顏色
shadowBlur: 1, // 輔助框周邊陰影的透明度
opacity: 0 // 輔助框的透明度
}
}}
/>
note：假如開啟的是輔助線，即type不是“rect”，那么上述的樣式定義將不起作用。究其原因，看了此組件的源碼之后才發(fā)現(xiàn)，描述輔助線樣式的屬性不是style對象，而是lineStyle對象，官方文檔并未說明這一點(diǎn)。
<Tooltip
crosshairs={{
type: "y"
lineStyle: {
stroke: 'red', // 輔助線顏色
lineWidth: 4, // 輔助線寬度，單位為px
opacity: 1 // 輔助線透明度
}
}}
/>
復(fù)制代碼
看起來還是很容易就實(shí)現(xiàn)了死者的第一個(gè)遺愿，就這樣懟死了視覺，是不是太殘忍了點(diǎn)？事已至此，繼續(xù)實(shí)現(xiàn)他的遺愿吧。
第二個(gè)遺愿是給tooltip換個(gè)樣式。既然要修改tooltip的樣式，就應(yīng)該繼續(xù)對Tooltip組件下手。通過閱讀文檔，發(fā)現(xiàn)其還有一個(gè)itemTpl的屬性，也就是可以通過這個(gè)屬性定義tooltip的模板
// 定義一個(gè)模板
// name-value是相關(guān)柱子的key-value值
const tooltipsDisplayTpl = `
<p class="chart-tooptip">
<span class="chart-tooptip-right">{name}</span>
<span>{value}</span>
</p>
`;
/*
// 重寫tooltip元素的樣式
// 因?yàn)橐曈X已死，樣式是隨便搞的，就弄點(diǎn)黑色背景當(dāng)默哀一下吧
.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 } // 去頭（標(biāo)題，即橫軸對應(yīng)的刻度），往往影響我顏值的不是我的身材，而是我的臉，所以不要臉了
/>
note：如果想自定義tooltip展示的內(nèi)容，還需要設(shè)置Geom組件的tooltip屬性，即將數(shù)據(jù)映射到Tooltip對象上；所以此屬性值如果為false的話，就不會(huì)向Tooltip組件傳遞任何數(shù)據(jù)（此時(shí)Tooltip只會(huì)顯示title）；還可設(shè)置為字符串，展示字符串對應(yīng)的數(shù)據(jù)字段；But, it's not the point，重點(diǎn)在于可自定義
// 定義數(shù)據(jù)返回的格式，name屬性對應(yīng)的是itemTpl里面的同名變量
const getTooltipData = (xAxis, yAxis) => {
return {
name: xAxis,
value: yAxis
};
}
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
/>
第二個(gè)遺愿也實(shí)現(xiàn)了，愧疚感也多了一點(diǎn)！最主要是寫代碼的時(shí)候老是覺得后面有人站著盯著我看。
說不定實(shí)現(xiàn)所有遺愿就不會(huì)有這種感覺了呢，那就繼續(xù)第三個(gè)遺愿吧：“改變鼠標(biāo)hover柱子時(shí)候柱子的顏色”，翻遍了整個(gè)文檔，發(fā)現(xiàn)沒有關(guān)于hover的接口啊！看來視覺是要死不瞑目了，阿門。
就在我感覺到后背越發(fā)的涼颼颼的時(shí)候，我發(fā)現(xiàn)Geom組件有一個(gè)屬性active
文檔就真的描述了那么兩句話，也沒例子。急病亂投醫(yī)的我只能嘗試一波，設(shè)置為true，得了，hover柱子的時(shí)候柱子顏色改變了！??！
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
active={ true }
/>
那如果需要自定義鼠標(biāo)hover柱子的樣式呢？對照著Geom文檔的select屬性，又嘗試了一遍
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
style={{ cursor: 'pointer' }} // 鼠標(biāo)hover上去的時(shí)候，顯示小手手，免費(fèi)送的
active={[
true,
{
style: {
fill: 'black', // 柱子顏色，繼續(xù)默哀
shadowColor: 'red', // 整體陰影顏色，包括邊緣
shadowBlur: 1, // 陰影的透明度
opacity: 0 // 柱子顏色透明度
}
}
]}
/>
（神氣的）“狗子，別死了，老子搞定啦”
“靠，我都裝死兩天了，你敢不敢再慢一點(diǎn)”
“那官方文檔就寫了一行字：只可意會(huì)不可言傳！我天分有限，意會(huì)了比較久”
“嘚瑟，看，又出bug了吧！你的表子一閃一閃的”
（掐著他脖子使勁晃）“那TM不是bug！?。 ?/p>
不過話說回來，當(dāng)數(shù)據(jù)更新時(shí)，從舊數(shù)據(jù)切換到新數(shù)據(jù)，會(huì)很突兀，沒有緩沖過程，看著特別不舒服。我尋思著，在數(shù)據(jù)更新的時(shí)候，加個(gè)動(dòng)畫唄！但是初始動(dòng)畫生效了，更新動(dòng)畫就不生效了（如看官們知道解決辦法，請不吝賜教）。由于趕著下班，我決定使用DataSet：一個(gè)用于管理表格數(shù)據(jù)的神器，據(jù)說更新數(shù)據(jù)的時(shí)候，其會(huì)給我弄個(gè)動(dòng)畫（除此以外有方便地導(dǎo)入非 json 數(shù)據(jù)等等功能，下文有一些例子，具體細(xì)節(jié)我沒有詳細(xì)去研究，以后學(xué)習(xí)了再分享）。唔好理，總之好犀利！
// 安裝
// npm install @antv/data-set
// 引入
import DataSet from '@antv/data-set';
// 生成一個(gè)View實(shí)例，作為類的屬性，故不要在render方法里面生成這個(gè)實(shí)例
dv = new DataSet().createView();
render() {
this.dv.source(data);
<Chart
height={ 400 }
data={ this.dv }
forceFit
></Chart>
}
“猿子，6?。〕韵箚?？我的”
“雖然不怎么餓，但是你請就不一樣了，go”
吃了一桶泡面后......
“猿子，你看，宵夜也吃了·······”
“你又想干嘛···············”
簡直就是飽飯思淫欲?。。?！
”我只是覺得柱子的顏色可以漸變會(huì)顯得我們公司的產(chǎn)品更屌一點(diǎn)“
”狗子，你扛揍不？“
（可憐兮兮）”揍完之后可以加個(gè)漸變嗎......“
”......“
”我就知道你對我最好了，我給你捶背捏大腿吧~“
”滾一邊去“
<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是指旋轉(zhuǎn)九十度（即從上到下漸變，看官們可以多試試幾個(gè)姿勢，啊呸，多試試幾個(gè)角度）
0和1標(biāo)定的色值標(biāo)明初始色值和終止色值，注意一點(diǎn)，色值不可以使用顏色名字，如“red”、“blue”等
可添加多個(gè)漸變色值，如
color="l(90) 0:#000000 0.5:#FFFFFF 1:#000000"
note：如果是area類型的Geom，那么第一種漸變方式是不起作用的，只能選用第二種
“狗子，我真要下班了”
“那個(gè)，你看都搞著漸變了，要不搞一波顏色分類”
”沒得談，goodbye！“
”宵夜我的“
”頂你個(gè)肺，又想用泡面忽悠我！??！“
”擼串，騙你我是狗“
”emmmmmm.....“
既然提到顏色分類，我們就接著提一下dv.transform 吧, dv.transform內(nèi)置了一些基礎(chǔ)的函數(shù)：filter，map，pick，rename，reverse …… 具體可自行查看文檔
只需要添加 groupBy 字段，并且在傳入的原始數(shù)據(jù)data中添加對應(yīng)的字段classify即可輕松搞定。
dv.transform({
groupBy: ['classify'], // 以classify字段進(jìn)行分組
});
”猿子，顏色還是要自定義的哦“
（白眼）
<Geom
position={'xAxis*yAxis'}
color={['classify', classify => {
// 這里根據(jù)不同字段返回不同顏色
return classify === 'test' ? 'red' : 'yellow';
}]}
style={{ cursor: 'pointer' }}
/>
作為一個(gè)有責(zé)任的前端打字員，有一點(diǎn)即使設(shè)計(jì)不要求的，我還是需要說明的，橫軸的刻度值是可以自定義的
<Axis
name={xAxis}
label={{
textStyle: {
fill: 'red', // 顏色
textBaseline: 'top' // 對齊基線
},
formatter: (val) => {
return `${ val }\n換行了`
}
}}
/>
”狗子，擼串去?。?！“
”要不還是吃個(gè)泡面？？？？“
狗子，卒！
以下內(nèi)容來自自己的總結(jié)
很顯然，本人沒有博主這枚猿有文化底蘊(yùn)，辭藻上既不華麗麗，也沒有故事性，純屬就是論事，記筆記的形式。
1. 柱狀圖/點(diǎn)圖上顯示文字及格式化內(nèi)容
該需求需要用到Label組件，她是Geon的子組件，上代碼
<div>
<Chart height={400} data={dv} forceFit>
<Axis name="月份" />
<Axis name="月均降雨量" />
<Legend />
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="interval"
position="月份*月均降雨量"
color={"name"}
adjust={[
{
type: "dodge",
marginRatio: 1 / 32
}
]}
>
<Label
content={['月份*月均降雨量', (月份, 月均降雨量) => (`${月均降雨量}`)]}
textStyle={{
textAlign: 'center', // 文本對齊方向，可取值為： start middle end
fill: '#404040', // 文本的顏色
fontSize: '14', // 文本大小
fontWeight: 'normal', // 文本粗細(xì)
rotate: 0, // 文字旋轉(zhuǎn)
textBaseline: 'top', // 文本基準(zhǔn)線，可取 top middle bottom，默認(rèn)為middle
}}
/>
</Geom>
</Chart>
</div>
效果：
2. 圖標(biāo)上增加日期選擇onChange
import React, { PureComponent } from 'react';
import { Chart, Geom, Axis, Tooltip, Label } from 'bizcharts';
import { DatePicker } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import style from './index.less';
class AppTotalUsers extends PureComponent {
numeralCount = count => numeral(count).format('0,0.00');
wanCount = count => {
let data;
if (count < 10000) {
data = count;
} else {
data = this.numeralCount(count / 10000);
data = `${data} 萬`;
}
return data;
};
handleSelect = value => {
const { callback } = this.props;
const payload = { showDate: value };
callback(payload);
};
// Can not select days before today and today
disabledDate = current => current && current > moment().endOf('day');
const appChartData = [
{
"x": "用戶中心管理",
"y": "23715",
"date": "2019-03-22"
},
{
"x": "測試app",
"y": "2899",
"date": "2019-03-22"
}
];
render() {
const { appChartData, showDate } = this.props;
const background = {
fill: '#FFFFFF', // 圖表背景色-白色
fillOpacity: 0, // 圖表背景透明度
};
const appScale = {
y: {
alias: '人數(shù)',
type: 'pow',
},
};
return (
<div style={{ height: 390 }}>
<div style={{ padding: '20px', background: '#FFFFFF' }}>
<Chart height={300} data={appChartData} scale={appScale} forceFit background={background}>
<span className={style.mainTitle}>歷史累計(jì)用戶人數(shù)(人)</span>
<DatePicker
className={style.dateSelect}
allowClear={false}
onChange={this.handleSelect}
disabledDate={this.disabledDate}
// value={moment(appChartData[0] && appChartData[0].date, 'YYYY-MM-DD')}
value={moment(showDate, 'YYYY-MM-DD')}
/>
<Axis name="x" />
<Axis name="y" visible={false} />
<Tooltip
crosshairs={{
type: 'y',
title: '人數(shù)',
}}
/>
<Geom type="interval" position="x*y">
{/* 柱子上作文章用這個(gè)子組件 */}
<Label
content={['x*y', (x, y) => this.wanCount(`${y}`)]}
textStyle={{
textAlign: 'center', // 文本對齊方向，可取值為： start middle end
fill: '#404040', // 文本的顏色
fontSize: '12', // 文本大小
fontWeight: 'normal', // 文本粗細(xì)
rotate: 0, // 文字旋轉(zhuǎn)
textBaseline: 'top', // 文本基準(zhǔn)線，可取 top middle bottom，默認(rèn)為middle
}}
/>
</Geom>
</Chart>
</div>
</div>
);
}
}
export default AppTotalUsers;
index.less文件
.chartDiv {
padding: '0 20px';
background-color: '#FFFFFF';
}
.mainTitle {
font-weight: bold;
font-size: 16px;
padding: 10px;
}
.remark {
font-weight: normal;
font-size: 14px;
padding-right: 30px;
float: right;
}
.dateSelect {
:global(.ant-calendar-picker-input) {
border: none;
}
padding-right: 50px;
float: right;
}
效果:
