echart-柱状图

 目前在改别人遗留的bug,需求:

宽度 自适应的情况下 展示不友好:宽度太大

上下不居中 需求 要 上下 无论是否 有内容 都要居中展示 以0刻度为标准

 

宽度 设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
series: [
            {
                name: '已付金额',
                type: 'bar',
                stack: 'one',
                color:'#7198d2',
                itemStyle: itemStylet,
                barCategoryGap:10,
                data: data1,
                barWidth:15  宽度15规定
            },
            {
                name: '未付金额',
                type: 'bar',
                stack: 'one',
                color:'#f09266',
                itemStyle: itemStylett,
                barCategoryGap:10,
                data: data2
            }
        ]

  

高度调整

原理:给 y轴 设置 最大值 ,最小值,最大值和最小值 为 数据中 最大值的绝对值  这样 canvas就会基于 0刻度线居中

1
2
3
4
5
6
7
8
9
10
11
12
13
yAxis: {
        axisLabel:{
            formatter:function (value, index) {
                if(value<0){
                    return -value;
                }else{
                    return value;
                }
            }
        },
        min:-getMaxMin(data1,data2),
        max:getMaxMin(data1,data2)
    },

  

var data1 = [400,400,400,400];
var data2 = [-400,-6000,-600,-1000,];

1
2
3
4
5
6
7
8
9
10
11
12
13
var num=0;
    function getAbcArr(data2) {
        var arr=[];
        $.each(data2,function (i, v) {
            arr.push(Math.abs(v))
        })
        return arr
    }
    function getMaxMin(data1, data2) {
        var arr=data1.concat(getAbcArr(data2));
        return Math.max.apply(null,arr)
    }
    getMaxMin(data1,data2)

  



最后的效果图

 

 

 

 新bug ,明明没有设置最后一个x轴加粗,显示出来就是加粗了

 

后来检查 发现时 这里的问题 

 

interval: 0,// 0 强制显示所有,1为隔一个标签显示一个标签,2为隔两个
1
2
3
4
5
6
7
axisLabel:{
                       interval: 0,// 0 强制显示所有,1为隔一个标签显示一个标签,2为隔两个
                       rotate: -25,//标签旋转角度,在标签显示不下的时可通过旋转防止重叠
                       textStyle: {
                           fontSize: 10,//字体大小
                       }
                   },

  

 由于字体比较多 所以对x轴显示 做了一些 配置 而interval:0导致了 这个bug

这里 把这个直接注释 就可以解决,默认都显示。

 

posted @   明媚下雨天  阅读(416)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示