极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>G2</title>
</head>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.0.8/dist/g2.min.js"></script>
<body>
<div id="c1"></div>
<script>
// 构造数据
const data1 = [];
for (let i = 0; i < 50; i++) {
data1.push({
type: i + '',
value: 4,
});
}
const data2 = [];
for (let i = 0; i < 50; i++) {
const item = {};
item.type = i + '';
item.value = 4;
if ((i + 1) % 5 === 0) {
item.value = 7;
}
data2.push(item);
}
const data = [{ value: 6 }];
const color = ['#03c8ef', '#02b0d1', '#02bad8', '#03bbd8', '#02c0d9', '#01c1d9', '#01f0ff', '#01c0d5', '#0694d9', '#088ed9', '#0d7bd0', '#108fff', '#0f72d8', '#0f72d8', '#0f72d8', '#0f72d8', '#76478c', '#d35454', '#d2383a', '#983647'];
const chart = new G2.Chart({
container: 'c1',
autoFit: true,
height: 300,
padding: 0,
});
chart.scale({
type: {
range: [0, 1],
},
value: {
sync: true,
},
});
chart.data(data);
chart.legend(false);
chart.tooltip(false);
const view1 = chart.createView();
view1.data(data1);
view1.axis(false);
view1.coordinate('polar', {
startAngle: (-10 / 8) * Math.PI,
endAngle: (2 / 8) * Math.PI,
innerRadius: 0.9,
radius: 0.75,
});
view1
.interval()
.position('type*value')
.color('#CBCBCB')
.size(4);
const view2 = chart.createView();
view2.data(data1);
view2.axis('type', false);
view2.axis('value', {
line: null,
label: null,
grid: null,
});
view2.coordinate('polar', {
startAngle: (-10 / 8) * Math.PI,
endAngle: (2 / 8) * Math.PI,
innerRadius: 0.95,
radius: 0.55,
});
view2.annotation().arc({
top: false,
start: [0, 50],
end: [49, 1],
style: {
stroke: '#6b6565',
lineWidth: 10,
lineDash: null,
},
});
view2
.interval()
.adjust('stack')
.position('type')
.color('#6b6565')
.size(6)
.animate({
appear: {
animation: 'fade-in'
}
});
const view3 = chart.createView();
view3.data(data2);
view3.axis(false);
view3.coordinate('polar', {
startAngle: (-10 / 8) * Math.PI,
endAngle: (2 / 8) * Math.PI,
innerRadius: 0.8,
radius: 0.8,
});
view3
.interval()
.position('type*value')
.color('type', (val) => {
let index = Math.floor(val / 2.5);
return color[index];
})
.size(4);
view3.annotation().text({
position: ['50%', '60%'],
content: '压力值',
style: {
fill: '#CBCBCB',
fontSize: 20,
textAlign: 'center',
textBaseline: 'middle',
},
});
view3.annotation().text({
position: ['50%', '70%'],
content: `${data[0].value / 50 * 100}%`,
style: {
fill: '#CBCBCB',
fontSize: 24,
textAlign: 'center',
textBaseline: 'middle',
},
});
chart.render();
</script>
</body>
</html>目前已实现的效果图：
UI给的设计图：
问题：
- 如何实现内层两端圆角？
- 如何实现根据值的不同 内层显示不同的颜色？
