首页echarts半圆环进度条代码

echarts半圆环进度条代码

时间: 2024-08-01 09:00:43 浏览: 146

ECharts是一个强大的数据可视化库，如果你想创建一个半圆环进度条效果，你可以使用它的饼图（pie）并稍微调整样式来模拟。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 400px;height:400px;"></div> <script type="text/javascript"> var option = { tooltip : {}, legend: { data:['进度'] }, series: [ { name: '进度', type: 'pie', // 使用饼图 radius: '70%', // 半径设置为容器的一半，使得图形呈现为半个圆环 center: ['50%', '50%'], // 圆心位于图表中心 itemStyle: { normal: { // 正常状态 color: '#fff', // 设置颜色为白色 borderWidth: 2, // 边框宽度 borderColor: 'rgba(0,0,0,0)', // 边框透明 shadowBlur: 10, // 阴影模糊度 shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.5)' }, emphasis: { // 高亮状态 shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.8)' } }, data:[ {value: 60, name: '已完成'}, {value: 40, name: '待完成'} // 根据实际进度替换值 ] } ] }; var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); </script> </body> </html> ```

阅读全文