{T}

ECharts 核心概念

系列（Series）

系列（Series）是指：一组数值映射成对应的图。在 ECharts 中，系列是数据可视化的核心概念，每个系列定义了一种图表类型及其数据。

系列的基本结构

javascript
option = {
  series: [
    {
      type: 'bar',        // 图表类型
      name: '销量',       // 系列名称
      data: [5, 20, 36, 10, 10, 20]  // 数据
    }
  ]
}

多系列混合

一个图表可以包含多个系列，不同类型的系列可以混合使用：

javascript
option = {
  xAxis: {
    data: ['一季度', '二季度', '三季度', '四季度']
  },
  yAxis: {},
  series: [
    {
      type: 'pie',
      center: ['65%', 60],
      radius: 35,
      data: [
        { name: '分类1', value: 50 },
        { name: '分类2', value: 60 },
        { name: '分类3', value: 55 },
        { name: '分类4', value: 70 }
      ]
    },
    {
      type: 'line',
      data: [100, 112, 96, 123]
    },
    {
      type: 'bar',
      data: [79, 81, 88, 72]
    }
  ]
}

常见系列类型

类型说明
line折线图
bar柱状图
pie饼图
scatter散点图
effectScatter涟漪散点图
radar雷达图
tree树图
treemap矩形树图
sunburst旭日图
boxplot箱形图
candlestickK线图
heatmap热力图
map地图
parallel平行坐标
lines线图
graph关系图
sankey桑基图
funnel漏斗图
gauge仪表盘
pictorialBar象形柱图
themeRiver主题河流图
custom自定义系列

组件（Component）

ECharts 中除了绘图之外其他部分，都可抽象为「组件」。组件是图表的辅助元素，用于增强图表的功能和可读性。

常见组件

组件说明
title标题组件
legend图例组件
tooltip提示框组件
xAxis直角坐标系 X 轴
yAxis直角坐标系 Y 轴
grid直角坐标系底板
polar极坐标系底板
radiusAxis极坐标系径向轴
angleAxis极坐标系角度轴
dataZoom数据区域缩放组件
visualMap视觉映射组件
toolbox工具栏组件
geo地理坐标系组件
parallel平行坐标系组件
singleAxis单轴坐标系组件
timeline时间线组件

组件示例

