<!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>