一、前言

  • 本篇文章是『Echarts』文章的第 2 篇，主要介绍『Echarts』基本使用

在『Echarts』第 1 篇文章中，我们介绍了 Echarts 的概述及其强大的数据可视化功能。本篇将继续深入，重点带您了解 Echarts 的基本使用方法，包括如何快速安装、配置以及绘制简单的图表。

二、安装『Echarts』

请首先访问 Echarts 官方网站，网址为：https://echarts.apache.org/zh/index.html。成功打开网页后，您需要在页面左上角找寻 “下载” 选项，点击它即可进入下载页面。

点击后系统会自动跳转至 Echarts 的下载页面。在该页面中，您可以根据需求挑选合适的版本。建议下载最新版 “Echarts 5.4.3”，以确保获得最佳性能和最新功能。之后，点击 “Dist（GitHub）”，即可开始下载所选版本。

首先点击链接，您将被引导至 GitHub 官方网站。在那里，请找到 echarts.js 和 echarts.min.js 这两个重要文件，并分别进行下载。这两个文件构成了 Echarts 核心组件，它们是运行 Echarts 所必需的。

首先，定位并点击您想要下载的文件以进入其详情页面；然后，寻找并点击页面中的 “下载” 按钮；最后，文件便会开始下载并保存至您的本地设备。

echarts.min.js 同理可证，这里就不再赘述了。

我们既可以选择直接使用相关文件，也可以通过 npm 进行安装。需要区分的是，文件分为压缩版和未压缩版两种形式：压缩版体积小，加载快速，适合生产环境使用；而未压缩版体积较大，包含完整的代码结构，便于开发时调试。通常，我们建议在日常开发中使用未压缩版以方便调试，在项目部署时转而使用体积更小的压缩版。在此，我们决定直接使用已下载的文件，并将其复制到项目目录中以便使用：

至此，Echarts 的安装步骤已全部完成。下一阶段，我们将进入 Echarts 的配置过程，并教您如何创建您的第一个图表。请跟随接下来的指导继续操作。

三、使用『Echarts』

在您的项目中集成 Echarts 之前，必须先引入必要的文件。这里我们选用 echarts.js，它囊括了完整的代码构架，便于后续的调试工作。具体步骤如下：在 HTML 文件中插入对 echarts.js 文件的引用，代码示例如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Echarts 基本使用</title>

    <!--

    1.导入 Echarts 插件

    -->

    <script src="js/echarts.js"></script>

</head>

<body>

<script>

</script>

</body>

</html>

成功引入 echarts.js 文件之后，我们便可以着手制作图表。首先，需要在 HTML 文档的 <body> 标签内添加一个 <div> 容器，这个容器将用于展示图表。具体实现代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Echarts基本使用</title>

    <!--

    1.导入Echarts插件

    -->

    <script src="js/echarts.js"></script>

</head>

<body>

<!--

2.为Echarts准备一个容器

这个容器的作用就是将来用来将图标绘制到什么地方

-->

<div style="width: 600px;height: 400px;" id="app"></div>

<script>

</script>

</body>

</html>

在 <div> 标签中，我们设定了容器的宽度为 600 像素，高度为 400 像素。该容器将用来展示图表，因此我们为其指定了一个 id 属性，其值为 “app”。这一 id 属性会在后续代码中使用，所以请确保记住它。

接下来我们需要获取已经准备好的容器，并通过 echarts.init() 方法在该容器中初始化一个 ECharts 实例。具体代码如下：

<script>

    // 省略其它代码

    /*

    4.创建一个Echarts对象

    通过Echarts对象的init方法来创建

    init 方法需要传递一个参数，这个参数就是我们的容器

    将来 echarts 绘制出来的图表就会绘制到 oDiv 这个容器上

    * */

    let myChart = echarts.init(oDiv);

</script>

初始化了 ECharts 实例之后，接下来要做的事情就是对 oDiv 进行配置。具体是什么配置呢？例如，配置您要绘制什么类型的图表，您的图表是否有标题，您的图表包含哪些数据，这些数据在 X 轴上是什么，在 Y 轴上是什么，这些都是需要配置的。那么这个配置是怎么做的呢？我们可以通过 setOption() 方法来进行配置。首先定义一个对象，然后只需要在这个对象中设置配置项即可。

首先暂缓介绍配置部分，后续将继续深入。现在，我将代码示例贴出，对于配置对象中的各项属性，暂时不做详细说明。

<script>

    /*

    3.拿到准备好的容器

    * */

    let oDiv = document.querySelector('div');

    /*

    4.创建一个Echarts对象

    通过Echarts对象的init方法来创建

    init 方法需要传递一个参数，这个参数就是我们的容器

    将来 echarts 绘制出来的图表就会绘制到 oDiv 这个容器上

    * */

    let myChart = echarts.init(oDiv);

+    let option = {

+

+    }

+

+    // 将配置传递给Echarts对象

+    myChart.setOption(option);

</script>

