Skip to content

前言

本文对Echart的使用进行一个个人总结,有一个整体的概念,记录一些常用的点,避免每次使用时都重新翻阅官方文档。

更详细的内容请查阅官方文档:https://echarts.apache.org/

画板

<font style="color:#1890FF;">Echarts</font>是一个<font style="color:#1890FF;">JavaScript</font>

  1. 引入<font style="color:#1890FF;">Echarts</font>,通过script直接引入或Npm引入
  2. 初始化Echarts实例:调用<font style="color:#1890FF;">echarts.init()</font>方法,指定dom可以通过<font style="color:#1890FF;">document.getElementById()</font>,vue项目也可以通过<font style="color:#1890FF;">this.$refs()</font>
  3. 配置图表的配置项和数据
  4. 通过<font style="color:#1890FF;">setOption()</font>将配置项和数据传输给echart实例
html
!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <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: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

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

核心概念

图表容器

数据集dataset

https://echarts.apache.org/handbook/zh/concepts/dataset/

Echart4.x 版本后新增数据集(dataset),是专门用来管理数据的组件。在之前的版本,数据分散在xAxis,yAxis,series中,使用数据集(dataset)来管理数据,可以将数据和其他图表配置分离开来。

Echarts官方推荐使用数据集(dataset),使用数据集有以下优点

个人理解使用数据集的数据可视化方式可以更多的理解为从关系型数据库表的这种数据结构(二维图表)出发,将数据形成图表。

而不是从绘制图的角度(声明X/Y轴的数据)的思维方式。

下边是一个简单的示例:

javascript
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
    // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
    // 如果不指定 dimensions,也可以通过指定 series.encode
    // 完成映射,参见后文。
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

// 也可以使用二维数组
/** 
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴,数值轴。
  yAxis: {},
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
*/

几个概念

  1. 维度(dimension);

维度可以理解为二维图表中的表头,描述这一列(行)数据。

2. 数据到图形的映射(series.encode)

series.encode 声明的基本结构如下:其中冒号左边是坐标系、标签等特定名称,如 'x', 'y', 'tooltip' 等,冒号右边是数据中的维度名string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。

  1. 颜色通道映射(visualMap):

支持dataset的图表

目前并非所有图表都支持 dataset。支持 dataset 的图表有: 。 后续会有更多的图表进行支持。

数据转换

Apache EChartsTM 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(dataset)和一个“转换方法”(transform),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。

详细内容查阅:https://echarts.apache.org/handbook/zh/concepts/data-transform

坐标轴

直角坐标系的x/y轴,在echart中由轴线刻度刻度标签轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据

在Echats中,设置坐标轴的配置项如下:

数据视觉映射visualMap

个人理解:

visualMap组件是Echarts高级特性,在每种图表本身内置了默认的数据视觉映射,我们直接就可以,但需要做一些特殊的图表时,可以使用visualMap组件

数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。

此外,ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visualMap 组件中可以使用的视觉元素有:

  • 图形类别(symbol)图形大小(symbolSize)
  • 颜色(color)透明度(opacity)颜色透明度(colorAlpha)
  • 颜色明暗度(colorLightness)颜色饱和度(colorSaturation)色调(colorHue)

图例legend

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

事件与行为

在 ECharts 中事件分为两种类型,

  • 一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,
  • 还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 'legendselectchanged' 事件(这里需要注意切换图例开关是不会触发 事件的),数据区域缩放时触发的 'datazoom' 事件等等。

ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。

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

配置项分类

画板

实践相关

echart-vue最佳实践

vue项目中封装echarts的比较优雅的方式

Vue+Echarts企业级大屏项目适配方案