一、简单说明

本人最近在uni-app项目中需要使用折线图，一开始用的echarts，H5端是可以正常使用，但是移动端就展示不出来了。看了uni-app的官方文档后发现了可以全端使用的ucharts。配置好之后H5端和安卓端都可以正常展示了。ucharts可以在uni-app的插件市场中直接下载，下载链接在这里https://ext.dcloud.net.cn/plugin?id=271
本人在使用过程中因为数据节点的格式化耗费了比较多的时间，所在在此做一个笔记，分享给大家，也方便自己后面再次查看。使用方法在ucharts官方文档中都有写，本人只做汇总节省大家看文档的时间，官方文档文档 - uCharts跨平台图表库

二、预览效果

ucharts有原生方式和组件方式，本人使用的是组件方式，实现了y轴最大最小数值的设置，y轴数据的格式化，节点数据的格式化（增加"%"）

三、完整代码

这里利用的是官方给的实例代码做的修改，先给出完整代码，具体设置在后面讲解。

1、config-ucharts.js代码

"formatter":{
	"yAxisPercent":function(val, index, opts){return val+'%'},
    "yAxisDemo1":function(val, index, opts){return val+'元'},
}，

2、页面代码

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
		  dashLength: 2,
          //如果只是给y轴后面加一个%，利用unit属性就可以；如果是复杂的，可以利用data的format
          //两个选择其中一个就可以
		  unit: "%",
          //yAxisPercent即为上面配置文件中的方案
		  data:[{min:0,max:200,format: "yAxisPercent"}]  
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "成交量A",
                data: [35,8,25,37,4,20]
              },
              {
                name: "成交量B",
                data: [70,40,65,100,44,68]
              },
              {
                name: "成交量C",
                data: [100,80,95,150,112,132]
              }
            ]
          };
        let formatData =  JSON.parse(JSON.stringify(res));
		
        //使用format属性指定config-ucharts.js里事先定义好的formatter的key值，
        //组件会自动匹配与其对应的function 		
		for (var i = 0; i < formatData.series.length; i++) {
			formatData.series[i].format = "yAxisPercent"
		}
		this.chartData = formatData;
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>

四、简单讲解

1、首先要在config-ucharts.js中配置好我们需要的function-yAxisPercent,其中config-ucharts.js文件的位置在uni_modules\qiun-data-charts\js_sdk\u-charts，找到文件之后直接搜索formatter就可以看到了，里面有官方自己配置好的demo。
2、y轴的最大最小和格式化需要写在data数组里，官方文档说了可能会有多个y轴。

3、数据节点的格式化需要在赋值时格式化好。

4、关于插件下载方式这里就不做说明了，大家有问题的可以私信或者评论。