假设有一个场景:
Sooia 1月有1000元,2月有1200元,3月有1800元。用ECharts 柱状图展示Sooia资产的变化趋势。并在悬浮框中(tooltip)显示环比增长率。
以上可转化为表格
| 月份 | 资产 | 环比增长率 |
|---|---|---|
| 1月 | 1000 | / |
| 2月 | 1200 | 20% |
| 3月 | 1800 | 50% |
入参用数据集的格式表示:
const data = [ ['月份', '资产', '环比增长率'],
['1月', 1000, ''],
['2月', 1200, 0.2],
['3月', 1800, 0.5]
]
因为要在悬浮框tooltip中展示环比增长率,且在柱状图不体现,所以要自定义formatter回调函数。
const tooltip = {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: (params) => {
let html = '';
html += `${params[0].axisValueLabel}<br>`;
params.forEach((val) => {
const { marker, seriesName } = val;
const value = val.value[val.encode.y[0]];
if (value === '') {
html += '';
} else {
html += `${marker} ${seriesName}: ${transformNum(value, {
isThousand: true,
decimal: 2,
})} <br>`;
}
});
return html;
},
};
参考链接: ECharter