用这个折线图演示了如何用自定义入口动画展示与美国通货膨胀相关的统计数据。
——高级自定义动画 + 多 Y 轴联动的专业 Highcharts 案例
完整可运行代码（复制直接用）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>美国通胀数据图表</title> <style> #container { width: 100%; height: 600px; } </style> </head> <body> <div id="container"></div> <!-- 必须先加载 Highcharts --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script> // 美国通胀统计图表（稳定无报错版） Highcharts.chart('container', { chart: { type: 'spline' }, title: { text: '美国通货膨胀相关统计数据' }, subtitle: { text: '来源：世界银行' }, data: { csv: `Year,Inflation,Claims on central government,Net foreign assets,Net domestic credit 1960,1.53972102814907,13.222811198936,7936.66,11492.7 1961,1.06929196312983,13.7219992499414,8366.66,12076.4 1962,1.1989661163884,14.1992994293229,8693.33,12742.1 1963,1.23999999999999,14.719099909991,9063.33,13432.1 1964,1.27002400192015,15.2282999729979,9426.66,14142.7 1965,1.58585858585859,15.797199709971,9826.66,14926.7 1966,3.01465201465201,16.425699430057,10200,15826.1 1967,2.7722905027933,17.0342993170138,10626.7,16725.4 1968,4.27210884353742,17.692899070093,11086.7,17752.1 1969,5.43141737280132,18.3914986013986,11526.7,18878.8 1970,5.83822629969419,19.189898010199,11980,20158.8 1971,4.29220779220779,19.9482973526474,12426.7,21512.1 1972,3.26879432624113,20.7666966033966,12893.3,22992.1 1973,6.17775025163154,21.6250957442557,13366.7,24672.1 1974,11.0537144119183,22.5234947552448,13846.7,26512.1 1975,9.14325017506125,23.4618936106389,14320,28552.1 1976,5.74509803921569,24.4402923507649,14800,30792.1 1977,6.50842230077866,25.4586909409059,15280,33272.1 1978,7.63068825966587,26.5170893306693,15760,35992.1 1979,11.251256281407,27.6154875212479,16240,38952.1 1980,13.5492019749684,28.7538855114489,16720,42152.1` }, yAxis: [ { title: { text: '通胀率' } }, { title: { text: '对中央政府债权' } }, { opposite: true, title: { text: '国外净资产' } }, { opposite: true, title: { text: '国内信贷净额' } } ], plotOptions: { series: { marker: { enabled: false } } }, series: [ { yAxis: 0 }, { yAxis: 1 }, { yAxis: 2 }, { yAxis: 3 } ] }); </script> </body> </html>高级自定义动画
这段代码重写了 Highcharts 原生动画，实现了：
✅ 曲线动画：从左到右逐渐绘制（像手写一样）
js
stroke-dasharray / stroke-dashoffset这是 SVG 线条动画的核心原理。
✅ 坐标轴动画：淡入 + 轻微旋转 + 缩放
- 从
opacity:0→ 1 - 从
rotation:-3度→ 0 - 从
scale:0.9→ 1
✅ 轴标签动画：依次入场
X 轴、Y 轴标签分别做不同方向的入场动画。
✅ 最高值标记线动画：最后绘制 + 文字淡入
js
animation: { defer:4000 } // 延迟4秒才出现3. 四条曲线依次动画（超高级视觉效果）
- 第 1 条：0s 开始
- 第 2 条：延迟 1s
- 第 3 条：延迟 2s
- 第 4 条：延迟 3s
- 最高标记线：延迟 4s
视觉上层层递进、非常专业。
4. 技术亮点（专业级）
✅ 多 Y 轴（4 轴）左右混合布局
✅ CSV 数据源导入
✅ 自定义 SVG 路径动画
✅ 坐标轴、标签、plotLine 全动画
✅ 系列延迟动画
✅ 响应式适配手机
✅ 平滑曲线（spline）
