基础
介绍常见坐标系:xy坐标系,极坐标系。以及其坐标轴的主要参数,如
xAxis
、yAxis
、polar
、radiusAxis
、angleAxis
的常用属性
雷达图 radar
的常用属性
图例 legend
的常用属性
介绍图表元素主要的样式设置参数
图表元素可以主要分成 4 类(配置项):
- 标题
title
- 坐标轴
xAxis
、yAxis
、xAxis
、radiusAxis
、angleAxis
、Radar
、calendar
- 图框
grid
- 数据列表
series
坐标轴指示器
高亮样式设置 emphasis
常见图表类型
创建折线图和面积图的基本方法
创建河流图 themeRiver 的基本方法
创建柱状图和条形图的基本方法
创建极坐标图的基本方法
极坐标图有多种类型,分别对应于 Bar Chart 的多种类型(柱状图、条形图、瀑布图)
创建饼图和环形图的基本方法
基于饼图创建南丁格尔图
创建雷达图的基本方法
创建散点图和气泡图的基本方法
创建箱线图和K线图的基本方法
创建漏斗图和仪表盘的基本方法
创建漏斗图和仪表盘的基本方法
动态交互
数据区域缩放组件 dataZoom
有 3 种类型:
- 内置型数据区域缩放组件(dataZoomInside):内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。
- 滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条,用户在滑动条上进行缩放或漫游。(PC 端主要设置该方式)
-
框选型数据区域缩放组件(dataZoomSelect):提供一个选框进行数据区域缩放。即
toolbox.feature.dataZoom,配置项在
toolbox
中。
提示框组件 tooltip
基本属性
-
可以设置在全局,即 tooltip
-
可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
-
可以设置在系列中,即 series.tooltip
-
可以设置在系列的每个数据项中,即 series.data.tooltip
空间图表
基本空间地图的创建,展示点数据。
详细实例OD线(Origin-Destination Line)是指连接「起点」(origin)和「终点」(destination)的线,通常用于在地图上直观表示某两个地理位置之间的联系,如车辆的行驶轨迹、飞机的航线和人口的迁徙等。
详细实例创建线型轨迹图可视化路线轨迹数据。
详细实例创建空间面数据图。
详细实例WebGL
ECharts
GL 为 ECharts 补充了丰富的三维可视化组件,GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。GL 以扩展包的形式提供,和诸如水球图这样的扩展类似,如果要使用 GL
里的各种组件,只需要在引入 echarts.min.js
的基础上再引入一个
echarts-gl.min.js
。可以从官网下载最新版的
GL,然后在页面中通过标签引入。
ECharts 4 开始支持了 数据集(dataset)组件 用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。
详细实例将 3D 数据映射到地图上。使用 Mapbox 作为图资,并在
ECharts 中使用 mapbox3D
基于
mapbox-gl-js 的地理组件。
将线数据和面数据数据映射到 3D 地图。
详细实例层次关系网络数据可视化
Sanky 桑基图是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。基于节点和关系据构建一个层级关系的可视化图表。
详细实例关系图用于展现节点以及节点之间的关系数据。Echarts 支持 3 中布局:
'none'
使用节点中提供的(x, y)
作为节点的位置。'circular'
采用环形布局。'force'
采用力引导布局。
树图主要用来可视化树形层次数据结构,具有唯一的根节点,左子树,和右子树。
Treemap 矩阵树图是另一种可视化树形层次数据结构的方式,它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点,通过点击交互下钻的方式来探索各个具体的层级数据。
详细实例