v-charts填坑实录——数据格式化

现在流行vue做前端，一些做管理端的盆友就免不了要做一些图表，那么这个时候就需要用到基于vue的图表插件——v-charts，基本的东西官方文档也很清楚，本文不再过多赘述，下面讲一讲 v-charts文档的坑：

同学们根据自己的业务需求，肯定会用到数据格式化，官方文档给出的demo如下：

大部分情况下，我们需要对数据进行一些格式化，每种图表组件对数据格式的设置方式略有不同。 例如 折线图使用 yAxisType, 饼图使用 dataType。基本的数据格式有 ‘normal’ （千分位）、‘KMB’ （kmb 格式）、percent （百分比格式）；如果上述格式不能满足需求的话，还可以使用 numerify 的格式来配置显示，具体的格式支持和插件扩展写法可以参考 numerify 文档；并且，为了支持更多未知的情况，格式的设置也支持使用回调函数的方式。以上三种方式 的使用可以参考下面的示例。

其中 numerify 坑也比较多，不建议使用，推荐使用回调函数，但是官方demo有一个致命bug：

如果按照这个demo写，回调函数是不起作用的，应该写成：

<script>
  export default {
    data () {
      this.chartSettings = {
        dataType: [function (v) {
          return v + ' ￥'
        }]
      }
      return {
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        }
      }
    }
  }
</script>

对，没错，回调函数外面需要加个中括号，这样这个回调函数才会起作用。