【ECharts】1.认识ECharts

发表于 更新于 分类于 ，

ECharts是一个底层依赖于ZRender矢量图形库的JavaScript，可以用于快速构建矢量图形库。 ## 什么是 ECharts

在没有 ECharts 的年代，公司的图表业务都是用 flash 去实现的，当时的前端工程师并不负责这一块，而是由专门的图标工程师来完成。这就造成了大量的沟通成本，因为在数据接口设计上，前端工程师需要和做图表的同事进行沟通。

在这样的背景下，百度团队在 2012年8月立项，开发了一款数据可视化工具，所以 ECharts 最初诞生是为了满足公司的各种业务报表需求。

在 2013 年 6 月，ECharts 发布了 1.0 版本随着不断地迭代更新，截止本实验发布（2021 年 12 月）为止，ECharts 的最新版本是 5.2.0。

:::: demo-wrapper no-padding 20250303204659 ::::

ECharts 提供了常规的==折线图、柱状图、散点图、饼图==等，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个 renderItem 函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

在官网上还为大家提供了许多不同类型的可视化图表以及炫酷的数据可视化示例。

最有益于大家的地方是它提供了简单的操作、直观的结构、内置的数据源。你能够轻松的找到你想要的图表然后修改它，以此做出一个成品。

::: demo-wrapper no-padding 20250303205211 :::

简直是==炫酷==有没有。

总之，ECharts 好处多多，主要有以下六种特性：

丰富的图表类型。 专业的数据分析。 健康的开源社区。 强劲的渲染引擎。 优雅的可视化设计。 友好的无障碍访问。

获取 ECharts 的方式

学到这个阶段了，想要回答这个问题我是这个表情： ::: center 20250303205344 :::

官方文档提供了多种方式。

  • 从 GitHub 获取
  • 从 npm 获取
  • 从 CDN 获取
  • 在线定制

本笔记主要贴合蓝桥杯比赛方式，使用CDN来讲解。

从 CDN 获取

可以从以下免费 CDN 中获取和引用 ECharts。

使用方法

::::steps 1. 完成后创建一个index.html文件，在文件中写入： ::: code-tabs @tab index.html 

1
2
3
4
<body>
  <!-- 为 ECharts 准备一个宽为 600px，高为 400px 的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
:::

这一步为图表准备了容器。 2. 在index.html文件中： ::: code-tabs @tab index.html

:collapsed-lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <title>ECharts 快速上手</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #main {
      margin: 20px;
      background-color: rgb(228, 255, 192);
    }
  </style>
  <body>
    <!-- 为 ECharts 准备一个宽为 600px，高为 400px 的 DOM -->
    <div id="main" style="width:600px;height:400px;"></div>
  </body>

  <script>
    var chartDom = document.getElementById("main");
    // 初始化实例对象 echarts.init(dom) 容器;
    var myChart = echarts.init(chartDom);
    // 指定配置项和数据
    var option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    // 将配置项设置给 echarts 实例对象。
    myChart.setOption(option);
  </script>
</html>
::: ::::

打开LiveServer可以看到效果。