createjs技术博客

想必大家做图表的时候经常遇到这种问题，文字需要显示在刻度上，但图形却要显示在刻度区间，如图：

一般来说，echarts只能完成文字和图形都在刻度中，或者都在区间，如图：

或者

这2种都达不到要求，如果要做到文字在刻度上，图形在区间中怎么办呢？我下面贴出代码，大家可以去echarts官网粘贴代码试试：

option = {
  xAxis: {
   type: 'value',
  },
  yAxis: {
     type: 'category',
    data: [
      {
          //用\n和lineHeight的方法来排版y轴文字,如果是横向的可以用空白占位符，空格不行。
        value: "A\n\n\nB\n\n\nC\n\n\nD\n\n\nE\n\n\nF\n\n\nG\n\n\nH\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
        textStyle: {
            lineHeight:12.1,          
        },
        
      },
    ],
    boundaryGap: true,//让文字和图形在区间显示
    min: -1,//让上下各空出一格来防止柱状图覆盖住X轴底部的文字
    max:8,//让上下各空出一格来防止柱状图覆盖住X轴底部的文字
    
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option = {
  xAxis: {
   type: 'value',
  },
  yAxis: {
     type: 'category',
    data: [
        //用padding排版y轴文字，注意需要用verticalAlign:'top'来置顶，横轴也是一个道理，但是需要用align，pading的方向也要换
      {
        value: "A",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',      
        },
      },
      {
        value: "B",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',       
        },
      },
      {
        value: "C",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',         
        },
      },
      {
        value: "D",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',        
        },
      },
      {
        value: "E",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',         
        },
      },
      {
        value: "F",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',       
        },
      },
      {
        value: "G",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',        
        },
      },
      {
        value: "H",
        textStyle: {
           padding: [27, 0, 0, 0],
          verticalAlign: 'top',    
        },
      },
    ],
    boundaryGap: true,//让文字和图形在区间显示
    min: -1,//让上下各空出一格来防止柱状图覆盖住X轴底部的文字
    max:8,//让上下各空出一格来防止柱状图覆盖住X轴底部的文字
    
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

上面2个方法其实都是靠改变轴上的文字来达到重新排版的目的，但是目前还有缺陷，就是如果数量是活的排版就不好排了，最好还是echarts官方能有api自动做这个事情。

最后，如果有同学知道别的更好的办法，欢迎在底下留言。