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

  1. ucharts的过滤方式为format,formatter,具体使用请看https://demo.ucharts.cn/#/ chartData.series数据属性
  2. 小程序中使用format,但是不支持传递function函数,可以传递字符串,所以需要我们手动去修改
  3. 找到uni_modules/qiun-data-charts/js-sdk/u-charts/config-ucharts
  4. 增加formatter下配置,然后在组件配置处设置为format:"名字"即可
  5. 百分比修改为"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'
		}
	}
}
上一篇:七十八、java版商城之个人中心“我的”Spring Cloud+SpringBoot+mybatis+uniapp b2b2c o2o 多商家入驻商城 直播带货商城 电子商务


下一篇:[20211014.B64驱动培训]转发模型初始化+网卡挂载设备链+网卡各项配置初始化+网卡使能