echarts 图例为多选时 图例文本的样式
时间: 2024-05-16 21:13:54 浏览: 15
当 ECharts 图例为多选时,可以通过 `legend.textStyle` 来设置图例文本的样式。例如:
```javascript
option = {
legend: {
data: ['图例1', '图例2', '图例3'],
selectedMode: 'multiple',
textStyle: {
color: '#333',
fontStyle: 'italic',
fontWeight: 'bold',
fontFamily: 'Arial',
fontSize: 14
}
},
// 其他配置项
};
```
其中,`selectedMode: 'multiple'` 表示图例为多选模式。`textStyle` 中的属性包括:
- `color`:文本颜色
- `fontStyle`:字体风格,可选值有 `'normal'`、`'italic'`、`'oblique'`
- `fontWeight`:字体粗细,可选值有 `'normal'`、`'bold'`、`'bolder'`、`'lighter'`、`100`、`200`、`300`、`400`、`500`、`600`、`700`、`800`、`900`
- `fontFamily`:字体系列
- `fontSize`:字体大小
相关问题
Echarts图例标题使用富文本详解
Echarts是一个非常流行的可视化图表库,它支持多种类型的图表展示。Echarts图例是用来标识不同数据系列的颜色和名称。Echarts图例标题使用富文本可以让我们更加灵活地定制图例的样式,下面是详细的步骤:
1. 在Echarts中设置图例的名称和类型,例如:
```
legend: {
data:['数据1', '数据2', '数据3'],
type: 'scroll',
},
```
2. 在图例名称中使用富文本,例如:
```
legend: {
data:[
{name: '数据1', textStyle: {color: 'red'}},
{name: '数据2', textStyle: {color: 'blue'}},
{name: '数据3', textStyle: {color: 'green'}},
],
type: 'scroll',
},
```
3. 在富文本中使用HTML标签来设置样式,例如:
```
legend: {
data:[
{name: '数据1 <span style="color:red">(红色)</span>', textStyle: {color: 'black'}},
{name: '数据2 <span style="color:blue">(蓝色)</span>', textStyle: {color: 'black'}},
{name: '数据3 <span style="color:green">(绿色)</span>', textStyle: {color: 'black'}},
],
type: 'scroll',
},
```
通过以上几个步骤,我们可以非常方便地使用富文本来设置Echarts图例标题的样式。同时,我们也可以使用其他HTML标签来设置更加丰富的样式,例如加粗、斜体等。
echarts 图例为长方形
ECharts 图例默认情况下是长方形,但是你可以通过设置 `legend` 属性来修改图例的外形。例如,你可以设置 `type` 属性为 `'scroll'` ,这会将图例变成可滚动的列表,并且每个图例项会变成一个小圆点。你也可以使用 `formatter` 属性来自定义每个图例项的显示格式,例如将其显示为圆形或其他形状。
下面是一个示例代码,其中将图例的形状设置为圆形:
```javascript
option = {
...
legend: {
type: 'scroll',
formatter: function(name) {
return '{circle|●} ' + name;
},
textStyle: {
rich: {
circle: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'red'
}
}
}
},
...
};
```
在上面的代码中,我们通过设置 `formatter` 属性将图例项的显示格式设置为一个圆形加上图例名称。然后,我们使用 `textStyle` 属性设置圆形的样式,包括它的大小、圆角半径和背景颜色等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)