效果图如下：
代码：
import { Chart } from '@antv/g2'
// 先把依赖包引入 如果没有@antv/g2的依赖 直接 yarn add @antv/g2 下载依赖 再引入
js代码
// 定义的图表数据 可以从接口获取 然后自己转成需要的格式
const primaryChartData1 = [
{
name: '未答人数',
count: 2,
},
{
name: '已答人数',
count: 1,
},
]
const randerChart1 = () => {
const tempNode = document.getElementById('chartData1')
const child = tempNode?.lastElementChild
if (child) {
// 这里我做了一个判断 防止饼图重复渲染 但是直接操作了dom
// 如果有更好的方法 可以换掉
tempNode.removeChild(child)
}
const data = primaryChartData1
// Step 1: 创建 Chart 对象
const chart = new Chart({
container: 'chartData1', // 指定图表容器 ID
width: 450, // 指定图表宽度
height: 300 // 指定图表高度
})
// Step 2: 载入数据源
chart.data(data)
chart.coordinate('theta', {
radius: 0.7
})
chart.scale('count', {
formatter: (val) => {
val = val * 100 + '%'
return val
},
})
chart.tooltip({
showTitle: false,
showMarkers: false,
})
chart.axis(false) // 关闭坐标轴
chart.legend({
position: 'right', // legend位置
offsetX: -10
})
const interval = chart
.interval()
.adjust('stack')
.position('count')
.color('name', ['#1890FF', '#FAB242'])
.label('name', (val) => {
return {
content: (obj) => {
return obj.name + ':' + obj.count
},
offset: 20, // 这个是指示器那条细线的长度 可以随意设置offset小写 大写失效
}
})
.tooltip('name*count', (name, count) => {
return {
name: name,
value: count,
}
})
.style({
lineWidth: 1,
stroke: '#fff',
})
chart.render()
}
html代码
<div id="chartData1"></div>
