### 创建带有时间轴的交互式图表
为了实现一个基于HTML、CSS和ECharts的时间轴图表，可以按照以下方法构建：
#### 1. **项目结构**
首先定义项目的文件结构如下：
- `index.html`：主页。
- `style.css`：用于设置整体样式。
- `script.js`：引入并配置ECharts逻辑。
- `echarts.min.js`：ECharts库。
#### 2. **HTML 文件**
以下是HTML的基本框架，它包含了ECharts所需的容器以及必要的脚本加载部分。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>历史人物时间轴</title>
<link rel="stylesheet" href="style.css">
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="timelineChart" style="width: 100%; height: 600px;"></div>
<script src="script.js"></script>
</body>
</html>
```
#### 3. **CSS 样式**
通过CSS美化整个页面布局。这里仅提供基础样式的例子。
```css
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#timelineChart {
margin: auto;
}
```
#### 4. **JavaScript 配置**
在`script.js`中编写ECharts的具体配置代码。此代码实现了时间轴功能，并支持鼠标悬浮查看详细信息的功能。
```javascript
// script.js
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('timelineChart');
var myChart = echarts.init(chartDom);
var option;
const data = [
{ name: '郭守敬', time: '元朝 (1231–1316)', info: '发明简仪和高表' },
{ name: '贾思勰', time: '北魏 (约公元5世纪中期)', info: '著有《齐民要术》' },
{ name: '张衡', time: '东汉 (78年－139年)', info: '发明地动仪' },
{ name: '祖冲之', time: '南北朝时期 (429年—500年)', info: '精确计算圆周率至小数点后七位' },
{ name: '李冰', time: '战国晚期 (公元前256年)', info: '修建都江堰水利工程' },
{ name: '沈括', time: '北宋 (1031年－1095年)', info: '撰写《梦溪笔谈》' },
{ name: '孙武', time: '春秋末期 (前544年－前470年)', info: '兵法家，《孙子兵法》作者' },
{ name: '司马迁', time: '西汉 (前145年或前135年－？)', info: '编撰《史记》' },
{ name: '蔡伦', time: '东汉 (30年－121年)', info: '改进造纸术' },
{ name: '毕昇', time: '北宋 (970年－1051年)', info: '活字印刷术发明者' }
];
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
formatter: function (params) {
let result = '';
params.forEach(param => {
if (param.value !== undefined && param.seriesType === 'effectScatter') {
result += `<strong>${param.name}</strong><br/>`;
result += `${data.find(item => item.name === param.name).info}`;
}
});
return result;
}
},
timeline: {
axisType: 'category',
orient: 'vertical',
left: null,
right: 0,
top: 20,
bottom: 20,
width: 55,
height: null,
inverse: true,
playInterval: 1000,
symbolSize: 10,
label: {
normal: {
textStyle: {
color: '#fff'
}
}
},
lineStyle: {
color: '#a6c8f0'
},
checkpointStyle: {
borderColor: '#7eacf5',
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false
},
data: data.map(d => d.time),
},
baseOption: {
timelineIndex: 0,
backgroundColor: '#fafafa',
title: [{
text: '中国历史名人时间轴',
subtext: '',
left: 'center',
textAlign: 'center'
}],
legend: {
data: ['历史人物'],
left: 'right'
},
grid: {
containLabel: true
},
xAxis: {
type: 'value',
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: [],
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { interval: 0 }
},
series: []
},
options: data.map((item, index) => ({
title: [{ subtext: item.time }],
yAxis: {
data: [item.name].concat(new Array(index).fill(null))
},
series: [{
name: '历史人物',
type: 'effectScatter',
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function (val) {
return val[2] * 4 + 10;
},
data: [[Math.random() * 100 + 20, item.name]],
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
}
}]
}))
};
myChart.setOption(option);
});
```
以上代码片段展示了如何利用ECharts创建具有时间轴效果的图表[^1]。当用户将鼠标悬停于某个数据点时，会弹出提示框显示该名人的具体成就描述。
#### 数据说明
上述JSON对象中的每一项代表一位历史人物的信息，包括姓名(`name`)、所属年代(`time`)以及个人贡献简介(`info`)。
---
###
三峡美景与四季变换
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