javascript
option = {
  title: {
    text: '数据可视化',
    subtext: 'ECharts 示例'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  legend: {
    data: ['分类', '折线图', '柱状图'],
    left: 100
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: [
    {
      show: true,
      start: 30,
      end: 70
    }
  ],
  dataset: {
    source: [
      ['一季度', 79, 100, '分类1', 50],
      ['二季度', 81, 112, '分类2', 60],
      ['三季度', 88, 96, '分类3', 55],
      ['四季度', 72, 123, '分类4', 70]
    ]
  },
  grid: [
    {
      left: 50,
      top: 70
    }
  ],
  series: [
    // ...
  ]
}

坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等，需要运行在「坐标系」上。坐标系用于布局这些图，以及显示数据的刻度等。

支持的坐标系类型

  • 直角坐标系（grid）
  • 极坐标系（polar）
  • 地理坐标系（geo）
  • 单轴坐标系（singleAxis）
  • 日历坐标系（calendar）
  • 平行坐标系（parallel）

直角坐标系

直角坐标系是最常用的坐标系，由 xAxis（X 轴）、yAxis（Y 轴）、grid（底板）三种组件协作而成。

单坐标系示例

javascript
option = {
  xAxis: {},
  yAxis: {},
  dataset: {
    source: [
      [13, 44],
      [51, 51],
      [51, 32],
      [67, 19],
      [19, 33]
    ]
  },
  series: [
    {
      type: 'scatter',
      encode: { x: 0, y: 1 }
    }
  ]
}

双 Y 轴示例

两个 yAxis 共享一个 xAxis：

javascript
option = {
  legend: {},
  tooltip: {},
  xAxis: {
    type: 'category'
  },
  yAxis: [
    {
      min: 0,
      max: 100
    },
    {
      min: 0,
      max: 100
    }
  ],
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1]
    ]
  },
  series: [
    { type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
    { type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
  ]
}

多坐标系示例

一个 ECharts 实例中可以有多个 grid：

javascript
option = {
  legend: {},
  tooltip: {},
  xAxis: [
    {
      type: 'category',
      gridIndex: 0
    },
    {
      type: 'category',
      gridIndex: 1
    }
  ],
  yAxis: [
    {
      gridIndex: 0
    },
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '55%'
    },
    {
      top: '55%'
    }
  ],
  series: [
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
}

定位

大多数组件都提供了定位属性，可以采用类似 CSS absolute 的定位属性来控制组件的位置。

定位属性

javascript
option = {
  grid: {
    left: '10%',    // 左边距
    top: 60,        // 上边距
    right: '10%',   // 右边距
    bottom: 60      // 下边距
  }
}

定位值可以是：

  • 像素值：如 60
  • 百分比：如 '10%'
  • 也可以是 'left'、'center'、'right'（水平方向）
  • 或 'top'、'middle'、'bottom'（垂直方向）

数据集（dataset）

ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。

dataset 基本用法

javascript
option = {
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  dataset: {
    source: [
      ['一季度', 79, 100, '分类1', 50],
      ['二季度', 81, 112, '分类2', 60],
      ['三季度', 88, 96, '分类3', 55],
      ['四季度', 72, 123, '分类4', 70]
    ]
  },
  series: [
    {
      type: 'pie',
      center: ['65%', 60],
      radius: 35,
      encode: { itemName: 3, value: 4 }
    },
    {
      type: 'line',
      encode: { x: 0, y: 2 }
    },
    {
      type: 'bar',
      encode: { x: 0, y: 1 }
    }
  ]
}

数据格式

dataset 支持多种数据格式：

二维数组格式

javascript
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]
  ]
}

对象数组格式

javascript
dataset: {
  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 }
  ]
}

encode 映射

通过 encode 属性可以指定数据维度到视觉通道的映射：

javascript
series: [
  {
    type: 'bar',
    encode: {
      x: 'product',   // 将 product 列映射到 X 轴
      y: '2015'       // 将 2015 列映射到 Y 轴
    }
  }
]

dataset 与 series.data 的区别

特性datasetseries.data
数据管理集中管理，可复用分散在各系列中
数据映射通过 encode 灵活映射固定映射规则
适用场景多系列共享数据单系列简单数据
可读性数据与配置分离数据与配置混合

数据维度

ECharts 中的数据，一般存放于 series.data 或 dataset.source 中。每个数据项含有「数据值（value）」和其他信息。

一维数据

javascript
series: {
  data: [2323, 1212, 2323, 4343, 3434]
}

多维数据

javascript
series: {
  data: [
    [3434, 129, '圣马力诺'],
    [1212, 5454, '梵蒂冈'],
    [2323, 3223, '瑙鲁'],
    [4343, 23, '图瓦卢']
  ]
}

多维数据中，每列是一个维度。例如气泡图中：

  • 第一维度映射到 X 轴
  • 第二维度映射到 Y 轴
  • 第三维度映射到气泡半径

动画配置

ECharts 内置了丰富的动画效果，可以提升用户体验和视觉效果。

开启/关闭动画

javascript
option = {
  animation: true,  // 是否开启动画，默认开启
  animationThreshold: 2000,  // 动画阈值，数据量超过此值时关闭动画

  series: [{
    type: 'bar',
    data: [10, 20, 30]
  }]
}

初始动画

图表首次渲染时的动画效果：

javascript
option = {
  animationDuration: 1000,       // 初始动画时长，单位 ms
  animationEasing: 'cubicOut',   // 初始动画缓动效果
  animationDelay: 0,             // 初始动画延迟

  // 或使用函数形式（每个数据项不同延迟）
  animationDelay: function(idx) {
    return idx * 100  // 每个数据项延迟递增 100ms
  }
}

更新动画

