echart动态文本标签
时间: 2023-09-15 22:15:14 浏览: 40
ECharts 中的动态文本标签可以通过 `label` 属性和 `formatter` 函数来实现。下面是一个简单的示例:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
label: {
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}元' // 标签内容格式化
}
}]
};
```
在上面的示例中,我们将 `label` 属性设置为 `{show: true, position: 'top', formatter: '{c}元'}`,表示要显示标签、将标签放置在顶部、并将标签内容格式化为 `{c}元`,其中 `{c}` 表示数据值。
除了直接在 `series` 中设置标签,我们还可以在 `tooltip` 中设置标签。这样,当鼠标悬停在数据点上时,会显示一个带有标签的提示框。示例代码如下:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}],
tooltip: {
trigger: 'axis',
formatter: '{b}<br/>{a}: {c}元' // 标签内容格式化
}
};
```
在上面的示例中,我们将 `tooltip` 属性设置为 `{trigger: 'axis', formatter: '{b}<br/>{a}: {c}元'}`,表示当鼠标悬停在数据点上时,会触发提示框,提示框的内容格式为 `{b}<br/>{a}: {c}元`,其中 `{b}` 表示类目轴的值,`{a}` 表示系列名称,`{c}` 表示数据值。