• 【echarts3】 折线图我踩过的那些坑 （tooltip 设置，line 单个点/散点不显示问题）

tooltip

tooltip: {
    trigger: 'axis'
},

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+'%'
    }
},

折线单个点不显示处理

series: [{
    type: 'line',
    showAllSymbol: true //标注所有数据点
}]

series: [{
    type: 'line',
    showAllSymbol: true //标注所有数据点,
    data:[{
        value: 12,
        symbolSize： 0,
    },{
        value: 12,
        symbolSize： 4,
    }]
}]