2.3 完成一份简单的ECharts作品_ECharts数据可视化：入门、实战与进阶-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

2.3　完成一份简单的ECharts作品

现在，你是否已经迫不及待想制作一幅ECharts可视化图了？如你所愿，我们立刻行动起来！

首先，需要新建一个HTML格式的文件。打开VS Code，依次点击左上角的File→New File，新建一个文件，如图2-12所示。

图2-12　VS Code新建文件

我们将以下代码输入新建的文件中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts文件-->
    <script src="echarts.js">
</script>
</head>
</html>

按CTRL+S快捷键，会弹出“保存”按钮，将文件保存到指定的位置，并将文件命名为“Hello ECharts”，文件格式选择“HTML”。

这里相当于将原本没有格式的文件保存为.html格式的文件，保存后，文件内容得到HTML格式的语法高亮，如图2-13所示。

图2-13　HTML格式的代码显示

之后补全其他内容，最终输入内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--引入echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!--为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        //指定图表的配置项和数据
        var option = {
            title: {
                text: '我的第一幅ECharts可视化图'
            },
            tooltip: {},
            legend: {
                data:['各产品销量情况']
            },
            xAxis: {
                data: ["产品A", "产品B", "产品C", "产品D", "产品E"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200]
            }]
        };

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

保存HTML文件，并将之前由ECharts安装包解压得到的echarts.js文件放在该HTML文件所在的目录下，如图2-14所示。

图2-14　目录中的具体内容

使用浏览器（这里使用的是谷歌浏览器）打开该HTML文件，显示结果如图2-15所示。

图2-15　第一幅ECharts可视化图

至此，我们就完成了第一幅ECharts可视化图。这时你可能会好奇，我们之前绘制图所用的代码是什么含义呢？接下来，让我们一起来解读代码的含义。

首先，整个文档是HTML格式文件，所以使用的是HTML的语法。<!DOCTYPE>声明必须位于HTML5文档中的第一行，也就是位于<html>标签之前，该标签告知浏览器文档所使用的HTML规范。如果你没学过HTML文件语法格式也没关系，HTML文件中有很多标签，且标签都是成对出现，例如在下一行出现的<html>标签，代码的末尾也有一个</html>标签，也就是说<html>和</html>是一对标签，代表HTML文档的开始与结束。

接下来，出现了如下代码块。

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>

我们发现该部分代码块是包含在<head>和</head>标签对中的。<head>标签用于定义文档的头部，它是所有头部元素的容器。文档的头部信息均可以放在该标签对中。例如接下来的<meta charset="utf-8">规定了HTML文档的字符编码，<title>标签为标题标签，定义了标题名称为ECharts，中的代表注释，注释不会被运行，只是为了方便开发者阅读代码。<script src="echarts.js"></script>中的<script>标签的含义是在HTML文件中引入JavaScript文件，这里引入了echarts.js文件。这里引入文件时只有文件名而没有写文件路径的原因是我们已经将该文件放在HTML文件所在的文件夹中了。最后以</head>标签结束。

之后的代码块包含在<body>标签中，<body>标签包含了一个HTML文件的主体部分。

<body>
    <!--为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        //指定图表的配置项和数据
        var option = {
            title: {
                text: '我的第一幅ECharts可视化图'
            },
            tooltip: {},
            legend: {
                data:['各产品销量情况']
            },
            xAxis: {
                data: ["产品A","产品B","产品C","产品D","产品E"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200, 850]
            }]
        };

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

<div>标签定义HTML文档中的分隔（division）或部分（section）。这里是作为一个容器来盛放ECharts的内容，这个容器的宽度为600px，高度为400px。

之后的部分包含在<script></script>标签对中，表示这部分引入了JavaScript，然后是基于准备好的容器来初始化ECharts实例，option中的各种内容是ECharts的配置项，包括常见的绘图数据、绘图标题和绘图类型等，这也是我们今后要学习的重点内容。