当前位置:首页 » 《休闲阅读》 » 正文

前端echarts加标记点及标记线和提示框

8 人参与  2024年09月25日 11:20  分类 : 《休闲阅读》  评论

点击全文阅读


在 ECharts 中,你可以通过配置 series 对象的 markPointmarkLine 和 tooltip 属性来添加标记点、标记线和提示框。以下是一个简单的示例,说明如何在图表中添加这些元素。

1. 添加标记点(markPoint

标记点通常用于突出显示数据中的某些点。

 

javascript复制代码

var myChart = echarts.init(document.getElementById('main'));
var 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',
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};
myChart.setOption(option);

在这个例子中,我们为 markPoint 添加了最大值和最小值的标记点。

2. 添加标记线(markLine

标记线用于突出显示图表中的某些线,例如平均值线。

 

javascript复制代码

// ... 在上面的 option 中继续添加 ...
series: [{
// ... 其他配置 ...
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
// ...

3. 添加提示框(tooltip

提示框用于在鼠标悬停在数据点上时显示额外的信息。

 

javascript复制代码

// ... 在上面的 option 中继续添加 ...
tooltip: {
trigger: 'axis', // 触发类型,可选为:'item'、'axis'
formatter: function (params) {
// 格式化提示框的内容
return params[0].seriesName + ' : ' + params[0].value;
}
}
// ...

在这个例子中,我们设置了提示框的触发类型为 'axis',这意味着当鼠标悬停在坐标轴上时,提示框会显示该坐标轴上所有系列的数据。formatter 函数用于自定义提示框的内容。

整合示例

将上述所有配置整合到一个完整的 ECharts 选项中:

 

javascript复制代码

var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].seriesName + ' : ' + params[0].value;
}
},
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',
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
};
myChart.setOption(option);

d848d5658a07453c843277846948c608.png

欢迎加入“前端组件开发学习”交流群,一起学习成长!可关注  “前端组件开发” 公众号后,私信后申请入群。

d848d5658a07453c843277846948c608.png


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/164335.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1