uniapp使用ucharts图表数据百分比显示

ucharts的过滤方式为format,formatter，具体使用请看https://demo.ucharts.cn/#/chartData.series数据属性小程序中使用format，但是不支持传递function函数，可以传递字符串，所以需要我们手动去修改找到uni_modules/qiun-data-charts/js-sdk/u-charts/config-ucharts增加forma

savethink

5683人浏览 · 2021-11-30 11:55:09

savethink · 2021-11-30 11:55:09 发布

ucharts的过滤方式为format,formatter，具体使用请看https://demo.ucharts.cn/#/ chartData.series数据属性
小程序中使用format，但是不支持传递function函数，可以传递字符串，所以需要我们手动去修改
找到uni_modules/qiun-data-charts/js-sdk/u-charts/config-ucharts
增加formatter下配置，然后在组件配置处设置为format:"名字"即可
百分比修改为"yAxisDemoMix":function(val){return val.toFixed(0)+’%’}

config-ucharts的配置

"formatter":{
    "yAxisDemo1":function(val){return val+'元'},
	"yAxisDemoMix":function(val){return val.toFixed(0)+'%'},
    "yAxisDemo2":function(val){return val.toFixed(2)},
    "xAxisDemo1":function(val){return val+'年'},
    "xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
    "seriesDemo1":function(val){return val+'元'},
    "tooltipDemo1":function(item, category, index, opts){
      if(index==0){
      	return '随便用'+item.data+'年'
      }else{
      	return '其他我没改'+item.data+'天'
      }
    },
    "pieDemo":function(val, index, series){
      if(index !== undefined){
        return series[index].name+'：'+series[index].data+'元'
      }
    },
  },

组件中使用

<view class="chart flex column">
	<text class="title">明细</text>
	<qiun-data-charts
		class="charts-box"
		type="area"
		:chartData="stockChartData"
		:opts="stockOpts"
		:inScrollView="true"
		:canvas2d="true"
		:ontouch="true"
		canvasId="canvans3"
	/>
</view>

stockChartData:{
	categories: [],
	series: [
		{
			name: '退货率（退货数/送货数）',//下标文字
			data: [],
			type: 'line',//设置这个是为了让下标变成长方形
			format: 'yAxisDemoMix'//数据格式化
		}
	]
}

stockOpts: {
	color: ['#4EB7FF', '#FF8686'],
	yAxis: {
		data: [
			{
				min: 0, //最大值
				max: 100, //最小值
				format: 'yAxisDemoMix' //格式化使用
			}
		]
	},
	enableScroll:true,
	xAxis:{
		rotateLabel:true,
		labelCount:4,
		itemCount:4
	},
	legend: { //图标显示的位置
		position: 'top',
		float: 'right'
	},
	extra: {
		area: { //区域的设置
			type: 'curve',//曲线
			gradient: true
		},
		tooltip: { //提示框的设置
			bgColor: '#2177FF'
		}
	}
}