echarts桑基图怎么设置value值带有千分位
时间: 2024-09-24 17:13:03 浏览: 60
ECharts 的桑基图(Sankey Diagram)默认展示数值是直接显示的,如果你想让 value 值带上千分位,可以自定义数据格式化。你可以通过设置 `formatter` 属性来实现这个功能。这里是一个简单的例子:
```javascript
option = {
sankey: {
nodes: [
{ name: '节点A', value: 10000 }, // 假设这是你的节点值
{ name: '节点B' },
{ name: '节点C' }
],
links: [
{ source: '节点A', target: '节点B', value: 5000 },
{ source: '节点A', target: '节点C', value: 5000 }
],
label: {
formatter: function(value) { // 使用格式化函数
return formatNumber(value, { significant: 3 }); // 显示三位小数并带千分位分隔符
}
}
}
};
// 定义一个格式化函数,formatNumber来自moment.js库或其他类似工具
function formatNumber(num, options) {
if (!options || !options.significant) {
return num;
}
var precision = options.precision ? options.precision : 0,
significant = options.significant ? Number(options.significant) : 1;
// ... 实现格式化逻辑,例如用正则替换千分位分隔符
num = num.toFixed(precision).replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,');
return num;
}
// 初始化图表
myChart.setOption(option);
```
在这个例子中,`formatter` 函数用于处理每个链接的 `value` 属性,使其按照指定格式显示。你需要先安装 `moment.js` 或其他支持格式化的库,并根据实际需要调整格式化规则。
阅读全文