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

最新推荐文章于 2024-05-21 09:09:26 发布
最新推荐文章于 2024-05-21 09:09:26 发布
阅读量6k 收藏 6
点赞数 1
分类专栏： javascript echarts3-0-柱状图-斜 文章标签： javascript 前端 echarts3-0 tooltip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36612779/article/details/78815292
版权

前一篇文章写了思路一：给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>

代码有点长，有看不懂的地方，欢迎各位留言，我会尽量解答。

随风远行godv
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echarts双数据柱状叠加统计 及折线总和
liuxiaocaie的博客
01-25 1409
var xData = function() { var data = []; for (var i = 1; i < 13; i++) { data.push(i + "月份"); } return data; }(); option = { backgroundColor: "#344b58", "title": { "text": "本年商场顾客男女人数统计", "subtext": "...
echarts 同时显示柱状图+折线图 (提示框显示百分号%和千分位分隔符）
gc_charl的博客
07-13 3688
echarts同时显示柱状图 + 折线图 提示框组件（tooltip）柱状图value显示千分位分隔符 折线图显示value + ‘%’
eCharts配置项组件“tooltip”
最新发布
zyc_yy的博客
05-21 182
【代码】eCharts配置项组件“tooltip”
echarts的tooltip展示总量
haosicx的博客
08-17 1043
有的时候需要tooltip展示总量怎么做呢? 下面的代码可以展示x轴当前数据的总和 tooltip: { trigger: 'axis', axisPointer: { // Use axis to trigger tooltip type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' }, .
【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值
qq_26780317的博客
03-03 8313
【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值
关于Echarts图标的tooltip配置中的formatter
weixin_55501516的博客
02-20 3598
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。使用tooltip的formatter进行格式化，格式化前效果如上图，一个是数字，一个是xxx万，不符合设计，需要统一，期望效果是这样。自定义函数的第一个参数params是formatter需要的数据集。
ECharts堆叠柱状图label显示总和
lyd的博客
11-11 3480
思路: 将最后一类的label用formatter函数处理为总和。 option = { title: { text: '分类销量（堆叠柱状图求和）' }, legend: { y: "bottom", data: ['百货', '电子', '服装'] }, xAxis: [{ type: "c...
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
echarts自作地图显示散点图 tooltip自定义内容
07-10
ECharts是一款由百度开发的基于JavaScript的数据可视化库，它支持丰富的图表类型，包括柱状图、折线图、饼图以及地图等。在ECharts中，我们可以利用其强大的地图功能来构建具有个性化的数据可视化应用。 1. **...
手机端使用echarts图表，选项卡切换数据图表,圆环图，柱状图，折线图
12-19
在移动设备上，ECharts 是一个非常流行的 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图和圆环图等。本文将详细介绍如何在手机端利用 ECharts 实现选项卡切换不同数据图表的功能。 首先，...
echarts 甘特图，tooltip 轮播
12-23
它提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持自定义交互和动画效果。在 ECharts 中，甘特图是一种特殊的图表类型，用于显示项目的时间线和进度，非常适合于任务管理或项目调度。 "echarts 甘特图，...
在Echarts 地图上画柱状图
06-26
在ECharts中，地图与柱状图的结合可以创建出一种独特且富有视觉效果的数据展示方式。这种技术常用于地理数据分析，例如展示不同省份或地区的数据对比。在本案例中，我们将探讨如何在ECharts地图上绘制柱状图，并实现...
echarts柱状图添加图例,数据显示在柱状图上,添加dataZoom,并且tooltip显示全部数据进行对比
qq_51391556的博客
01-09 1352
这种格式时,并且在series中加入'barGap:'-100%'',这样可以完全显示,但是此时会发现tooltip如果使用echarts自带的配置会出现问题(当鼠标移入到某一个柱子上时,只出现当前柱子的数据,其他柱子的数据全是null),这是就需要自己配置tooltip.这里我使用了两种数据,主要为了方便配置tooltip。但是这时候将其循环放入series中发现,数据会显示不全,并且加入dataZoom的时候,图中的柱子会整体向左偏移(目前还没找到原因),后来发现一种方法,将数据格式变为。
echarts中间实现统计总数的效果
weixin_38233449的博客
08-30 1010
let option = { title: { zlevel: 0, text: ["{value|" + total + "}" + " " + "{name|人}"], rich: { value: { color: "#ffffff", fontSiz...
ECharts 饼图的合并显示
老杨头的博客
12-20 3176
ECharts提供了丰富的图表功能，其中饼图是一个常用的功能。 但是很多时候由于设置的数据量过多，导致图表显示非常拥挤，不利于用户快速阅读，提取有效信息。如下图所示： 此时可以将数据进行一下排序，将数值较小的数据进行合并显示，合并后的展示效果如下图所示： 可以看到合并后，整个图表看起来更加简洁，更能快速的得到一个大概的占比比例信息，方便了信息提取。 通过简单的代码处理就可以实现上述的数据合并展示： ...
Echart 图表模板变量 {a}, {b}，{c}，{d}，{e}
happy81997的博客
10-24 2741
Echart 图表模板变量 {a}, {b}，{c}，{d}，{e} 模板变量有{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在trigger为'axis'的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b...
ECharts 同时显示柱状图和折线图
热门推荐
旭东怪的博客
09-28 1万+
1 实现代码 <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图
eCharts绘制双系列混合类型图表+额外tooltip信息
Dexter's Laboratory
10-08 1697
直接上效果图，双Y轴，双系列+额外tooltip信息 <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('myAreaChart')); // 指定图表的配置项和数据 var o...
【解决】Echarts柱状图上tooltip提示框里面的文字前面的圆点颜色及大小调整
huangfuyk.的博客
10-31 5235
调整Echarts柱状图上tooltip提示框里面的圆点颜色及大小（默认情况下该圆点颜色是与柱状图颜色保持一致的）。
echarts柱状图和折线图组合自定义tooltip
08-30
您可以通过ECharts的tooltip配置项来实现自定义tooltip。下面是一个示例代码，将柱状图和折线图组合，并自定义tooltip显示内容： ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: function(params) { var lines = params.map(function(param) { if (param.seriesType === 'line') { return param.marker + ' ' + param.seriesName + ': ' + param.value.toFixed(2); } else { return param.marker + ' ' + param.seriesName + ': ' + param.value; } }); return params[0].axisValue + '<br/>' + lines.join('<br/>'); } }, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: [ { type: 'value', name: '柱状图', axisLabel: { formatter: '{value}' } }, { type: 'value', name: '折线图', axisLabel: { formatter: '{value}' } } ], series: [ { name: '柱状图', type: 'bar', data: [10, 20, 30, 40, 50, 60] }, { name: '折线图', type: 'line', yAxisIndex: 1, data: [100, 90, 80, 70, 60, 50] } ] }; ``` 在上述代码中，我们通过设置tooltip的formatter回调函数来自定义tooltip的显示内容。在formatter函数中，我们遍历params参数，根据seriesType判断是柱状图还是折线图，并根据需要格式化显示的内容。最后通过return返回最终的tooltip内容。 您可以根据实际需求进行修改和扩展，调整tooltip的样式和显示内容。希望对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值