echarts柱状图自定义hover上去的显示内容

亦凉 2024-04-18 15:44 62阅读 0赞

在option->toottip对象里面加formatter函数，代码如下：  
注意：参数params是series数组里面的每一个对象，params\[i\].data是返回具体的数值，如params\[0\].data依次返回11,22,33,44,55,66,77,88,99,78,78,199  
详情请查看官方文档：https://www.echartsjs.com/zh/option.html\#tooltip.formatter

let option = { 
                        color: ['#4cabce', '#006699'],
                        tooltip: { 
                            trigger: 'axis',
                            axisPointer: { ...},
                            formatter: function(params){ 
                                var res;
                                var num;
                                if (params[0].data>params[1].data) { 
                                    num=params[0].data-params[1].data
                                } else { 
                                    num=params[1].data-params[0].data
                                }
                                res= '<div><span>应收电费：</span>'+params[0].data+'元</div>' +
                                    '<div><span>实收电费：</span>'+params[1].data+'元</div>' +
                                    '<div><span>比率：</span>'+num+'%</div>';
                                return res
                            }
                        },
                        legend: { ...},
                        toolbox: { ...},
                        calculable: true,
                        xAxis: [...],
                        yAxis: [...],
                        series: [
                        { 
                                name: '应收电费',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                data: [11, 22,33,44,55,66,77,88,99,78,78,199]
                            },
                            { 
                                name: '实收电费',
                                type: 'bar',
                                label: labelOption,
                                data: [66,11,99, 22,88,78,33,44,55,99,77,78]
                            }
                        ]
    };

如何在页面上显示统计图（一定要给容器设置宽高，不然显示不出来）：

<div id="myChart2" style="width:800px;height: 500px"></div>
     //获取echarts对象
    this.myChart2 =  this.$echarts.init(document.getElementById('myChart2'));
    //设置option
    this.myChart2.setOption(option);   //option是上段代码let所定义的option

默认内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]  
修改之后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9916573cfef740d7b8ab1db9be160f07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c4fe9dbc5c7d42f888b0348a26d74968.png

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts柱状图自定义hover上去的显示内容

option->toottip对象里面加formatter函数，代码如下：注意：参数params是series数组里面的每一个对象，params\[i\].data...

亦凉/ 2024年04月18日 15:44/ 0 赞/ 63 阅读

相关 ECharts 同时显示柱状图和折线图

1 实现代码 <body> <div id="main" style="width: 600px;height:400px;"></div>

- 日理万妓/ 2023年10月05日 10:47/ 0 赞/ 26 阅读

相关 echarts柱状图右侧显示不全

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

╰半夏微凉°/ 2022年12月13日 14:09/ 0 赞/ 322 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 298 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 642 阅读

相关 echarts柱图分组显示(簇状柱形图)

> 需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割 > > 所用属性：yAxis/xAxis.splitArea > > splitAre

不念不忘少年蓝@/ 2022年10月24日 11:55/ 0 赞/ 463 阅读

相关 Echarts柱状图百分比显示

option = { tooltip: { trigger: 'item', formatter

冷不防/ 2022年09月12日 12:58/ 0 赞/ 283 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 369 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 315 阅读

相关 ECharts柱状图百分比显示

ECharts柱状图百分比显示 ![Center][] //shop为div的id var city\_all\_bar = echarts.init(do

系统管理员/ 2022年06月04日 05:41/ 0 赞/ 445 阅读