echarts series.encode中显示legend
时间: 2023-08-18 16:31:03 浏览: 108
要在 ECharts 中使用 `series.encode` 来显示 legend,可以按照以下步骤实现:
1. 将 `series.encode` 中的 `x` 或 `y` 映射到数据中对应的字段,如将 `x: 0` 映射到数据中的 `name` 字段,将 `y: [1, 2]` 映射到数据中的 `value` 和 `value2` 字段。
```javascript
option = {
legend: {},
dataset: {
source: [
['name', 'value', 'value2'],
['A', 10, 20],
['B', 20, 30],
['C', 30, 40]
]
},
xAxis: { type: 'category', gridIndex: 0 },
yAxis: { gridIndex: 0 },
series: [{
type: 'line',
encode: { x: 'name', y: [1, 2] }
}]
};
```
2. 在 `series` 中添加 `name` 属性,将其设置为需要显示在 legend 中的名称。
```javascript
option = {
legend: {},
dataset: {
source: [
['name', 'value', 'value2'],
['A', 10, 20],
['B', 20, 30],
['C', 30, 40]
]
},
xAxis: { type: 'category', gridIndex: 0 },
yAxis: { gridIndex: 0 },
series: [{
type: 'line',
name: 'Series 1', // 在 legend 中显示的名称
encode: { x: 'name', y: [1, 2] }
}]
};
```
3. 在 `legend` 中添加 `data` 属性,将其设置为需要显示的所有 series 的名称。
```javascript
option = {
legend: {
data: ['Series 1'] // 所有需要显示的 series 的名称
},
dataset: {
source: [
['name', 'value', 'value2'],
['A', 10, 20],
['B', 20, 30],
['C', 30, 40]
]
},
xAxis: { type: 'category', gridIndex: 0 },
yAxis: { gridIndex: 0 },
series: [{
type: 'line',
name: 'Series 1',
encode: { x: 'name', y: [1, 2] }
}]
};
```
这样可以在 ECharts 中使用 `series.encode` 来显示 legend。需要注意的是,如果有多个 series,需要在 `legend` 中分别添加多个名称。
阅读全文