echarts悬浮提示框之formatter 函数

要求：在图表用条形图显示一部分数据，其余数据采用悬浮提示框显示。

说明：在echarts中的series要求的数据格式如下   series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        }

其中data里面的数组是在图表中显示的数据（不理解可看官方文档）

但是data里面实际显示数据 的是数组内的value值，简单来说，data的数据不仅可以以纯数组形式，还可以以另外一种形式返回给data

实例如下：

   data: [

                 { name : ' ', datas:[ ],value : 320 },
                 { name : ' ', datas:[ ],value : 302 },
                 { name : ' ', datas:[ ],value : 301 },
                 { name : ' ', datas:[ ],value : 334 },
                 { name : ' ', datas:[ ],value : 390 },
                 { name : ' ', datas:[ ],value : 330 },
                 { name : ' ', datas:[ ],value : 320 }
             ]   

这种形式也是可以进行显示条形图数据的，因为在数组中最终起作用的value值，至于其他如name是数据名称可以去掉，datas是自定义数组，我是用来封装其他想要在悬浮提示框的显示的数据。你还可以定义多个数组，但是返回给data的数据形式必须是以这种形式的，并且不能少了value值。

至于如何在悬浮提示框显示其他数据，这时候就需要formatter函数编辑了。formatter函数是设定悬浮提示框的数据信息，如果不编辑则echarts默认显示data里面的数据。

若除了需要显示data里面的数据还需要显示其他数据可自己编辑定义然后返回一个字符串即可。

实例如下：

JS获取的数据：

$.each(response, function(i, data){
                            /**
                             * 油品信息：升数，笔数，挂牌金额，实付金额，优惠金额
                             * 除了挂牌金额和交易笔数在图表中显示
                             * 其他信息封装在datas中用于鼠标悬浮提示
                             */
                            $.each(oilsSeriesData, function(key, v){
                                var obj={datas:[],};
                                obj.value=data.dataCollectionDetailMap["oils"][key]?data.dataCollectionDetailMap["oils"][key].totalPrice:0;
               obj.datas[0] = data.dataCollectionDetailMap["oils"][key]?data.dataCollectionDetailMap["oils"][key].actualPayPrice:0;
                                obj.datas[1] = data.dataCollectionDetailMap["oils"][key]?data.dataCollectionDetailMap["oils"][key].discount:0;
                                obj.datas[2] = data.dataCollectionDetailMap["oils"][key]?data.dataCollectionDetailMap["oils"][key].sheng:0;
                                oilsSeriesData[key].data.push(obj);
                            });

说明：datas[0]是实际支付数据，datas[1]是优惠金额，datas[2]是升数。

var option = {
                    color: ['#1ab394', '#f8ac59', '#f58db2', '#41b9dc', '#ed5565', '#be75c6'],
                    tooltip : {
                        trigger : 'axis',
                        axisPointer : { // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                  formatter : function(params){
                        var res  =  params[0].name;
                            res += '<style>td{padding:5px;}</style><table>';
                            res += '<tr><td>油号</td><td>挂牌金额</td>';
                            res += '<td>实付金额</td><td>优惠金额</td><td>升数</td></tr>';
                          for(var i=0;i<params.length-1;i++){
                            res += '<tr><td>'+params[i].seriesName+'</td><td>'+params[i].value;
                            res += '</td><td>'+params[i].data.datas[0];
                            res += '</td><td>'+params[i].data.datas[1];
                            res += '</td><td>'+params[i].data.datas[2];
                            res += '</td></tr>';
                          }
                           res += '<tr><td>'+params[params.length-1].seriesName+'</td><td>'+params[params.length-1].value+'</td></tr>';
                            res += '</table>';
                            return res;
                       }
                    },

以上实例我设定的悬浮提示框是以表格形式展示数据。传进来的params默认是data里面的数据，因为我设定data是数组里面的数据是含有datas数组的，所以传入的参数params也是这种形式，params[i].seriesName和params[i].value是取出data里面的value值和数据名称。params[i].data.datas[0];是取出里面的数据。因为我是一次性取出各个油号的七天数据，所以需要一个for循环。如果只是返回一种里面的各个信息则无需for循环。

效果图如下：

悬浮提示框效果图

 

 

 

 

 

 

 

 

 

参考网址：https://blog.csdn.net/QingFeng_or_qinfeng/article/details/53665267

个人原创，转载请注明出处。