echarts dataset数据集维度名右对齐
时间: 2023-07-09 16:29:35 浏览: 103
录制数据集的代码.zip
要在 ECharts 的数据集中实现维度名右对齐,可以在 `dataset` 的 `source` 属性中添加一个新的数组,来保存每个维度名对应的右对齐后的文本。然后在图表中使用 `dimensions` 属性指定维度名,并使用 `tooltip` 的 `formatter` 属性来显示右对齐后的维度名。
下面是一个示例代码,其中假设要右对齐第一列和第三列的维度名:
```javascript
option = {
dataset: {
source: [
['姓名', '年龄', '城市'],
['张三', 20, '北京'],
['李四', 30, '上海'],
['王五', 25, '广州']
],
dimensions: [
'姓名',
{ name: '年龄', tooltip: false },
'城市'
],
transform: {
type: 'sort',
config: {
dimension: 0,
order: 'asc'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
datasetIndex: 0
},
yAxis: {
type: 'value',
datasetIndex: 0
},
series: [
{
type: 'bar',
encode: {
x: 0,
y: 1
}
},
{
type: 'bar',
encode: {
x: 2,
y: 1
}
}
],
tooltip: {
formatter: function(params) {
var name = option.dataset.source[0][params.dataIndex];
var alignName = option.dataset.source[3][params.dataIndex];
return alignName + ': ' + params.value + '<br>' + name + ': ' + params.name;
}
}
};
```
在上面的代码中,使用了 `padStart` 方法来在左侧添加空格,从而实现右对齐的效果。在 `dimensions` 中,使用了一个包含 `name` 和 `tooltip` 属性的对象来指定维度名和是否在 `tooltip` 中显示。在 `tooltip` 的 `formatter` 中,使用新添加的数组中的右对齐文本来替换原来的维度名。
阅读全文