利用Echarts和html语言同时画出2个横版条形图和1个扇形图
时间: 2024-03-05 18:53:05 浏览: 15
好的,以下是一个使用 Echarts 和 HTML 语言绘制 2 个横版条形图和 1 个扇形图的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Charts</title>
<!-- 引入 Echarts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 第一个横版条形图 -->
<div id="chart1" style="width: 600px;height: 300px;"></div>
<!-- 第二个横版条形图 -->
<div id="chart2" style="width: 600px;height: 300px;"></div>
<!-- 扇形图 -->
<div id="chart3" style="width: 600px;height: 300px;"></div>
<script>
// 初始化第一个横版条形图
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
title: {
text: 'Chart 1'
},
xAxis: {
type: 'value',
max: 100
},
yAxis: {
type: 'category',
data: ['Category 1', 'Category 2', 'Category 3']
},
series: [{
data: [60, 40, 80],
type: 'bar'
}]
};
chart1.setOption(option1);
// 初始化第二个横版条形图
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
title: {
text: 'Chart 2'
},
xAxis: {
type: 'value',
max: 100
},
yAxis: {
type: 'category',
data: ['Category 1', 'Category 2', 'Category 3']
},
series: [{
data: [30, 70, 50],
type: 'bar'
}]
};
chart2.setOption(option2);
// 初始化扇形图
var chart3 = echarts.init(document.getElementById('chart3'));
var option3 = {
title: {
text: 'Chart 3',
left: 'center'
},
series: [{
name: 'Pie chart',
type: 'pie',
radius: '50%',
data: [
{value: 20, name: 'Sector 1'},
{value: 30, name: 'Sector 2'},
{value: 15, name: 'Sector 3'},
{value: 35, name: 'Sector 4'}
]
}]
};
chart3.setOption(option3);
</script>
</body>
</html>
```
在这个例子中,我们使用了 Echarts 库来绘制图表。我们先在 HTML 中定义了 3 个 `div` 元素,分别用于放置 2 个横版条形图和 1 个扇形图。然后,在 JavaScript 中,我们使用 `echarts.init()` 函数初始化 3 个图表,并使用 `setOption()` 函数设置图表的配置项和数据。
对于横版条形图,我们设置了 `type: 'bar'`,表示使用条形图的形式展示数据。对于扇形图,我们设置了 `type: 'pie'`,表示使用扇形图的形式展示数据。在扇形图的配置中,我们使用了 `radius` 属性来设置扇形的半径,使用 `data` 属性来设置每个扇区的数据,其中 `value` 表示扇区的值,`name` 表示扇区的名称。
希望这个例子能够帮助你学习如何使用 Echarts 和 HTML 语言绘制图表。