echarts双Y轴，并修改自定义tooltip

需求：

使用echarts对人员工单数量进行柱状图统计，并显示占比。

效果图：

代码：

/**
 * 将数字取整为10的倍数
 * @param {Number} num 需要取整的值
 * @param {Boolean} ceil 是否向上取整
 * @param {Number} prec 需要用0占位的数量
 */
const formatInt = (num, prec = 2, ceil = true) => {
  const len = String(num).length;
  if (len <= prec) { return num }; 

  const mult = Math.pow(10, prec);
  return ceil ? 
    Math.ceil(num / mult) * mult : 
    Math.floor(num / mult) * mult;
} 


var barChart = echarts.init(document.getElementById("echarts-bar-chart"));

var max = 0;
var barCount =[372,465,167,288,400];
//计算最大值
max = Math.max(...barCount);
//取最大值的上取整
max = formatInt(max, String(max).length - 1 , true);

//求和
var total =barCount.reduce(( acc, cur ) => {
    return acc + cur
}, 0);;

//计算占比
var barpre = barCount.map((data) => {
    return (data*100/total).toFixed(1);
});

// console.log(barpre)
var barName = ['张三','李四','流川枫','王五','琉璃'];

var option = {
    title: {
        // text: '个人工单柱状图'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            // console.log(params);
            let str = params[0].name + '
';
            params.forEach(item => {
                if (item.seriesName == '数量') {
                    str += item.marker + item.seriesName + ': ' + item.data + '
';
                } else if (item.seriesName == "占比") {
                    str += item.marker + item.seriesName + ': ' + item.data + '%';
                }
            });
            return str;
        }
    },
    legend: {
        data: ['数量', '占比']
    },
    grid: {
        x: 30,
        x2: 40,
        y2: 24,
        bottom:"18%" //
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: barName,
            axisLabel: {
                interval: 0,
                formatter: function (value) {
                    //x轴的文字改为竖版显示
                    var str = value.split("");
                    return str.join("\n");
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '数量',
            min: 0,
            max: max,        // 计算最大值
            interval: Math.ceil(max / 5),   //  平均分为5份
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '占比',
            min: 0,
            max: 100,
            interval: 20,//  平均分为5份，和第一个y轴份数保持一致
            axisLabel: {
                formatter: '{value}%'
            }
        }
    ],
    series: [
        {
            name:"数量",
            type: 'bar',
            data: barCount,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
         {
             name:"占比",
             type: 'bar',
             data: barpre,
             yAxisIndex: 1,
             label: {
                 normal: {
                     show: true,
                     position: 'top',
                     formatter:  function (parames) {
                         // console.log(parames);
                         return parames.value + "%";
                     }
                 }
             }
         }
    ]
};

barChart.setOption(baroption);
window.onresize = barChart.resize;

注意点：

1.需要自己计算数值的最大值，占比可以直接设置成100。

2.两个Y轴的平分的网格数要相同，否则会出现Y周顶点值不一致的情况。