用htm和echarts实现一个柱状图数据展示模板,有五组不相关的数据,要求点击可以实现不同组数据的切换,且每次显示仅显示一组数据
时间: 2024-02-13 16:05:57 浏览: 9
可以通过以下步骤实现:
1. 在HTML中定义一个div容器用于显示echarts图表。
2. 引入echarts.js文件。
3. 在JS中定义五组不相关的数据。
4. 定义一个函数用于根据数据索引值获取对应的option对象。
5. 在JS中根据定义的option对象初始化echarts图表。
6. 监听点击事件,在事件处理函数中获取数据索引值并根据索引值获取对应的option对象并重新渲染echarts图表。
以下是示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echarts柱状图数据展示模板</title>
<!-- 引入echarts.js文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个div容器用于显示echarts图表 -->
<div id="chart_container" style="width: 600px; height: 400px;"></div>
</body>
</html>
```
JS代码:
```javascript
// 定义五组不相关的数据
var data1 = [5, 20, 36, 10, 10];
var data2 = [15, 10, 26, 20, 30];
var data3 = [10, 25, 16, 30, 20];
var data4 = [20, 15, 30, 25, 10];
var data5 = [15, 20, 10, 5, 25];
// 定义获取option对象的函数
function getOption(index) {
return {
// 图表标题
title: {
text: '数据' + (index + 1)
},
// x轴数据
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
// y轴数据
yAxis: {
type: 'value'
},
// 数据
series: [
{
name: '数据' + (index + 1),
type: 'bar',
data: eval('data' + (index + 1))
}
]
};
}
// 初始化echarts对象
var myChart = echarts.init(document.getElementById('chart_container'));
// 监听点击事件
myChart.on('click', function(params) {
// 获取数据索引值
var index = parseInt(params.seriesName.slice(-1)) - 1;
// 获取对应的option对象并渲染echarts图表
myChart.setOption(getOption(index));
});
// 初始化echarts图表
myChart.setOption(getOption(0));
```
以上代码实现了一个简单的echarts柱状图数据展示模板,可以根据点击事件实现不同组数据的切换,且每次显示仅显示一组数据。