{site_name}

{site_name}

🌜 搜索

ECharts 附录是指 ECharts 图表库中的一个功能,它允许用户在图表上添加额外的文本、图片等内容来丰富图表信息

前端 𝄐 0
echarts的formatter,echarts refresh,echarts赋值,echarts step line,echartsformatter用法,echarts怎么引入
ECharts 附录是指 ECharts 图表库中的一个功能,它允许用户在图表上添加额外的文本、图片等内容来丰富图表信息。通常用于添加注释说明、标记重要数据点、展示数据源信息等。

例如,以下代码可以在柱状图的顶部添加一行文本说明:

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: 'bar',
label: {
show: true,
position: 'top',
// 添加注释说明
formatter: '{c}元'
}
}]
};


此外,ECharts 附录还支持添加图形元素,例如下面的例子在折线图中添加了一个圆形标记和一张图片:

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',
// 在第4个数据点上添加圆形标记
markPoint: {
data: [{
name: '最高点',
value: 1290,
xAxis: 4,
yAxis: 1290
}]
},
// 在第5个数据点上添加图片
markArea: {
data: [{
name: '周末',
xAxis: 'Sat',
itemStyle: {
color: 'rgba(255, 204, 102, 0.5)'
}
}]
}
}]
};