- 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'
}
}
}