自定义formatter样式
时间: 2023-07-20 14:19:49 浏览: 82
在 ECharts 中,你可以使用 formatter 属性来自定义数据项的显示格式。formatter 属性可以是一个函数或一个字符串,用来格式化数据项的值。
如果 formatter 是一个字符串,那么可以使用 `{}` 来引用数据项的值,例如:
```javascript
// 使用 formatter 字符串
formatter: '{value} 元'
```
如果 formatter 是一个函数,那么函数将会接收到一个参数,这个参数包含了当前数据项的信息,你可以在函数中使用这些信息来格式化数据项的值。例如:
```javascript
// 使用 formatter 函数
formatter: function(params) {
return params.value + ' 元';
}
```
下面是一个使用 formatter 自定义样式的例子:
```javascript
option = {
// ...
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar',
label: {
show: true,
position: 'top',
formatter: function(params) {
return '{value} 元';
},
color: 'black',
fontSize: 14,
fontWeight: 'bold',
fontFamily: 'Arial',
backgroundColor: 'white',
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5
}
}]
};
```
在这个例子中,formatter 函数使用了 `{value}` 来引用数据项的值,并添加了一个后缀 `"元"`。另外,label 的其他样式属性也被设置了。