vue + element + echars柱状图

今天写管理后台，用到了一个echarts柱状图，要求在tooltips鼠标悬浮的时候，自定义展示内容

如图所示：

在原本的tooltips中，展示内容只有对应的数据，没有后面的百分比，这个时候就需要自定义了

思路：

在echars中，tooltips有一个属性叫做formatter，一般都是默认，但是它是可以写成一个方法，就是在回调中去拿到当前柱状图的所有数据信息，然后在回调里面用模板字符串来实现自定义展示内容，因为我这边业务，数据是固定的四条，所以就直接就用params[0]，这种方式来取到对应的值，假如不确定数据条数，就直接让length =params 就好

打印params，我们可以看到，这个就是对应的柱状图数据了

同理，其他样式的图形也可以这样子来写

看看代码：

 tooltip: {
   trigger: 'axis',
   axisPointer: {
       type: 'shadow'
   },
   formatter: function (params) {
       // 计算百分比
       let percentTwo = Number(params[1].data/params[0].data*100).toFixed(1) // 预约人数占访问人数的百分比
       let percentThree = Number(params[2].data/params[0].data*100).toFixed(1) // 测试人数占访问人数的百分比 
       let percentFour = Number(params[3].data/params[0].data*100).toFixed(1) // 听力测试人数访问人数的百分比

       var html = `
           <div style="display:flex"> 
               <div style="margin-right: 30px;">
                   ${params[0].seriesName} ${params[0].data} <br/>
                   ${params[1].seriesName} ${params[1].data} <br/>
                   ${params[2].seriesName} ${params[2].data} <br/>
                   ${params[3].seriesName} ${params[3].data} <br/>
               </div>
               <div>
                   <br/>
                   ${'占比：'}${percentTwo}${'%'} <br/>
                   ${'占比：'}${percentThree}${'%'} <br/>
                   ${'占比：'}${percentFour}${'%'} <br/>
               </div>
           </div>
       `
       return html
   }
},