ECharts：如何显示所有轴标签？

Question

Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.

"

Answer 1

axisLabel (under yAxis or xAxis ) has an option interval . Set this to 0 and labels will be displayed.

Answer 2

You can try this to force the label of the x-axis,

xAxis: {
      type: "category",
      data: data[0],
      axisLabel: {
        interval: 0,
        rotate: 30 //If the label names are too long you can manage this by rotating the label.
      }

//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.

If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,

grid: { containLabel: true },

Answer 3

2 ways to solve long label text

1. Using rotate option xAxis : { axisLabel: { rotate: 45 } }
2. Using formatter and introducing '/n' to break the text

Answer 4

just for the record:

If your categories have a fixed width, you can also set it up like this, in order to show all labels:

      axisLabel: {
        width: 100, //fixed number of pixels
        overflow: 'truncate', // or 'break' to continue in a new line
        interval: 0,
      },