ECharts入门与应用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/ZiminLi/article/details/130792291

一、引言

ECharts介绍

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

快速上手

点击此处选择 dist/echarts.js，复制url。
新建一个 index.html 文件

打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.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: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

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

这样一个图表就诞生了！
ECharts

二、获取引入ECharts

通过 npm 安装 ECharts

npm install echarts --save

引入

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

按需引入
上面的代码会引入 ECharts 中所有的图表和组件，如果不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

需要注意的是为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 CanvasRenderer 或者 SVGRenderer 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 CanvasRenderer 模块。

在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。可以直接在项目中使用。
其他方式引入ECharts：点击此处

三、概念

图表容器及大小

初始化

在 HTML 中定义有宽度和高度的父容器（推荐）
通常来说，需要在 HTML 中先定义一个
节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

注意：使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。

指定图表的大小
如果图表容器不存在宽度和高度，或者希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

响应容器大小的变化

监听图表容器的大小并改变图表大小
在有些场景下，希望当容器大小改变时，图表的大小也相应地改变。
监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

为图表设置特定的大小
除了直接调用 resize() 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。

myChart.resize({
  width: 800,
  height: 400
});

容器节点被销毁以及被重建时
假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。
本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。
正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。
注意：在容器节点被销毁时，总是应调用 echartsInstance.dispose 以销毁实例释放资源，避免内存泄漏。

样式

一些方法，可以在 Apache EChartsTM 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。
点击此处查看详情

数据集

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。
点击此处查看详情

数据转换

Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。
抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

把数据分成多份用不同的饼图展现。
进行一些数据统计运算，并展示结果。
用某些数据可视化算法处理数据，并展示结果。
数据排序。
去除或直选择数据项。
…
点击此处查看详情

坐标轴

直角坐标系中的 x/y 轴。
点击此处查看详情

视觉映射

数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。
ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。
此外，ECharts 还提供了 visualMap 组件来提供通用的视觉映射。visualMap 组件中可以使用的视觉元素有：

图形类别（symbol）、图形大小（symbolSize）
颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、
颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）

点击此处查看详情

图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
点击此处查看详情

事件与行为

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件（这里需要注意切换图例开关是不会触发 ‘legendselected’ 事件的），数据区域缩放时触发的 ‘datazoom’ 事件等等。
点击此处查看详情

四、应用

常用图表类型

柱状图

基本柱状图
柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
设置柱状图的方式，是将 series 的 type 设为 ‘bar’。
点击此处查看详情
堆叠柱状图
有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。
点击此处查看详情
动态排序柱状图
动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。
点击此处查看详情
阶梯瀑布图
Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。
点击此处查看详情

折线图

基础折线图
折线图主要用来展示数据项随着时间推移的趋势或变化。
点击此处查看详情
堆叠折线图
与堆叠柱状图类似，堆叠折线图也是用系列的 stack 设置哪些系列堆叠在一起。
点击此处查看详情
区域面积图
区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。
点击此处查看详情
平滑曲线图
平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 smooth 属性设置为 true 即可。
点击此处查看详情
阶梯线图
阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。
点击此处查看详情

饼图

基础饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
点击此处查看详情
圆环图
圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。
点击此处查看详情
南丁格尔图（玫瑰图）
南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。
点击此处查看详情

散点图

基础散点图
散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。
点击此处查看详情

跨平台方案

服务端渲染 ECharts 图表
通常情况下，Apache ECharts 会在浏览器中动态的渲染图表，并且根据用户的交互来更新渲染。但是在下面这些比较特殊的场景，也需要在服务端中渲染图表并且输出到浏览器中：

需要缩短前端的渲染时间，保证第一时间显示图表
需要在 Markdown, PDF 等不支持动态运行脚本的环境中嵌入图表

在这些场景下，ECharts 也提供了两种服务端渲染（server-side rendering，SSR）的方案：SVG 渲染或 Canvas 渲染。

渲染方案	渲染结果的形式	优点
服务端 SVG 渲染	SVG 字符串	比 Canvas 图片体积更小；矢量 SVG 图片不会模糊；支持初始动画
服务端 Canvas 渲染	图片	图片形式适用场景更广泛，对不支持 SVG 的场景可选择

通常情况下，应优先考虑使用服务端 SVG 渲染方案，如果 SVG 不适用，也可以考虑 Canvas 渲染方案。
使用服务端渲染也有一定的局限性，尤其是和交互相关的一些操作无法支持。
点击此处查看详情

数据处理

动态的异步数据
异步数据的加载与动态更新
点击此处查看详情

富文本标签

Apache ECharts 中的文本标签从 v3.7 开始支持富文本模式，能够：

定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。
对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
在文本中使用图片做小图标或者背景。
特定组合以上的规则，可以做出简单表格、分割线等效果。

文本块（Text Block）：文本标签块整体。
文本片段（Text fragment）：文本标签块中的部分文本。
点击此处查看详情

动画

数据过渡动画
基础的过渡动画
Apache ECharts 中使用了平移，缩放，变形等形式的过渡动画让数据的添加更新删除，以及用户的交互变得更加顺滑。通常情况下开发者不需要操心该如何去使用动画，只需要按自己的需求使用setOption更新数据，ECharts 就会找出跟上一次数据之间的区别，然后自动应用最合适的过渡动画。
点击此处查看详情