您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在 ECharts 中,可以通过使用 graphic 元素或者 tooltip、label 等属性来添加注释和标记。下面是两种方法的详细说明:
方法一:使用 graphic 元素
graphic 元素允许你在图表中添加自定义的图形,包括注释和标记。以下是一个简单的例子:
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
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'
}],
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: 'middle',
style: {
text: '这是一个注释',
textAlign: 'center',
fill: '#000',
fontSize: 16
}
},
{
type: 'circle',
shape: {
cx: 3,
cy: 3,
r: 3
},
style: {
fill: 'red'
},
position: [3, 3]
}
]
}
});
方法二:使用 tooltip 和 label
tooltip 是鼠标悬停时显示的信息框,label 是数据标签。以下是一个简单的例子:
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{value: 820, label: {show: true, position: 'top', content: '标记A'}},
{value: 932, label: {show: true, position: 'top', content: '标记B'}},
{value: 901, label: {show: true, position: 'top', content: '标记C'}},
{value: 934, label: {show: true, position: 'top', content: '标记D'}},
{value: 1290, label: {show: true, position: 'top', content: '标记E'}},
{value: 1330, label: {show: true, position: 'top', content: '标记F'}},
{value: 1320, label: {show: true, position: 'top', content: '标记G'}}
],
type: 'line',
tooltip: {
trigger: 'axis',
formatter: function (params) {
var res = params[0].axisValueLabel + '<br/>';
params.forEach(function (item) {
res += item.marker + item.seriesName + ': ' + item.value + '<br/>';
});
return res;
}
}
}]
});
这两种方法可以根据需要选择使用,graphic 元素更加灵活,可以添加任意图形;而 tooltip 和 label 更适用于显示数据相关的注释和标记。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。