用echarts实现用圆圈内部填充颜色显示百分比

### 使用ECharts实现带百分比填充的圆形图表 为了实现带有百分比填充效果的圆形图表，在ECharts中可以利用饼图组件并调整其样式属性。具体来说，通过设置`itemStyle`中的颜色属性为线性渐变，并结合数据项的比例来控制渐变的效果，从而达到视觉上的环形或圆形单元格内按比例着色的目的[^4]。 下面是一个简单的HTML页面结构用于初始化ECharts实例： ```html <div id="main" style="width: 600px;height:400px"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { series: [ { name: 'Access From', type: 'pie', radius: ['50%', '70%'], // 设置内外半径大小形成环状 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, position: 'inside', // 将标签放置在扇区内部 formatter: '{d}%' // 显示百分比形式的数据 }, emphasis: { label: { show: true, fontSize: '20' } }, data:[ {value:335, name:'Direct'}, {value:310, name:'Email'}, {value:234, name:'Union Ads'} ] } ] }; option && myChart.setOption(option); </script> ``` 上述代码片段展示了如何定义一个具有特定样式的环形图（通过指定两个不同的radius值），并通过`label.formatter`参数自定义数据显示格式为百分比[^2]。此外，还设置了`avoidLabelOverlap=false`以防止标签重叠，并给定了边框宽度和颜色等细节优化图表外观[^3]。 对于更复杂的场景，比如想要模拟更加真实的环形渐变效果，则可以通过精心设计`itemStyle.color`下的`colorStops`数组内的偏移量(`offset`)以及对应的颜色值，使得不同部分之间过渡自然流畅[^1]。