<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts水球图图表展示数据占比和目标完成情况</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="waterball-chart" style="width: 400px; height: 400px;"></div>
<script>
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('waterball-chart'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'liquidFill',
data: [0.6], // 数据占比，范围为[0,1]
shape: 'circle',
outline: {
show: false
},
backgroundStyle: {
color: '#FFA500'
},
label: {
show: true,
position: ['50%', '50%'],
formatter: function(value) {
return Math.round(value * 100) + '%'; // 格式化显示百分比
},
fontSize: 32,
fontWeight: 'bold'
},
itemStyle: {
color: '#FF4500'
},
emphasis: {
itemStyle: {
color: '#FF0000'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
