近期實現圖表，很多字段需要自定義，顯示請求回來的數據，下述文章給了我很大啓示，介紹也比較全面：
https://www.jianshu.com/p/4f459d16e8b4
下面是我自己的代碼，會發現主要是通過formatter函數來實現，關於formatter函數的介紹我還沒有找到，等找到後再來分享：
效果圖如下：
首先是中間藍色框裏的內容自定義，主要自定義series-label，這裏自定義的數值30，是從服務端請求回來的一個總值，最初實現的時候，總是拿不到該值，通過formatter函數傳過來，拿v渲染的時候，因爲此處是循環遍歷的，因此最後渲染出來的是無效的，並不是拿到30直接渲染了，最後我通過全局變量來接收，而該值定義在全局的時候，因爲圖表在首次刷新的時候是拿不到動態值的，因此我把他賦值在了tooltip中，成功拿到了該值並渲染出來。
label: {
normal: {
show: true,
position: 'center',
data: 0,
formatter: (v) => {
return ['{a|' + this.assetPositon.tooltip.data + '}', '{n|資產總數}'].join('\n');
},
rich: {
a: {
color: '#666',
fontSize: 18,
height: 30,
verticalAlign: 'bottom',
fontWeight: 'bold',
align: 'center'
},
n: {
color: '#999',
fontSize: 16,
align: 'center',
padding: 15,
fontWeight: 'normal'
}
}
}
},
紅色框裏的內容：
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
data: 0,
},
綠色框裏的內容很容易實現，但是加了黃色框之後，需要動態獲取數據：
legend: {
right: '30%',
itemWidth: 8,
itemHeight: 8,
show: true,
orient: 'vertical',
y: 'middle',
align: 'left',
formatter: (data) => {
const len = this.assetPositon.series[0].data.length;
if (len) {
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < len; i++) {
if (this.assetPositon.series[0].data[i].name === data) {
return data + ' ' + this.assetPositon.series[0].data[i].value;
}
}
}
}
},
series序列內數據值格式化效果圖，內容來源於：https://www.cnblogs.com/ys-wuhan/p/6149265.html
關於更多地方需要使用格式化方法可以繼續瀏覽更多精彩文章，同時也可以進入官網查看API文檔。這裏補充一下formatter格式化方法的參數說明：
{string}，模板（Template），其變量爲：
{a} | {a0}
{b} | {b0}
{c} | {c0}
{d} | {d0} （部分圖表類型無此項）
多值下則存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中變量a、b、c在不同圖表類型下代表數據含義爲：
折線（區域）圖、柱狀（條形）圖: a（系列名稱），b（類目值），c（數值）, d（無）
散點圖（氣泡）圖 : a（系列名稱），b（數據名稱），c（數值數組）, d（無）
餅圖、雷達圖 : a（系列名稱），b（數據項名稱），c（數值）, d（百分比）
弦圖 : a（系列名稱），b（項1名稱），c（項1-項2值），d（項2名稱)， e(項2-項1值)
力導向圖 :
節點 : a（類目名稱），b（節點名稱），c（節點值）
邊 : a（系列名稱），b（源名稱-目標名稱），c（邊權重）， d（如果爲true的話則數據來源是邊）
{Function}，傳遞參數列表如下：
<Array> params : 數組內容同模板變量，[[a, b, c, d], [a1, b1, c1, d1], ...]
<String> ticket : 異步回調標識
<Function> callback : 異步回調，回調時需要兩個參數，第一個爲前面提到的ticket，第二個爲填充內容html