需求背景：

柱状图中每个不同的类目可以有多个数据柱，从不同维度来展示数据，可有的数据柱的tooltip还需要体现出特定数据，这时默认的tooltip就无法满足，因此我们要自定义tooltip，不仅要让特殊的数据柱体现出需要的数据，还不能影响其它数据柱正常tooltip展示。

tooltip分类：

1. 全局tooltip属性是与title、xAxis、yAxis、series等属性同级别；对其配置会影响到所有数据图表的展示。
2. 局部tooltip属性属于series里每项栏的，对其配置只会影响当前栏目数据图表的展示。

tooltip特点：

1. 局部tooltip的配置会与全局tooltip的配置进行合并，因此全局tooltip可以不用过多的配置。
2. 不同版本的Echarts，tooltip API不同。

自定义tooltip核心API：

1. 全局tooltip.trigger
2. 局部tooltip.padding、局部tooltip.formatter

代码清单：

var myChart = echarts.init(document.getElementById("main"));
let ratio = [‘1%‘,‘2%‘,‘3%‘,‘4%‘,‘5%‘,‘6%‘]
let option = {
    //图表标题
    title: {
        text: "ECharts自定义tooltip",
    },
    //全局tooltip配置
    tooltip: {
    //item鼠标移到类目上每条数据柱都有自己的tooltip，axis鼠标移到类目会把所有数据柱整合到tooltip显示
        trigger:‘item‘
    },
    //图表x轴
    xAxis: {
        type: ‘category‘,
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    //图表y轴
    yAxis: {},
    //图表x轴每项类目，此例表示每条类目有两个柱状图，因此可知类目数据会根据xAxis类目数据合并
    series: [
        {
            //数据柱的标题
            name: "销量",
            //图类型
            type: "bar",
            //数据柱的数据
            data: [5, 20, 36, 10, 10, 20],
        },
        {
            name: "利润",
            type: "bar",
            data: [10, 20, 36, 10, 10, 20],
            //局部tooltip配置
            tooltip:{
                //内边距
                padding:[5,20,5,10],
                //params 传入进来的每个类目数据及echarts属性，ticket异步的类目名称，callback回调函数
                formatter(params, ticket, callback){
                    //自定义模板
                    let html = ` 
                        <div>${params.seriesName}</div>
                        <span style="display:inline-block;margin-right:4px;
						border-radius:10px;width:10px;height:10px;
						background-color:#91cc75;"></span>
                        <span style="margin-right:10%;">${params.name}</span>
                        <span>${params.data} ${ratio[params.dataIndex]}</span>
                        `
                    callback(ticket, html) //返回自定义内容
                }
            }
        },
    ],
};
myChart.setOption(option);

提示：Echarts 4.2.1版本tooltip.formatter函数方式，参数只有params，同时通过return来返回内容；以上代码是Echarts 5.1.2 。

tooltip.formatter 常用属性：

Echarts自定义tooltip