首页echarts横向进度条

echarts横向进度条

时间: 2023-08-30 07:05:25 浏览: 155

你可以使用 ECharts 中的 "progress" 组件来创建横向进度条。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 横向进度条示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body>  <div id="progress" style="width: 600px; height: 50px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('progress')); // 配置项 var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { show: true, feature: { mark: {show: true}, restore: {show: true}, saveAsImage: {show: true} } }, series: [ { name: '进度', type: 'gauge', detail: {formatter: '{value}%'}, data: [{value: 50, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 这个示例中创建了一个宽度为 600px，高度为 50px 的 DIV 容器，并使用 "gauge" 类型的 series 来显示进度条。使用 "data" 属性来指定当前进度值（50%），使用 "detail" 属性来显示进度值的具体数值。你可以根据需要修改这些属性来自定义进度条的样式和行为。

阅读全文