前端echarts加标记点及标记线和提示框
在 ECharts 中，你可以通过配置 series 对象的 markPoint、markLine 和 tooltip 属性来添加标记点、标记线和提示框。以下是一个简朴的示例，说明如何在图表中添加这些元素。https://img-blog.csdnimg.cn/direct/00f11c7e11144613b6984bac9af53ced.png
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: , 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.seriesName + ' : ' + params.value; } } // ... 在这个例子中，我们设置了提示框的触发类型为 'axis'，这意味着当鼠标悬停在坐标轴上时，提示框会显示该坐标轴上全部系列的数据。formatter 函数用于自定义提示框的内容。
整合示例
将上述全部配置整合到一个完整的 ECharts 选项中：
javascript复制代码
var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'axis', formatter: function (params) { return params.seriesName + ' : ' + params.value; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: , type: 'line', markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }] }; myChart.setOption(option);
https://img-blog.csdnimg.cn/direct/82065fae5b5d4ce4ab46ecb708c7ea26.jpeg
https://img-blog.csdnimg.cn/d848d5658a07453c843277846948c608.png
欢迎加入“前端组件开发学习”交换群，一起学习发展！可关注 “前端组件开发” 公众号后，私信后申请入群。
https://img-blog.csdnimg.cn/d848d5658a07453c843277846948c608.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]