echarts进度条带方块
时间: 2024-07-16 15:01:29 浏览: 69
ECharts是一个强大的JavaScript图表库,它支持创建各种复杂的可视化图表,包括进度条带状图(Progress Bar)。在ECharts中,你可以通过配置`echarts.setOption()`函数来创建一个带方块的进度条。首先,你需要引入ECharts库并初始化一个图表实例,然后设置如下的选项:
```javascript
var option = {
xAxis: { // 坐标轴
type: 'category',
data: ['任务A', '任务B', '任务C'] // 类别数据
},
yAxis: { // 值轴
type: 'value'
},
series: [ // 系列,包含进度条信息
{
name: '进度', // 图例名称
type: 'bar', // 使用柱状图表示
data: [50, 75, 90], // 每个任务的完成百分比
itemStyle: { // 样式设置
normal: { // 正常状态
color: 'blue', // 颜色
barBorderRadius: [5, 5, 0, 0] // 方块边角圆润
}
}
}
]
};
// 初始化图表
var chart = echarts.init(document.getElementById('container'));
chart.setOption(option);
```
在这个例子中,每个方块代表任务的完成进度,颜色是蓝色,边角有轻微的圆润效果。你可以调整`data`数组来显示不同任务的进度。
阅读全文