echarts柱状图、折线图求合，通过formatter回调函数自定义tooltip展示格式

来源：互联网发布：java用float判断大小编辑：程序博客网时间：2024/06/02 04:18
前一篇文章写了思路一：给series集合末尾多加一栏用于展示合计，但缺点较多，所以又想了另一个方法。
思路二：通过tooltip中的函数formatter自定义鼠标触发时的展示格式，先看展示效果
最底下加了合计一栏

当我们去掉“安卓”选项时：合计的值也动态的改变了

好了，接下来就看实际的代码吧：
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts2</title>    <!-- 引入 echarts.js -->  <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width:1600px;height:800px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {                    tooltip : {                        trigger :'axis',                        axisPointer : {                            type : 'line'                        },                        formatter:''        //思路二：给tooltip一个函数，点击的时候展示数据                    },                    title: {                        text:'xxx激活设备数',                        left:'left' ,                        top:'10px',                        textStyle: {                        color: '#666',                        fontWeight: 'normal'                        }                    },                    toolbox: {                        feature: {                        dataView: {show: true, readOnly: false},                        magicType: {show: true, type: ['line', 'bar']},                        restore: {show: true},                        saveAsImage: {show: true}                        }                    },                    grid: {                        y: '10%',                        y2: '10%'                    },                     legend: {                        data:['安卓','诺基亚','苹果']                    },                    xAxis:{                        type: 'category',                        axisLabel:{                        interval: 0,    // {number}                        rotate: 40                        },                        data: ['星期三','星期四','星期五']                        },                    yAxis:{                        type: 'value',                        min: 0,                        interval: 10000                    },                    series: [                        {                            name:'安卓',                            type:'line',                            stack:'xxx',                            itemStyle: {                                normal: {                                    color: '#548dd5'                                }                            },                            data:  [["星期三",10000],["星期四",15000],["星期五",20000]]                        },                        {                            name:'诺基亚',                            type:'line',                            stack:'xxx',                            itemStyle: {                                normal: {                                    color: '#000'                                }                            },                            data:  [["星期三",11000],["星期四",16000],["星期五",25000]]                        },                        {                            name:'苹果',                            type:'line',                            stack:'xxx',                            itemStyle: {                                normal: {                                    color: '#e56c0a'                                }                            },                            data:  [["星期三",12000],["星期四",18000],["星期五",28000]]                        }                    ]        };        //替换formatter                                var fun = function (params) {                                     var myseries = option.series;                                    var chartType = option.odao_admin.chart_type;                                    var data3 =0;                                     var axis =[];                                    for(var i=0,l=params.length;i<l;i++){                                         for (var j = 0; j < myseries.length; j++) {                                              if(myseries[j].name == params[i].seriesName){                                                  axis.push(params[i].axisValue)                                                var res = axis[0] +'</br>'; //取对应x轴的值                                            }                                          }                                      }                                     for(var i=0,l=params.length;i<l;i++){                                         for (var j = 0; j < myseries.length; j++) {                                              if(myseries[j].name == params[i].seriesName){                                                var color = params[i].color;                                                if(chartType == 'bar_back'){                                                    res += '<span style=" font-size:22px;color:'+ color +';">'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[0]+'</br>';    //添加颜色并赋值                                                }else{                                                    res += '<span style=" font-size:22px;color:'+ color +';">'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[1]+'</br>';    //添加颜色并赋值                                                }                                             }                                          }                                      }                                     for(var i=0,l=params.length;i<l;i++){                                        if(chartType == 'bar_back'){                                                            data3 += params[i].data[0]  //反转图重新计算总和                                        }else{                                            data3 += params[i].data[1]                                        }                                    }                                     var res =res + '<span style="font-size:22px;color:black;">'+' ● '+'</span>' + ' 合计：' +data3;                                    return res;                                  }        //加载页面时候替换tooltip的formatter        option["tooltip"]["formatter"] = fun         // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);        //legend点击事件，根据传过来的obj.selected得到状态是true的params对应的series的下标，再去计算总和        myChart.on("legendselectchanged", function(obj) {                var changefun = function (params) {                var b = obj.selected                , d = [];                var data3 =0;                var myseries = option.series;                var chartType = option.odao_admin.chart_type;                var axis =[];                for(var i=0,l=params.length;i<l;i++){                     for (var j = 0; j < myseries.length; j++) {                          if(myseries[j].name == params[i].seriesName){                              axis.push(params[i].axisValue)                            var res = axis[0] +'</br>'; //取x轴的值                        }                      }                  }                 for(var i=0,l=params.length;i<l;i++){                     for (var j = 0; j < myseries.length; j++) {                          if(myseries[j].name == params[i].seriesName){                             var color = params[i].color;                            if(chartType == 'bar_back'){                                res += '<span style=" font-size:22px;color:'+ color +';">'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[0]+'</br>';    //反转图添加颜色并赋值                            }else{                                res += '<span style=" font-size:22px;color:'+ color +';">'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[1]+'</br>';    //添加颜色并赋值                            }                         }                      }                  }                 for(var key in b){                    if(b[key]){                        for(var i=0,l=params.length;i<l;i++){                              var changename = params[i].seriesName;                             if(changename == key){                                 d.push(i);      //得到状态是true的legend对应的params的下标                            }                        }                    }                }                for(var i=0,l=d.length;i<l;i++){                    for(var j=0,h=params.length;j<h;j++){                        if(d[i] == j){                            if(chartType == 'bar_back'){                                                data3 += params[i].data[0]  //反转图重新计算总和                            }else{                                data3 += params[i].data[1]                            }                        }                    }                }                var res =res + '<span style="font-size:22px;color:black;">'+' ● '+'</span>' + ' 合计：' +data3;                return res;              }                option["tooltip"]["formatter"] = fun1                myChart.setOption(option);        })    </script></body></html>
代码有点长，有看不懂的地方，欢迎各位留言，我会尽量解答。
阅读全文
0 0