VChart中如何定义label 显示的数值小数位数？

Question

我使用VChart图表时，发现如果数字的小数位比较长时显示效果很不美观，有什么办法能控制标签显示的小数位长度吗？

Answer 1

series: [
    {
      data: [820.312345465, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      label: {
        show: true,
        formatter: (params) => {
          return params.data.toFixed(2)
        }
      }
    }
  ]

使用formatter属性来调整标签显示的格式
参考文档 https://echarts.apache.org/zh/option.html#series-line.label.f...

Answer 2

解决方案 Solution

通过VChart的标签格式化函数可以解决这个问题，此外格式函数还可以支持自定义数字单位等需求

代码示例 Code Example

// two decimal places
spec.label.formatMethod = (value: number) => (+value).toFixed(2)

// numerical unit
spec.label.formatMethod = (value: number) => ((+value)/1e3).toFixed(2) + 'k'

结果展示 Results

Demo: https://codesandbox.io/s/label-formatter-d34xrm?file=/src/ind...

相关文档 Quote

formatMethod option：https://visactor.bytedance.net/vchart/option/barChart#label.f...

label tutorials: https://visactor.bytedance.net/vchart/guide/tutorial_docs/Cha...

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