echarts折线图使用技巧echarts折线图功能丰富，官方文档详细易懂。它更容易上手。本文将分享一些在项目中踩过的坑。示例主要基于多条曲线。我会为大家完成一些曲线和tooltips。标记线的显示和交互很有帮助。echarts的基本使用文档讲的很详细清楚，官方的例子也很丰富。图库工具提示中有许多更强大的示例。echarts的tooltip非常强大友好，风格优雅。内容可以自定义，也可以通过配置项设置内容格式。结合API[5]绑定事件给图表添加tooltip，只需要添加如下配置项tooltip：{trigger:'axis'}，接下来我们一起来看看tooltip的几个简单配置（具体说明请参考官方文档）：tooltip:{trigger:'axis',//坐标轴触发器，可设置为item数据项graphictriggerconfine:true,//设置tooltip框限制为图表的区域，在移动端开发的时候很有用//position可以自己设置tooltip的位置，下面的例子是老版本时提示左侧超出画布时写的限制函数echarts的不支持confine属性position:function(point,params,dom,rect,size){if(dom.contentSize.width+20>point[0]){//当tooltipwidth+20大于鼠标的水平位置，强制避免提示超出左侧画布return{left:10,top:point[1]}}},//formatter设置提示的文本内容（如果需要更改style,你可以使用富文本来实现它,见文档),要在工具提示中显示单位,你可以使用函数params连接字符串并添加以下%unitformatter:function(params){returnparams[0].marker+'
'+params[0].seriesName+':'+params[0].value+'%'}}，也可以直接设置formatter:"{b}
{a}:{c}%"折线单点不显示，处理echarts折线的使用。可以直接参考echarts折线图，这里就不赘述了。下面直接看一下我们项目中遇到的显示问题。由于echartspolyline默认标注了坐标刻度对应的折线的点，当折线上有散点不对应坐标轴（前后值为空）时，可以直接设置数据量小时的series：[{type:'line',showAllSymbol:true//标记所有数据点}]但是当数据量大时，这种方法就不适用了。仔细阅读文档后，我发现了以下思路。标记完所有数据点后，逐个设置symbolSize的大小，从而标记出需要显示的点series:[{type:'line',showAllSymbol:true//标记所有数据点，data:[{value:12,symbolSize:0,},{value:12,symbolSize:4,}]}]项目可以根据写周期的实际需要来设置，这个问题的解释就到这里了，喜欢的话，请关注，点赞，收藏~谢谢阅读！
