echarts 折线图小技巧
echarts 折线图功能丰富且官方文档详细易懂,上手比较容易,这篇文章将分享一些项目中踩过的坑,示例主要以多条曲线为主,对大家完成一些 曲线、tooltip 和 markline 的展示及交互有所帮助
基本使用
echarts文档 写得非常详细、清晰,官方示例也很丰富,gallery 中还有很多功能更强大的示例
tooltip篇
echarts 的 tooltip 是很强大友好的,样式优雅,内容可以自定,还可以通过配置项设定内容格式,结合 API[5] 绑定事件
要在图表中添加 tooltip,只需要增加以下配置项
tooltip: {
trigger: 'axis'
},
我们接下来一起看看 tooltip 的几个简单的配置(具体说明请参考官方文档):
tooltip: {
trigger: 'axis', //坐标轴触发,可设为 item 数据项图形触发
confine: true, //将 tooltip 框限制在图表的区域内,在移动端开发时非常有用
// position 可以自己设定 tooltip 的位置,下面例子是在老版本 echarts 不支持 confine 属性时写的一个当提示左侧超出画布时的限制函数
position: function(point, params, dom, rect, size){
if(dom.contentSize.width+20>point[0]){ //tooltip宽度 + 20 大于鼠标横向位置时,强制避免提示超出左侧画布
return {left: 10, top: point[1]}
}
},
// formatter 设置提示的文字内容(需要改变样式可通过 rich 富文本实现,见文档),要在 tooltip 中显示单位,可通过函数 params 拼字符串加上如下面 % 的单位
formatter: function(params){
return params[0].marker+'<br/>'+params[0].seriesName+': '+params[0].value+'%'
}
},
也可直接设置 formatter: "{b}<br/>{a}: {c}%"
折线单个点不显示处理
echarts 折线的使用大家可以直接参考echarts 折线图,在此不多赘述,下面直接看一下我们项目中遇到的显示问题。
由于 echarts 折线默认标注出与坐标刻度对应的折线的点,在折线上有不与坐标轴对应的散点(前后值为空)时,在数据量较少时可直接设置
series: [{
type: 'line',
showAllSymbol: true //标注所有数据点
}]
但数据量较大时,这种方式就不适合了,仔细阅读文档后找到了以下思路,标注所有数据点后,逐个设置symbolSize的大小,从而实现标注出需要显示的点
series: [{
type: 'line',
showAllSymbol: true //标注所有数据点,
data:[{
value: 12,
symbolSize: 0,
},{
value: 12,
symbolSize: 4,
}]
}]
项目中可以根据实际需求写循环进行设置,对这个问题的说明就到这里,喜欢的话请关注,点赞,收藏~谢谢阅读!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。