小程序里使用ucharts的arcbar类型组件,
然后在ios里发现值为0的时候是好的圆环,有值的时候会变成一整片色块,还找不到原因
但在模拟器里都是好的
附上组件代码:
<template> <view class="charts-box"> <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" :loadingType="5" :tapLegend="false" ontap="false" :onmouse="false" /> </view></template>
<script>
export default {
props: {
score: {
type: Number,
default: 0
}
},
data() {
return {
chartData: {},
//这里的 opts 是图表类型 type="arcbar" 的全部配置参数,您可以将此配置复制到 config-ucharts.js 文件中下标为 ['arcbar'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
opts: {
timing: "easeOut",
duration: 1000,
rotate: false,
rotateLock: false,
color: ["#f00", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
"#ea7ccc"
],
padding: undefined,
fontSize: 13,
fontColor: "#666666",
dataLabel: true,
dataPointShape: true,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: false,
enableMarkLine: false,
title: {
name: '0',
fontSize: 66,
color: "#2d2d2d",
fontWeight: '600',
offsetX: 0,
offsetY: 0
},
subtitle: {
name: "",
fontSize: 0,
color: "#666666",
offsetX: 0,
offsetY: 0
},
extra: {
arcbar: {
type: "circle",
width: 22,
backgroundColor: "#F4F4F4",
startAngle: 1.5,
endAngle: 1.5,
gap: 50,
direction: "cw",
lineCap: "round",
radius: 110,
centerX: 0,
centerY: 0,
linearType: "custom",
customColor: []
}
}
}
};
},
onReady() {
// this.getServerData();
},
watch: {
score: {
handler(n, o) {
this.getServerData()
},
immediate: true,
deep: true
}
},
methods: {
getServerData() {
const s = this.score
let score = s / 100
// 颜色设置
let color = s < 60 ? ['#FD946D', '#FE6044'] : s < 80 ? ['#06AEEA', '#19D2C0'] : s < 90 ? ["#0FD6A5",
"#03D6B1"] : ['#FAD961', '#FF9458']
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
this.opts.title.name = s || 0
this.opts.extra.arcbar.customColor = color
console.info('score - ', score, color)
let res = {
series: [{
name: "",
color: color[0],
data: score
}]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
};
</script>
<style scoped>
/ 请根据实际需求修改父元素尺寸,组件自动识别宽高 /
.charts-box {
width: 100%;
height: 250px;
}
</style>
y***@qq.com
把这个属性删掉就行了 linearType: "custom",
2024-05-31 14:59