echarts 写一个任务完成率和排名图表
时间: 2024-02-28 07:52:11 浏览: 24
好的,以下是一个简单的 echarts 任务完成率和排名图表的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts 任务完成率和排名图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义两个容器 -->
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 初始化 echarts 实例
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// 配置项数据
var option1 = {
title: {
text: '任务完成率',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['任务完成率']
},
xAxis: {
type: 'category',
data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {},
series: [{
name: '任务完成率',
type: 'bar',
data: [80, 60, 75, 90, 70, 85]
}]
};
var option2 = {
title: {
text: '任务排名',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {},
series: [{
type: 'bar',
data: [6, 4, 5, 1, 3, 2]
}]
};
// 使用刚定义的配置项和数据显示图表
chart1.setOption(option1);
chart2.setOption(option2);
</script>
</body>
</html>
```
这是一个简单的 echarts 任务完成率和排名图表,你可以通过修改 `option1.series.data` 和 `option2.series.data` 来更改数据。