ECharts实训案例（3）

目录

​编辑气候温度与降水量、蒸发量的关系分析

3.实现思路及步骤

(1)在VS Code中创建LineBarMashUp.html文件。

(2)绘制折线图与柱状图混搭图表。

配置项

降水量数据系列

 蒸发量数据系列

 温度折线数据列

完整代码

---

气候温度与降水量、蒸发量的关系分析

1.训练要点
掌握 ECharts混搭图表的绘制。
2.需求说明
基于“气候温度与降水量蒸发量.xlsx”数据，绘制折线图与柱状图混搭图表，分析气候温度与降水量、蒸发量的关系。

3.实现思路及步骤

(1)在VS Code中创建LineBarMashUp.html文件。

(2)绘制折线图与柱状图混搭图表。

首先，在LineBarMashUp.html文件中引入 echarts.js 库文件。

其次，准备一个具备大小(weight与height)的 div容器，并使用init0方法初始化容器。

16进制色卡

设置折线图和柱状图的配置项、“温度”“降水量”与“蒸发量”数据完成混搭图表的绘制。

设置背景颜色

backgroundColor: '#c0ebd7',