数据更新时的动画效果：

javascript
option = {
  animationDurationUpdate: 300,       // 更新动画时长
  animationEasingUpdate: 'cubicOut',  // 更新动画缓动效果
  animationDelayUpdate: 0             // 更新动画延迟
}

常用缓动效果

缓动名称效果描述
linear线性变化
quadraticIn二次方缓入
quadraticOut二次方缓出
cubicIn三次方缓入
cubicOut三次方缓出
elasticOut弹性效果
bounceOut弹跳效果

动画示例

javascript
option = {
  animation: true,
  animationDuration: 2000,
  animationEasing: 'elasticOut',
  animationDelay: function(idx) {
    return idx * 200
  },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    animationDurationUpdate: 1000,
    animationEasingUpdate: 'bounceOut'
  }]
}

状态管理

ECharts 支持多种状态配置，可以针对不同交互状态设置不同样式。

高亮状态（emphasis）

鼠标悬停时的高亮效果：

javascript
option = {
  series: [{
    type: 'bar',
    data: [10, 20, 30],
    emphasis: {
      disabled: false,  // 是否禁用高亮状态
      focus: 'self',    // 'none' | 'self' | 'series'
      blurScope: 'coordinateSystem',  // 模糊范围
      itemStyle: {
        color: '#91cc75',
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      label: {
        show: true,
        fontSize: 16
      }
    }
  }]
}

淡出状态（blur）

其他图形淡出的效果（配合 focus: 'self' 使用）：

javascript
option = {
  series: [{
    type: 'bar',
    emphasis: {
      focus: 'self'
    },
    blur: {
      itemStyle: {
        opacity: 0.3
      }
    }
  }]
}

选中状态（select）

数据项被选中时的样式：

javascript
option = {
  series: [{
    type: 'bar',
    selectedMode: 'multiple',  // 'single' | 'multiple' | false
    select: {
      itemStyle: {
        color: '#ee6666',
        borderColor: '#333',
        borderWidth: 2
      },
      label: {
        show: true,
        fontWeight: 'bold'
      }
    },
    data: [10, 20, 30]
  }]
}

// 通过 API 控制选中状态
chart.dispatchAction({
  type: 'toggleSelect',
  seriesIndex: 0,
  dataIndex: 0
})

状态切换示例

javascript
option = {
  series: [{
    type: 'pie',
    selectedMode: 'single',
    emphasis: {
      focus: 'self',
      itemStyle: {
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    blur: {
      itemStyle: {
        opacity: 0.2
      }
    },
    select: {
      itemStyle: {
        borderWidth: 3,
        borderColor: '#fff'
      }
    },
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' }
    ]
  }]
}

option 结构说明

option 是 ECharts 的核心配置对象，理解其结构有助于更好地组织代码。

层级结构

javascript
option = {
  // 全局配置
  backgroundColor: '#fff',
  color: ['#5470c6', '#91cc75', '#fac858'],
  animation: true,

  // 标题组件
  title: {},

  // 图例组件
  legend: {},

  // 提示框组件
  tooltip: {},

  // 工具栏组件
  toolbox: {},

  // 坐标系组件
  grid: {},
  xAxis: {},
  yAxis: {},

  // 数据区域缩放
  dataZoom: [],

  // 视觉映射
  visualMap: {},

  // 数据集
  dataset: {},

  // 系列（图表数据）
  series: []
}

配置优先级

样式配置遵循就近原则：

  1. data[index].itemStyle - 数据项级别（最高优先级）
  2. series.itemStyle - 系列级别
  3. series.emphasis.itemStyle - 状态级别
  4. color 调色盘 - 全局级别（最低优先级）
javascript
option = {
  color: ['#5470c6'],  // 全局颜色

  series: [{
    type: 'bar',
    itemStyle: {        // 系列级别
      color: '#91cc75'
    },
    data: [
      10,
      {
        value: 20,
        itemStyle: {    // 数据项级别（最高优先级）
          color: '#ee6666'
        }
      },
      30
    ]
  }]
}

相关链接