用html编写一个数据展示页面模板,要求有两个独立的折线图,一个折线图展示两组数据,一个折线图展示五组数据
时间: 2024-02-13 14:00:51 浏览: 136
好的,以下是一个简单的示例代码,你可以根据自己的需求进行修改和美化:
```html
<!DOCTYPE html>
<html>
<head>
<title>数据展示页面模板</title>
<!-- 引入 echarts.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
<h1>数据展示页面模板</h1>
<!-- 折线图1展示两组数据 -->
<div id="chart1" style="width: 600px;height:400px;"></div>
<!-- 折线图2展示五组数据 -->
<div id="chart2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 折线图1
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
title: {
text: '折线图1展示两组数据'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}, {
name: '数据2',
data: [620, 732, 701, 734, 1090, 1130, 1120],
type: 'line'
}]
};
chart1.setOption(option1);
// 折线图2
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
title: {
text: '折线图2展示五组数据'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}, {
name: '数据2',
data: [620, 732, 701, 734, 1090, 1130, 1120],
type: 'line'
}, {
name: '数据3',
data: [320, 432, 301, 334, 590, 630, 520],
type: 'line'
}, {
name: '数据4',
data: [420, 532, 401, 534, 790, 830, 720],
type: 'line'
}, {
name: '数据5',
data: [120, 232, 101, 234, 590, 630, 520],
type: 'line'
}]
};
chart2.setOption(option2);
</script>
</body>
</html>
```
以上代码中,我们使用了 echarts.js 库来绘制折线图,其中 `chart1` 展示了两组数据,`chart2` 展示了五组数据。你可以根据自己的需求进行修改数据和样式。
阅读全文