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

在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

默认内容:
在这里插入图片描述
修改之后:
在这里插入图片描述

发布了51 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44171757/article/details/100654505