如何用Echarts实现多X轴展示长尾词七天天气预报效果？

本文共计1104个文字，预计阅读时间需要5分钟。

目录 + UI设计图 + Echarts示例效果 + 前言 + 示例代码 + 最终效果 + UI设计图 + Echarts示例效果 + 前言 + 对UI给出的设计图，各网站均有类似效果，实现方式大致分为两种：+ 网格布局 + 图表框架绘制

目录

• UI设计图
• Echarts示例效果
• 前言
• 示例代码
• 最终效果

UI设计图

Echarts示例效果

前言

对于UI给出的设计图，各个气象网站都有类似的效果，实现方式大可归为两种：

1. 网格布局+图表框架绘制温度曲线；
2. 网格布局+canvas自绘温度曲线；

这两种实现方式的共同点都是将曲线和上面的描述文字拆分开来，这样做难点是要实现日期图标部分和气温曲线部分的自适应对齐。因为我CSS经验相对比较薄弱，并且使用Echarts图表框架相对较多，所以决定尝试使用Echarts（版本：4.6.0）来实现上面的效果。