经过上述代码编写，以后若想进行图表绘制，其实存在几个固定步骤，具体包括：导入 ECharts，为 ECharts 创建一个容器，获取已准备好的容器，创建一个 ECharts 实例，为 ECharts 实例撰写配置项，将配置项传递给 ECharts。在这些步骤中，唯一的不同在于撰写 ECharts 实例的配置项。

鉴于我们要用 ECharts 展示的数据多样性，以及图表类型的多变性，使用 ECharts 时的核心学习重点就是其配置选项。掌握好配置，即可灵活运用 ECharts 进行数据可视化展示。

四、配置『Echarts』

关于 ECharts 的配置，不免要先参考官方文档。在官方网站左上角可以找到 “文档” 选项；在该选项中有 “使用手册”，点击即可进入查阅。

向下滑动即可查看官方提供的一些配置选项，我没有过多考虑便直接复制到代码中，以便先行观察效果。

通过浏览器访问 index.html，即可查看展示效果：

发现屏幕上显示了一个柱状图，如果需要更换其他类型的图表，可以简单地修改配置对象中的 series 属性。例如，将 series 属性中的某个元素的 type 属性值改为 "line"，就能将柱状图变更为折线图。

let option = {

    title: {

        text: 'ECharts 入门示例'

    },

    legend: {

        data: ['销量']

    },

    xAxis: {

        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    },

    yAxis: {},

    series: [

        {

            name: '销量',

-            type: 'bar',

+            type: 'line',

            data: [5, 20, 36, 10, 10, 20]

        }

    ]

}

通过浏览器访问 index.html，即可查看展示效果：

至此，我们结束了对 ECharts 的使用探索。下面，我们将详细审视配置对象中的各项内容。

五、配置项详解

1. title

设置图表的标题

首先让我们关注图表左上角的标题，它显示为 “ECharts 入门示例”。这个标题是如何设置的呢？实际上，在配置对象中有一个 title 属性，它包含一个对象。在这个对象里，有一个名为 text 的属性，其值正是标题所展示的内容。通过更改 text 属性的值，我们便能轻松修改标题文本。

2. legend

设置图表的图例

这个 legend 有什么作用呢，这个 legend 其实是叫图例，图例的作用是什么呢？它在图表中起到关键的说明作用，位于图表顶部，通过对符号、色块或线型的标注，帮助我们更好地理解图表内容。

图例的功能是点击后可以控制图表的显示与隐藏。一个图表中可以包含多个图例。现在，我将对代码进行改造，这部分工作的具体含义暂时不做讨论。

let option = {

    title: {

        text: 'ECharts 入门示例'

    },

    legend: {

-        data: ['销量']

+        data: ['销量', '产量']

    },

    xAxis: {

        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    },

    yAxis: {},

    series: [

        {

            name: '销量',

            type: 'bar',

            data: [5, 20, 36, 10, 10, 20]

        },

+        {

+            name: '产量',

+            type: 'bar',

+            data: [50, 120, 130, 60, 40, 80]

+        }

    ]

}

代码编写已完成，现在让我们查看一下效果。通过浏览器打开 index.html 文件，即可预览展示的效果：

图表目前展示两根柱状，代表不同的销量与产量，且颜色区分。图例中默认展示销量和产量。若需单独查看产量，只需点击图例中的 “销量” 即可隐藏销量柱状；反之，想单独观察销量时，点击 “产量” 隐藏产量柱状即可。

3. xAxis

设置图表 X 轴上显示的数据

4. yAxis

设置图表 Y 轴上显示的数据

在我们的代码中，如果没有明确设置 Y 轴的数据，系统会自动根据提供的数据集来计算并填充 Y 轴上显示的数据。

5. series

设置图表的数据

该属性接受一个对象数组，数组中的每个对象代表一类数据。在您提供的代码示例中，数组包含两个对象，意味着有两类数据。因此，页面上显示的柱状图由这两类数据绘制而成，并用不同颜色加以区分。另外，我们还需要深入理解数组中各对象的属性及其含义。

  • name

用来配置当前数据项的名称与图表图例设置中的名称完全相同，以便图例可以正确地控制对应的数据显示。

  • type

配置绘制数据时需指定图表类型：若设定为 bar，则表示创建柱状图；若为 line，则表示生成折线图。

  • data

配置数据值由一个数组定义，也就是对应的数据简单的来说，其中每个元素对应一个数据点。举例来说，data: [5, 20, 36, 10, 10, 20] 表示有六个数据点，其数值依次为 5、20、36、10、10 和 20。

六、总结

通过本文的学习，您将能够掌握以下核心知识点：

  • 1.ECharts 的安装过程；
  • 2.ECharts 的基本使用方法
  • 3.对 ECharts 进行个性化配置的技巧
  • 4.对 ECharts 配置项的深入解析
  • 如果您认为本文有价值，并且对您有所裨益，不妨点赞、收藏或转发分享。您的每一个支持都是我创作的不竭动力，让我们共同分享知识的喜悦！

