在网页中，我们经常会看到各种各样的图表，如气温变化图、商品销量统计图等。这些图表都是由Web前端开发人员来开发完成的，他们会从专业机构或网站后端服务器的API接口中调取数据，然后以图形的方式呈现出来。
2020年以来，新冠肺炎疫情已经成为了全世界共同关注的焦点。为了方便用户及时了解最新的疫情信息，许多网站都制作了疫情的相关图表，让我们看到疫情的走势信息。
对于一个Web前端的初学者来说，要完全靠自己实现这样一个复杂的图表，其实是很困难的。
实际上，许多网站的图表也不是完全从零开始开发的，而是基于各种图表库来开发的，如ECharts、Highcharts等。使用这些图表库可以快速帮我们生成整个图表，而我们只需要给它传入一些基本的配置参数和数据就可以了。
ECharts 是一个使用JavaScript实现的开源可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
本文就给大家介绍一下，如何通过ECharts制作一个温度折线图，效果如下。
01.引入ECharts并创建对象
首先引入ECharts的JavaScript文件，然后为ECharts准备一个DOM容器，最后绘制空的折线图表。示例代码如下。
在上述代码中，第7行创建了一个ECharts对象myChart，通过它我们可以绘制图表。echarts对象有个setOption()方法，可以用来设置图表的标题、图例以及坐标轴等一些选项。
下面为大家列举一下setOption()方法的一些常用选项：
title：标题组件，包含主标题和副标题；
color：调色盘颜色列表；
legend：图例组件，用于展现不同series系列的标记、颜色和名字；
tooltip：提示框组件；
xAxis：设置直角坐标系grid中的X轴相关配置；
yAxis：设置直角坐标系grid中的Y轴相关配置；
series：设置图表的系列列表，每个系列通过type决定自己的图表类型；
02.配置图表选项
我们在上一段代码的第10行的位置添加一些选项，从而让图表呈现出温度折线图的效果，具体代码如下。
完成上述代码后，绘制出来的图表的效果如下所示。
在上图中，“整点温度实况”是图表的标题，它的右侧是图表使用的图例。X轴用于表示小时，Y轴用于表示温度（单位：℃），且Y轴刻度按照设置的刻度最大值和最小值自动均分显示。
当鼠标滑到图表上时，图表中会出现一条跟随鼠标指针上下移动的虚线，并提示当前位置的温度。图中鼠标指针所在的温度是17.64℃。
03.为图表添加数据
在上一步中，我们完成了图表的基本展示效果，但是图表中还没有数据。接下来我们为图表传入数据，从而让图表把数据以折线图的形式展示出来。
我们在原有代码的最下方新增一些代码，使用data对象保存一些数据，然后把这些数据通过myChart.setOption({})设置给图表。
上述代码中，第2行代码用于保存一天中的时间（小时），第3行代码用于保存对应时间的温度。
完成上述代码后，使用浏览器刷新一下页面，图表的显示效果如下所示。
到这里我们就把图表制作完成了。我们来总结一下，ECharts可视化图表在使用时一共分为3步：第1步是引入ECharts的JavaScript文件，并为图表提供存放的容器，然后根据容器创建ECharts的实例对象；第2步是为实例对象设置配置项；第3步是为图表添加数据。