echarts的legend自定义样式
时间: 2023-09-28 19:07:41 浏览: 42
Echarts的legend组件提供了一些默认的样式,但是我们也可以通过legend的formatter属性来自定义legend的样式。
使用formatter属性后,我们可以通过一个回调函数来自定义legend的样式,该回调函数接收两个参数,第一个参数为当前legend的名称,第二个参数为该legend对应的series对象。下面是一个例子:
```javascript
option = {
legend: {
data: ['图例1', '图例2', '图例3'],
formatter: function(name) {
return '<span style="color:red">' + name + '</span>';
}
},
series: [
{
name: '图例1',
type: 'bar',
data: [10, 20, 30]
},
{
name: '图例2',
type: 'bar',
data: [20, 30, 40]
},
{
name: '图例3',
type: 'bar',
data: [30, 40, 50]
}
]
};
```
上面的例子中,我们通过formatter回调函数来自定义legend的样式,将每个legend的名称用红色字体显示。
另外,我们还可以通过legend的textStyle属性来设置legend的字体样式,例如:
```javascript
option = {
legend: {
data: ['图例1', '图例2', '图例3'],
textStyle: {
color: 'red',
fontStyle: 'italic'
}
},
series: [
{
name: '图例1',
type: 'bar',
data: [10, 20, 30]
},
{
name: '图例2',
type: 'bar',
data: [20, 30, 40]
},
{
name: '图例3',
type: 'bar',
data: [30, 40, 50]
}
]
};
```
上面的例子中,我们通过textStyle属性设置legend的字体样式,将legend的字体颜色设置为红色,字体样式设置为斜体。