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
这里 把这个直接注释 就可以解决,默认都显示。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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 构建精确任务处理应用