基于Echarts的html语言画出两个横版条形图和一个扇形图
时间: 2024-03-05 07:50:30 浏览: 22
好的,以下是一个基于 Echarts 的 HTML 代码示例,展示了如何绘制两个横向条形图和一个扇形图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts Demo</title>
<!-- 引入 Echarts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个容器,用于展示图表 -->
<div id="chart-container" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 Echarts 实例
var myChart = echarts.init(document.getElementById('chart-container'));
// 配置第一个横向条形图
var option1 = {
title: {
text: '条形图1'
},
tooltip: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [{
name: '数值',
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
};
// 配置第二个横向条形图
var option2 = {
title: {
text: '条形图2'
},
tooltip: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['F', 'G', 'H', 'I', 'J']
},
series: [{
name: '数值',
type: 'bar',
data: [30, 40, 50, 60, 70]
}]
};
// 配置扇形图
var option3 = {
title: {
text: '扇形图'
},
tooltip: {},
series: [{
name: '数值',
type: 'pie',
data: [
{value: 10, name: 'A'},
{value: 20, name: 'B'},
{value: 30, name: 'C'},
{value: 40, name: 'D'},
{value: 50, name: 'E'}
]
}]
};
// 使用 setOption 方法分别为三个图表设置配置项
myChart.setOption(option1);
myChart.setOption(option2);
myChart.setOption(option3);
</script>
</body>
</html>
```
这个示例中,我们首先定义了一个容器 `chart-container` 用于展示图表,然后在 JavaScript 中初始化了一个 Echarts 实例 `myChart`。接着,我们分别配置了两个横向条形图和一个扇形图的配置项 `option1`、`option2` 和 `option3`,最后使用 `setOption` 方法分别为三个图表设置配置项,从而绘制出对应的图表。
这个示例只是一个基础示例,你可以根据自己的需求修改配置项来绘制更加复杂的图表。