要實現echarts環形進度條,可以按照以下步驟操作:
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
div
容器,用于展示echarts圖表:<div id="chart" style="width: 300px; height: 300px;"></div>
echarts.init()
方法初始化一個echarts實例,并將其綁定到指定的div
容器上:var chart = echarts.init(document.getElementById('chart'));
var option = {
series: [
{
type: 'pie',
radius: ['70%', '85%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 50,
itemStyle: {
color: '#F56C6C'
}
},
{
value: 50,
itemStyle: {
color: '#E8EDF3'
}
}
]
}
]
};
setOption()
方法將數據設置到圖表中,并渲染出來:chart.setOption(option);
通過以上步驟,就可以實現一個簡單的echarts環形進度條。根據需求,你可以進一步調整option中的配置項,以實現更多的效果和樣式。