light-chart
Version:
Charts for mobile visualization.
65 lines (64 loc) • 1.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>环图</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode" style="position: relative;">
</canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ x: '1', y: 85 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
y: {
max: 100,
min: 0
}
});
chart.axis(false);
chart.coord('polar', {
transposed: true,
innerRadius: 0.8
});
chart.guide().arc({
start: [ 0, 0 ],
end: [ 1, 99.98 ],
top: false,
style: {
lineWidth: 20,
stroke: '#ccc'
}
});
chart.guide().text({
position: [ '50%', '50%' ],
content: '85%',
style: {
fontSize: 45,
fill: '#1890FF'
}
})
chart.interval()
.position('x*y')
.size(20)
.animate({
appear: {
duration: 1500
}
});
chart.render();
</script>
</body>
</html>