echarts中tooltip方法组件化

echarts中tooltip方法和formatter结合时的处理

export const tooltip = () => {
    let tooltip = {
        trigger: 'axis',
        textStyle: {
            color: 'black',
        },
        borderWidth: '1',
        borderColor: '#eee',
        backgroundColor: 'rgba(255,255,255,1)' 
    }
    return tooltip
}
export const formatterFun = (data, str) => {
    var htmlStr = '';
    var valMap = {};
    for (var i = 0; i < data.length; i++) {
        var param = data[i];
        var xName = param.name; //x轴的名称 / 
        var seriesName = param.seriesName; //图例名称  
        var value = param.value; //y轴值   
        var color = param.color; //图例颜色  
        //过滤无效值
        if (value == '-') {
            continue;
        }
        //过滤重叠值
        if (valMap[seriesName] == value) {
            continue;
        }
        // if (i === 0) {
        htmlStr += xName + '<br/>'; //x轴的名称  
        // }
        htmlStr += '<div>';
        //为了保证和原来的效果一样，这里自己实现了一个点的效果  
        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
        //圆点后面显示的文本  
        if (str == 'lc') {
            htmlStr += seriesName + '：' + value + '%';
        } else {
            htmlStr += seriesName + '：' + value;
        }
        htmlStr += '</div>';
        valMap[seriesName] = value;
    }
    return htmlStr;
}

this.charts.setOption({
	tooltip:{
	    ...tooltip(),
	     formatter: function(data){
	        return formatterFun(data)
	     },
	 }
 })