『Echarts』基本使用的更多相关文章

  1. 『AngularJS』$location 服务

    项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...

  2. [原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...

  3. JS 中通过对象关联实现『继承』

    JS 中继承其实是种委托,而不是传统面向对象中的复制父类到子类,只是通过原型链将要做的事委托给父类. 下面介绍通过对象关联来实现『继承』的方法: Foo = { // 需要提供一个 init 方法来初 ...

  4. 『摄影欣赏』16幅 Romantic 风格照片欣赏【组图】

    今天,我们将继续分享人类情感的系列文章.爱是人类最重要的感觉,也可能是各种形式的艺术(电影,音乐,书,画等)最常表达的主题 .这里有40个最美丽的爱的照片,将激励和给你一个全新的视觉角度为这种情绪.我 ...

  5. 『开源』Slithice 2013 服务器集群 设计和源码

    相关介绍文章: <『设计』Slithice 分布式架构设计-支持一体式开发,分布式发布> <『集群』001 Slithice 服务器集群 概述> <『集群』002 Sli ...

  6. 『片段』OracleHelper (支持 多条SQL语句)

    C# 调用 Oracle 是如此尴尬 >System.Data.OracleClient.dll —— .Net 自带的 已经 过时作废. >要链接 Oracle 服务器,必须在 本机安装 ...

  7. 『设计』Laura.Compute 设计思路

    前言: 前一篇文章 <『开源』也顺手写一个 科学计算器:重磅开源> ,继 Laura.Compute 算法开源之后,有 博客园 园友 希望公开一下 Laura.Compute算法 的 设计 ...

  8. 『设计』Slithice 分布式架构设计-支持一体式开发，分布式发布

    项目原因: 参与过各种 分布式项目,有 Socket,Remoting,WCF,当然还有最常用的可以跨平台的 WebService. 分布式编码的时间浪费: 但是,无一例外的,开发分布式程序的开发遵循 ...

  9. 转：『代码』JS封装 Ajax级联下拉列表

    在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...

  10. [C#]『CountdownEvent』任务并行库使用小计

    System.Threading.CountdownEvent  是一个同步基元,它在收到一定次数的信号之后,将会解除对其等待线程的锁定. CountdownEvent  专门用于以下情况:您必须使用 ...

随机推荐

  1. 文盘Rust -- r2d2 实现redis连接池

    作者:贾世闻 我们在开发应用后端系统的时候经常要和各种数据库.缓存等资源打交道.这一期,我们聊聊如何访问redis 并将资源池化. 在一个应用后端程序访问redis主要要做的工作有两个,单例和池化. ...

  2. 当你对 redis 说你中意的女孩是 Mia

    作者:京东科技 周新智 一.Redis 众所周知,Redis = Remote Dictionary Server,即远程字典服务. 是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久 ...

  3. Ant Design Vue表单验证失败

    表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: '001', da ...

  4. 【解决了一个小问题】在某个linux基础镜像中安装python特定的版本

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 在某个基础镜像中,安装了python3.6.但是一个测试需 ...

  5. 【译】命名变得简单：AI 支持的重命名建议

    您是否曾经为命名一个变量.方法或类而挣扎过?找到表达性和简洁性之间的完美平衡了吗?您并不孤单.我们通过 GitHub Copilot Chat 扩展(需要订阅)在最新的 Visual Studio 预 ...

  6. 如何在Visual Studio新C++项目中调用之前配置过的库？

      本文介绍在Visual Studio软件中调用C++各种配置.编译完毕的第三方库的方法.   在撰写C++代码时,如果需要用到他人撰写的第三方库(例如地理数据处理库GDAL.矩阵运算库Armadi ...

  7. 2024-01-31：用go语言，机器人正在玩一个古老的基于DOS的游戏， 游戏中有N+1座建筑，从0到N编号，从左到右排列， 编号为0的建筑高度为0个单位，编号为i的建筑的高度为H(i)个单位， 起

    2024-01-31:用go语言,机器人正在玩一个古老的基于DOS的游戏, 游戏中有N+1座建筑,从0到N编号,从左到右排列, 编号为0的建筑高度为0个单位,编号为i的建筑的高度为H(i)个单位, 起 ...

  8. 201871010111-刘佳华 实验二 个人项目—《D[01]背包问题》项目报告

    实验二 软件工程个人项目 ========== 时间:2021-3-18 项目 内容 课程班级博客链接 课程链接 这个作业要求链接 作业要求 我的课程学习目标 1.了解软件工程过程中个人项目的开发流程 ...

  9. Linux-使用cat查看文件后出现乱码，整个终端显示包括shell提示符都是乱码

    问题描述:在bash下用cat显示二进制文件后会出现乱码,整个终端显示包括shell提示符都是乱码,这个跟语言环境无关. 解决办法: 恢复的话,大致有以下几种方法:方法一:盲打输入echo -e '\ ...

  10. 初次尝试GPU Driver —— 大范围植被渲染之着色

    初次尝试GPU Driver -- 大范围植被渲染之着色 在<初次尝试GPU Driven -- 大范围植被渲染>中实现了草地分布,本文实现草的着色. 本文分四个部分: 生成网格 随机调整 ...