javascript - 理解百度ECharts中的`treemap.data.label.formatter`
问题描述
在 ECharts for 的文档中treemap.data.label.formatter
,解释如下:
{@xxx}: the value of a dimension named'xxx', for example,{@product}refers the value of'product'` dimension。
假设我有如下数据:
data: [
{
name: 'Region1',
children: [
{
name: 'Region1-Country1',
// Option 1; I can make this work by using `formatter: '{b} brand count => {@[1]}'`
value: [800, 8], //here, '1000' is $ spend and '8' is brand count
// Option 2
value: {'brand':8, 'value':800},
// Option 3
brand: 8,
label: {
show: true,
formatter: '{b} brand count => {@??}' // WHAT should I use after '@'?
},
children: [
{ name: 'Region1-Country1-Brand1', value: 200 },
{ name: 'Region1-Country1-Brand2', value: 500 },
]
},
{
name: 'Region1-Country2',
value: 500,
children: [
{ name: 'Region1-Country2-Brand1', value: 100 },
{ name: 'Region1-Country2-Brand2', value: 200 },
{ name: 'Region1-Country2-Brand3', value: 200 },
]
},
]
},
]
根据上面文档中的解释,我该如何准备data
数组以便在绘制的地图中使用formatter: '{b} brand count => {@brand}'
和显示?Region1-Country1 brand count => 8
解决方案
我想我找到了答案。在这里发帖与社区分享。
我们需要设置dimensions
inseries
而不是series.data
. 换句话说,如果我们这样做:
series: [{
name: 'Root',
type: 'treemap',
dimensions: ['value','brand'],
visibleMin: 300,
leafDepth: 2,
levels: [...] // skipped the details for `levels` here
data: [
{
name: 'Region1',
brand: 9,
children: [
{
name: 'Region1-Country1',
value: [1000,8], // we can define dimensions like here: https://ecomfe.github.io/echarts-doc/public/en/option.html#dataset.dimensions
label: {
show: true,
formatter: '{b} brand count => {@brand}',
},
children: [
{ name: 'Region1-Country1-Brand1', value: 200 },
{ name: 'Region1-Country1-Brand2', value: 500 },
]
},
]
},
]
}]
那会起作用(我已经测试过了)。我通过阅读ECharts 文档的不同部分中的内容得出了这个答案。
推荐阅读
- java - 如何识别 2 个 HashMap 是否包含具有相同 ID 的对象
- magento - Magento 2 :: 如何将价格格式更改为印度价格格式?
- java - 如何在流动中获得高亮的流动
- r - 使用 mutate 和 case_when 时从现有列中插入值
- c# - 我可以在一个着色器中使用 MainCamera Depth,它可以在 Unity3D 中的第二个摄像头上替换运行吗?
- reactjs - 入口路由 - 基于路径的路由到不同的 React 应用程序
- php - 如何在 yii2 活动表单中更改表单输入名称前缀
- python - 如何有效地将数据框中特定列中的行值与其自身的滞后值相乘
- react-native - 仅在按下时取消勾画文本按钮
- python - 使用 Dash/Plotly 在折线图上绘制多列