前端 - VChart图表的轴标签如何做截断，换行等效果？

Question

类似 （https://www.visactor.io/vchart/demo/bar-chart/basic-bar）这样的条形图，

当轴标签非常长的时候，怎么实现换行？截断相关效果

Answer 1

解决方案 Solution

不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要配置axes 中对应轴的label相关配置：

• 通过formatMethod返回数组，可以实现自定义换行
• 通过style.maxLineWidth可以实现自动截断
• 通过style.ellipsis可以设置省略符
  

代码示例

Code Example

const spec = {  type: 'bar',  data: [    {      id: 'barData',      values: [        {          name: 'Apple https://www.apple.com/',          value: 214480        },        {          name: 'Google https://www.google.com.hk/',          value: 155506        },        {          name: 'Amazon https://www.amazon.com/',          value: 100764        },        {          name: 'Microsoft https://www.microsoft.com/',          value: 92715        }      ]    }  ],  direction: 'horizontal',  xField: 'value',  yField: 'name',  axes: [    {      orient: 'bottom',      visible: false    },    {      orient: 'left',      label: {        formatMethod: (text, datum) => {          return text.split(' ');        },        style: {          maxLineWidth: 100,          ellipsis: '~'        }      }    }  ],  label: {    visible: true  }};

结果展示

在线效果参考：https://codesandbox.io/s/axis-label-auto-limit-pnsvzl

相关文档

坐标轴demo：https://www.visactor.io/vchart/demo/axis/animation

坐标轴教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc...

相关配置：https://www.visactor.io/vchart/option/barChart#axes-band.labe...

github：https://github.com/VisActor/VChart

Answer 2

看了下文档，能试的只有这个属性了。

另外，如果这个库不支持自定义坐标轴内容，可以考虑：
1.禁用坐标轴，自己写一个定位上去
2.换支持自定义的图表库