echarts tooltip内容样式布局自定义

先看效果图

实现的主要代码

tooltip: {
   trigger: 'axis',
    padding:0,
    axisPointer: {
        type: 'line',
        lineStyle: {
            type: 'solid',
            width: 1,
            color: '#e0e2eb'
        }
    },
    formatter: function(params) {
        var name1 = params[0].name;
        var str = '<div class="tooltip">\
                 <div class="tooltip-title note-circle-blue">' + ' 数据增量 ' + '</div>\
                 <div class="tooltip-content">\
                 <span class="tooltip-title-left">' + name1 + '</span> <sapn class="tooltip-title-right"> ' + params[0].data + ' </sapn>\
                </div>\
               </div>';
        return str;
    }
},

CSS代码

.tooltip {
    border-radius: 4px;
    box-shadow: 2px 4px 6px 6px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.tooltip-title {
    padding: 0 5px;
    width: 170px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ebf0f5;
    color: #333;
}

.tooltip-content {
    padding: 5px 10px;
    min-height: 50px;
}

.tooltip-title-right {
    float: right;
    padding-right: 10px;
    font-size: 16px;
    color: #30a8e7;
}

.tooltip-title-left {
    padding-left: 10px;
    color: #333;
}

项目全部代码块

 function returnRanNum() {
  return Math.round(Math.random() * 3000 + 1000);
}
function returnLineDataY(len) {
    var arr = [];
    for (var i = 0; i < len; i++) {
        arr.push(returnRanNum())
    }
    return arr;
}
var lineOne = echarts.init(document.getElementById('lineOne'));
var lineOneOption = {
    color: ['#5db1f3', '#fba741'],
    legend: {
        show: true,
        bottom: 0,
        data: ['2018/10/17 数据增量'],
    },
    tooltip: {
        trigger: 'axis',
        padding:0,
        axisPointer: {
            type: 'line',
            lineStyle: {
                type: 'solid',
                width: 1,
                color: '#e0e2eb'
            }
        },
        formatter: function(params) {
            var name1 = params[0].name;
            var str = '<div class="tooltip">\
                     <div class="tooltip-title note-circle-blue">' + ' 数据增量 ' + '</div>\
                     <div class="tooltip-content">\
                     <span class="tooltip-title-left">' + name1 + '</span> <sapn class="tooltip-title-right"> ' + params[0].data + ' </sapn>\
                    </div>\
                   </div>';
            return str;
        }
    },
    grid: {
        x: 60,
        y: 20,
        x2: 30,
        y2: 50,
        borderWidth: 1
    },
    // calculable: true,
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#666'
            }
        },
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                width: 1,
                color: '#ababab'
            }
        },
        axisTick: {
            show: false
        },
        data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
    }],
    yAxis: [{
        type: 'value',
        // name: "服务量：（万次）",
        // nameTextStyle: {
        //   color: '#666'
        // },
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#666'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: 1,
                color: '#e9e9e9'
            }
        },
        axisLine: {
            lineStyle: {
                width: 1,
                color: '#ababab'
            }
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: '2018/10/17 数据增量',
        type: 'line',
        smooth: true,
        // showSymbol: true,
        // symbolSize: 8,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(93,177,243, .4)'
                }, {
                    offset: 1,
                    color: 'rgba(255,255,255,0.1)'
                }], false),
                opacity: 0.9
            }
        },
        data: returnLineDataY(7)
    }]
};
lineOne.setOption(lineOneOption);

总结

结合上次发的内容，补充formatter的强大功能。