堆积柱形图---当数据为0时不显示；但tooltip中显示带单位的数据0；tooltip中显示数据前面的小圆点

最新推荐文章于 2025-06-09 18:18:24 发布

佛佛ง

最新推荐文章于 2025-06-09 18:18:24 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts学习笔记文章标签： echarts

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/80986015

Echarts学习笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用ECharts实现堆叠柱状图，并针对含有0.00数值的情况进行特殊处理，确保图表展示的准确性。文章通过具体代码示例展示了如何设置数据为0.00时不显示，同时在提示信息中仍然保持其完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、源码

app.title = '堆叠柱状图';
var data1=[120, 0.00, 101, 134];//含有0.00数据
var data2=[0.00, 0.00, 191, 234];//含有0.00数据

var change=function(arr){//当数据是0.00时，设置成空，则echarts不显示
    var len=arr.length;
    for(var i=0;i<len;i++){
        if(arr[i]===0.00){
            arr[i]="''";
        }
    }
    return arr;
};

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter : function(params) {//提示信息，为空时，显示成0.00
                    if(params[0].value=="''"){
                        params[0].value='0.00';
                    }
                    if(params[1].value=="''"){
                        params[1].value='0.00';
                    }
					return params[0].name + "<br/>"
                    +params[0].marker+params[0].seriesName + "："+ params[0].value + "元<br/>"
                    +params[1].marker+params[1].seriesName + "："+ params[1].value + "元<br/>";
                    //.marker表示数据前面的小圆点
		},

    },
    legend: {
        data:['邮件营销','联盟广告']
    },
    grid: {
        left: '13%',
        right: '14%',
        bottom: '23%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
       
        {
            name:'邮件营销',
            type:'bar',
            barWidth:100,
            stack: '广告',
             label: {
                normal: {
                    show: true,
                    position: 'insideTop',
                }
            },
            data:change(data1),
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
             label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:change(data2),
        },
    ]
};