首页写一个echarts横向进度条

写一个echarts横向进度条

时间: 2023-10-19 12:09:08 浏览: 93

以下是一个使用 ECharts 实现横向进度条的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 横向进度条示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> </head> <body>  <div id="progress" style="width: 500px; height: 50px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('progress')); // 配置项 var option = { // 横向进度条 xAxis: { type: 'value', max: 100, // 进度条最大值 axisLine: { show: false }, // 隐藏坐标轴线 axisTick: { show: false }, // 隐藏刻度线 axisLabel: { show: false }, // 隐藏刻度标签 splitLine: { show: false }, // 隐藏分隔线 splitArea: { show: false } // 隐藏分隔区域 }, yAxis: { type: 'category', axisLine: { show: false }, // 隐藏坐标轴线 axisTick: { show: false }, // 隐藏刻度线 axisLabel: { show: false }, // 隐藏刻度标签 data: ['进度'] // 数据 }, series: [ { type: 'bar', itemStyle: { color: '#1e90ff' // 进度条颜色 }, barWidth: 30, // 进度条宽度 barMaxWidth: 30, // 进度条最大宽度 barMinHeight: 20, // 进度条最小高度 label: { show: true, // 显示数据标签 position: 'right', // 数据标签位置 formatter: '{c}%' }, data: [70] // 进度条数据 } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 该示例中，我们使用 ECharts 绘制了一个横向进度条，进度条的进度为 70%。你可以根据需要修改配置项和数据来实现不同的进度条效果。

阅读全文