(uni app) 中 ucharts 格式化 y 轴显示的正确做法

使用 uchart 的时候，让组件自动分配 y 轴的刻度（y 轴分成 5 等分），发现当 y 轴的值区间被 5 除不尽的情况时，会出现显示异常，如图：

分析：

其实就是 y 轴只显示了数字的整数部分，想不出现这么怪异的现象，就需要控制下显示格式，将小数显示出来。

使用来自官方的解决方案，少走弯路，网上的很多文章中阐述不清，容易误导。

formatter 格式化问题

无论是 uCharts 还是 ECharts，因为组件不能传递 function，所有的 formatter 均需要变成别名 format 来定义，并在 config-ucharts.js 或 config-echarts.js 配置对应的 formatter 方法，组件会根据 format 的值自动替换配置文件中的 formatter 方法。（uCharts 参考示例项目 pages/format-u/format-u.vue）（ECharts 参考示例项目 pages/format-e/format-e.vue）

代码调整示例：

1. 找到自己 config-ucharts.js，如果是按照官方指引添加的组件，位置应该是在 uni-modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js, 可以见下图：

2. 在 config-ucharts.js 中找到 module.exports 对象，在其中添加 yAxisDemo2 的内容

"formatter":{
    "yAxisDemo1":function (val){return val+' 元 '},
    "yAxisDemo2":function(val){return val.toFixed(2)},
    "seriesDemo1":function(val){
      return val+' 元'
    },
    "tooltipDemo1":function(item, category, index, opts){
      if(index==0){
          return ' 随便用 '+item.data+' 年'
      }else{
          return ' 其他我没改 '+item.data+' 天'
      }
    },
  },

3. 去使用 ucharts 的页面修改代码

页面内容：

:opts="option" /> 

js 中定义的内容

option: {
                    color: [
                        // globalData.themeColor
                        '#e5e5e5'
                    ],
                    legend: {
                        show: false,
                    },
                    yAxis: {
                        disableGrid: true,
                        format:"yAxisDemo2"//yAxisDemo2 是步骤 2 中的格式化方法的名字
                    },
                }