echarts设置x轴，标签与x轴的距离（当y轴有负数时，x轴标签紧贴x轴）

崽崽的谷雨

已于 2023-07-19 13:47:16 修改

阅读量2.7w

点赞数 3

分类专栏： echarts 文章标签： echarts

于 2019-12-19 12:36:33 首次发布

本文链接：https://blog.csdn.net/weixin_44058725/article/details/103612347

版权

echarts 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

在用echarts做折现图时遇到的问题效果图是这样的。

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        onZero: false,
        show: true

    }, ],
    yAxis: [{
        type: 'value',
    }, {

    }],
    series: [{
        data: [3, 10, -9, 3, -3, 19, 15],
        type: 'line'
    }]
};

而做出来的是这样的

我想让x轴的标签（Mon ,Tue。。。）紧贴着x轴（0刻度线上）。试了很久终须做出来了，给x轴加个axisLabel{margin:-180}(只要为负数就行，负数可根据需要调整，也可以动态计算)

动态计算思路：

1.找出数据中最小值（注意如果没有负数择不需要加axisLabel{margin:-180}属性，因为不涉及这个紧贴效果）。

2.根据最小值（一定要为负数），动态设置axisLabel{margin:}的值。

例如： data: [3, 10, -9, 3, -3, 19, 15] 中最小值为-9。设置margin:-180（这个 -180使用你的统计图配置，先手动调到想要的效果得到一个值再进行下面得计算）。

因为最小值为-9所以负数轴最凶小为-10。因为-10得margin为-180，-180/-10=1.8；得到大概一个单位（也就是1）的margin为1.8。最后再根据数据最小值计算，最小值*一个单位值。

当然也不一定也可以这样：

因为最小值为-9所以负数轴最凶小为-10。因为-10得margin为-180，-10到0有两个大格，就能得出一个大格为-90（代表得值为5），然后计算一共几个大格。例如：最小值为-19则这样计算 -19/5=3.8（向上取整为4个），4*-90=-360。可能会遇到最小值特别大，它的每个大格可能会动态改变数值（除非你自己写死了每个格代表的数值），例如最小值为-200则每个格自动变为50了。。。特别坑。

当然我提供的是思路，需要根据你自己的效果微调（因为官方api没有现成的属性只能这样了）。而且还需要注意margin的负数值不能大于总体统计图的高，要不然就超出统计图范围了。

另外，Grid中不要写containLabel: true。可能会导致显示不全（如果显示不全把这个属性加上试试）。

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        onZero: false,
        show: true,
 
         axisLabel: { //坐标轴刻度标签的相关设置
             margin: -180, //刻度标签与轴线之间的距离
 
         },
 
    }, ],
    yAxis: [{
        type: 'value',
    }, {
 
    }],
    series: [{
        data: [3, 10, -9, 3, -3, 19, 15],
        type: 'line'
    }]
};

echarts在线编辑器

x,y轴具体参数配置可参考本片博客

更多效果可以去echarts社区找

https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all --echarts社区

https://www.isqqw.com/

http://www.ppchart.com/#/

补充：

如果不想让 x轴在0刻度上设置 axisLine.onZero=false即可

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        onZero: false,
        show: true,
         axisLine:{
           onZero:false
         }
 
    }, ],
    yAxis: [{
        type: 'value',
    }, {
 
    }],
    series: [{
        data: [3, 10, -9, 3, -3, 19, 15],
        type: 'line'
    }]
};

效果图：

Documentation - Apache ECharts-xAxis.axisLine.onZero