基础

图表基本元素:标题、图框

介绍使用 Echart 模块的基本的起手式

标题 title 的常用属性

图框 grid 的常用属性

详细实例
图表基本元素:坐标轴、图例

介绍常见坐标系:xy坐标系,极坐标系。以及其坐标轴的主要参数,如 xAxisyAxispolarradiusAxisangleAxis 的常用属性

雷达图 radar 的常用属性

图例 legend 的常用属性

详细实例
数据加载

介绍数据主要存放的参数 series 系列列表的常用属性

添加常见的标记元素 markPointmarkLinemarkArea 系列列表的常用属性

详细实例
样式设置

介绍图表元素主要的样式设置参数

图表元素可以主要分成 4 类(配置项):

  • 标题 title
  • 坐标轴 xAxisyAxisxAxisradiusAxisangleAxisRadarcalendar
  • 图框 grid
  • 数据列表 series

坐标轴指示器

高亮样式设置 emphasis

详细实例

常见图表类型

Line Chart Area Chart 折线图、面积图、河流图

创建折线图和面积图的基本方法

创建河流图 themeRiver 的基本方法

Line Chart Line Chart 柱状图、条形图

创建柱状图和条形图的基本方法

Polar Chart 极坐标图

创建极坐标图的基本方法

极坐标图有多种类型,分别对应于 Bar Chart 的多种类型(柱状图、条形图、瀑布图)

Pie Chart Doughnut Chart 饼图

创建饼图和环形图的基本方法

基于饼图创建南丁格尔图

Radar Chart 雷达图

创建雷达图的基本方法

Bubble Chart 散点图

创建散点图和气泡图的基本方法

Boxplot Chart 箱线图、K线图

创建箱线图和K线图的基本方法

Funnel Chart Gauge Chart 漏斗图、仪表盘

创建漏斗图和仪表盘的基本方法

Calendar Chart 日历图

创建漏斗图和仪表盘的基本方法

动态交互

工具栏、区域选择组件

工具栏 toolbox 内置有 导出图片数据视图动态类型切换数据区域缩放重置 五个工具。

区域选择组件 brush 让用户可以选择图中一部分数据,从而便于展示被选中数据,或者统计部分数据。

详细实例
数据区域缩放组件、提示框组件

数据区域缩放组件 dataZoom 有 3 种类型:

提示框组件 tooltip 基本属性

详细实例
时间轴、异步数据加载

时间轴 timeline 的常用属性

异步数据加载利用 JavaScript 内置函数 setInterval() 函数(间隔特定时间段)不断调用 setOption 实现图表的更新

详细实例

空间图表

创建空间图表

基本空间地图的创建,展示点数据。

详细实例
OD 迁徙图

OD线(Origin-Destination Line)是指连接「起点」(origin)和「终点」(destination)的线,通常用于在地图上直观表示某两个地理位置之间的联系,如车辆的行驶轨迹、飞机的航线和人口的迁徙等。

详细实例
线型轨迹图

创建线型轨迹图可视化路线轨迹数据。

详细实例
空间面数据图

创建空间面数据图。

详细实例

WebGL

ECharts GL 为 ECharts 补充了丰富的三维可视化组件,GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。GL 以扩展包的形式提供,和诸如水球图这样的扩展类似,如果要使用 GL 里的各种组件,只需要在引入 echarts.min.js 的基础上再引入一个 echarts-gl.min.js。可以从官网下载最新版的 GL,然后在页面中通过标签引入。

3D 球面轨迹图

使用 EChart globe 地球组件展示线数据,绘制 3D 飞线图。

详细实例
3D 柱状图

使用 EChart grid3D 三维笛卡尔坐标系组件绘制 3D 柱状图。

详细实例
3D 散点图/气泡图

ECharts 4 开始支持了 数据集(dataset)组件 用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。

详细实例
3D 地图 POI 数据可视化

将 3D 数据映射到地图上。使用 Mapbox 作为图资,并在 ECharts 中使用 mapbox3D 基于 mapbox-gl-js 的地理组件

详细实例
3D 地图线和面数据可视化

将线数据和面数据数据映射到 3D 地图。

详细实例

层次关系网络数据可视化

桑基图

Sanky 桑基图是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。基于节点和关系据构建一个层级关系的可视化图表。

详细实例
关系图

关系图用于展现节点以及节点之间的关系数据。Echarts 支持 3 中布局:

  • 'none' 使用节点中提供的 (x, y) 作为节点的位置。
  • 'circular' 采用环形布局。
  • 'force' 采用力引导布局。
详细实例
树图

树图主要用来可视化树形层次数据结构,具有唯一的根节点,左子树,和右子树。

Treemap 矩阵树图是另一种可视化树形层次数据结构的方式,它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点,通过点击交互下钻的方式来探索各个具体的层级数据。

详细实例