echart 柱状图两个纵轴坐标刻度不一样

╰+哭是因爲堅強的太久メ 2021-10-24 06:44 594阅读 0赞

在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀.

解决办法:

使用max , splitNumber, interval 三个属性配合

{
                type: "value",
                name: "订单量",
                position: "left",
                axisTick: {
                  show: true
                },
                axisLine: {
                  show: true,
                  onZero: true,
                  lineStyle: {
                    color: "#999"
                  }
                },
                axisLabel: {
                  formatter: "{value}"
                },
                splitLine: { show: true },
                min: 0,
                max: 1,
                splitNumber: 5
                interval: "",
              },

赋值最大值, 分割刻度:

let max0 = data.max_count;
            if(data.max_count < 1){
              this.orderOption.yAxis[0].max = 1
            }else{
              for(let i=0; i<10; i++){
                  if( max0/Math.pow(10, i) <10){
                        this.orderOption.yAxis[0].max = Math.ceil(max0/Math.pow(10, i)) * Math.pow(10, i)
                        this.orderOption.yAxis[0].interval = (Math.ceil(max0/Math.pow(10, i)) * Math.pow(10, i))/5
                        break;
                    }
              }
            }

这里的for循环可以用递归的, 但是递归不太会写所以就用for循环代替, 不知道有没有大神出来指导一下的

转载于:https://www.cnblogs.com/lianxisheng/p/10978634.html

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts 柱状图滚动

实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移 ![6ef725868b7d4ae1937e080898079d3d.png][] echarts文档里，图形

Bertha 。/ 2023年09月23日 16:13/ 0 赞/ 144 阅读

相关 echarts 柱状图

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

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

相关 echarts 特殊柱状图

特殊规则柱状图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 10:13/ 0 赞/ 200 阅读

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

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

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

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 298 阅读

相关 echarts-柱状图

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

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

相关 echarts柱状图

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

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

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 705 阅读

相关 echart 柱状图两个纵轴坐标刻度不一样

在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很

╰+哭是因爲堅強的太久メ/ 2021年10月24日 06:44/ 0 赞/ 595 阅读

相关 ECharts之柱状图

效果图 ![在这里插入图片描述][20190725104919483.gif] 背景图片 ![20190725170845879.png][] 下载EChar

旧城等待，/ 2021年09月29日 22:48/ 0 赞/ 762 阅读