下载APP 编程狮，随时随地学编程
返回 首页

ECharts 教程

浏览：3622566 收藏：1163
开始阅读
手册说明：


本教程正持续更新中...

认识 ECharts

ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts 有哪些特点

  1. ECharts 属于开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；
  2. ECharts 使用简单，在官网中为我们封装了 JS，只要会引用就会得到完美的展示效果；
  3. ECharts 种类多，ECharts 实现简单，各类图形都有；相应的模板，还有丰富的 API 及文档说明，非常详细；
  4. ECharts 兼容性好，基于HTML5，有着良好的动画渲染效果。

相关资料
目录
如何快速上手ECharts
ECharts怎么在webpack中使用
ECharts个性化图表样式的实现
ECharts实现异步数据加载和更新
ECharts在图表中加入交互组件
ECharts实现移动端自适应
ECharts数据的视觉映射
ECharts中的事件和行为
ECharts 自定义系列
ECharts 富文本标签

ECharts 实例操作

ECharts实例一：拖拽的实现
ECharts实例二：实现日历图

ECharts API

ECharts API 全局echarts对象

ECharts API图形相关帮助方法
ECharts API 通过echarts.init创建的实例

ECharts 支持图表的行为（action）

指定与取消ECharts数据图形高亮
ECharts中与图例组件相关的行为（action）
显示和隐藏ECharts提示框
ECharts数据区域缩放
ECharts 视觉映射操作
ECharts中时间轴的操作
ECharts工具栏操作
ECharts中饼图的操作
ECharts地图组件应用
ECharts地图图表应用
ECharts关系图设置
ECharts进行区域选择

ECharts中的事件列表

ECharts鼠标事件
ECharts中的图例事件
ECharts数据区域缩放事件
ECharts视觉映射组件的触发事件
EChartss时间轴事件
ECharts 重置事件
ECharts工具栏事件
ECharts地图区域处理事件
ECharts饼图扇形选中事件
ECharts 平行坐标轴范围选取
ECharts 高亮事件
ECharts 添加选框事件

ECharts附录

ECharts附录一 按需引入ECharts图表和组件

ECharts配置项.setOption

ECharts配置项中标题的设置

ECharts主标题文字设置

ECharts自定义富文本

ECharts副标题文本的设置

ECharts副标题的富文本样式设置
ECharts标题边距的设置
ECharts获取图形的zlevel值
ECharts设置grid组件在容器中的位置
设置ECharts标题的背景色
ECharts中标题边框的设置
ECharts阴影设置

ECharts图例组件配置项

ECharts图例组件配置 图例类型
ECharts图例组件配置 图例的zlevel和z值
ECharts图例组件配置 控制图例组件的位置和宽高
ECharts图例组件配置 图例列表布局和文本对齐
ECharts图例组件配置 内边距与间隔
ECharts图例组件配置 格式化文本
ECharts图例组件配置 状态显示

ECharts图例组件配置 文本样式

ECharts图例组件配置 富文本样式
ECharts图例组件配置 tooltip配置
ECharts图例组件配置 数据项及图例项
ECharts图例组件配置 背景色及边框
ECharts图例组件配置项 图例阴影
ECharts图例组件配置 图例滚动
ECharts图例组件配置 图例控制块
ECharts图例组件配置 图例控制块的图标
ECharts图例组件配置 翻页按钮

ECharts grid组件配置 直角坐标系网格的实现

ECharts grid组件配置 图形的zlevel和z值
ECharts grid组件离容器的距离
ECharts grid组件配置 是否包含坐标轴刻度标签
ECharts grid组件配置 设置网格样式
ECharts grid组件配置 阴影设置

ECharts grid组件配置 坐标系的tooltip设定

ECharts grid组件配置 是否显示提示框

ECharts grid组件配置 坐标轴指示器

ECharts grid组件配置 坐标轴指示器类型及z值

ECharts grid组件配置 坐标轴指示器的文本标签

ECharts grid组件配置 坐标轴指示器的label设置
ECharts grid组件配置 坐标轴指示器的文本标签样式
ECharts grid组件配置 坐标轴指示器内边距
ECharts grid组件配置 坐标轴指示器文本标签背景色及边框
ECharts grid组件配置 坐标轴指示器文本标签阴影
ECharts grid组件配置 坐标轴指示器线条样式设置
ECharts grid组件配置 坐标轴指示器阴影样式
ECharts grid组件配置 提示框浮层的位置
ECharts grid组件配置 提示框浮层内容格式器
ECharts grid组件配置 提示框浮层背景色、边框及内边距
ECharts grid组件配置 提示框浮层文本样式
ECharts grid组件配置 额外附加到浮层的css样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴的显示与索引
ECharts xAxis配置 x坐标轴的位置及偏移
ECharts xAxis配置 x坐标轴的类型
ECharts xAxis配置 x坐标轴名称

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 x坐标轴名称的富文本样式
ECharts xAxis配置 x坐标轴名称旋转、与轴线的距离
ECharts配置x坐标轴的反向及留白
ECharts xAxis配置 x坐标轴刻度
ECharts xAxis配置 坐标轴脱离0值及段数分割
ECharts xAxis配置 x坐标轴刻度分割间隔
ECharts xAxis配置 对数轴及静态坐标轴
ECharts xAxis配置 坐标轴标签是否触发鼠标事件

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴轴线的样式

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度线的样式

ECharts xAxis配置 x坐标轴刻度标签设置

ECharts xAxis配置 坐标轴刻度标签的富文本样式

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔线的样式

xAxis配置坐标轴分隔区域设置

xAxis配置坐标轴分隔区域的样式

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts xAxis配置 类目标签的富文本样式

ECharts中x坐标轴指示器的设置

xAxis坐标轴指示器的文本标签设置

xAxis设置坐标轴指示器文本标签的文本类型
设置axisPointer文本标签的内边距、边框及阴影
xAxis设置坐标轴指示器的线条样式
xAxis设置坐标轴指示器的阴影样式
xAxis控制坐标轴指示器触发tooltip
获取xAxis坐标轴指示器的value和状态
在xAxis的坐标轴指示器中使用拖拽手柄
ECharts设置x轴图形的zlevel和z值

设置ECharts直角坐标系的y轴

yAxis的基本属性

设置yAxis中坐标轴名称的文本样式

自定义yAxis中坐标轴名称的富文本样式
ECharts中y轴怎么反向与留白
ECharts设置y轴刻度的最大值与最小值
让ECharts的y轴脱离0刻度
分割ECharts的y轴并设置坐标轴间隔
判断yAxis是否静态并设置对数轴底数
yAxis标签怎么触发鼠标事件

ECharts中y轴的轴线设置

设置y坐标轴轴线样式

ECharts中y坐标轴刻度的属性

设置ECharts中y轴刻度线的样式

设置yAxis坐标轴刻度标签的属性

利用富文本样式设置y轴刻度标签

设置y坐标轴在grid区域的分隔线

设置y坐标轴分隔线的样式

设置yAxis坐标轴分隔区域

y坐标轴分割区域的样式设置

设置yAxis的类目数据

yAxis类目标签的文本样式

使用富文本样式设置yAxis坐标轴的类目标签

ECharts中y轴的坐标轴指示器

设置y轴坐标轴指示器的文本标签

yAxis坐标轴指示器文本标签的样式设置
设置yAxis坐标轴指示器文本标签的内边距
yAxis坐标轴指示器线条的样式设置
设置y轴坐标轴指示器的阴影样式
设置yAxis坐标轴指示器的拖拽手柄
y轴所有图形的zlevel和z值

设置ECharts的极坐标系polar

ECharts设置极坐标系属性

在ECharts中设置极坐标系的tooltip

ECharts极坐标系显示与触发提示框组件

tooltip坐标轴指示器配置

polar坐标轴指示器属性设置

坐标轴指示器的label标签设置

设置polar坐标轴指示器的label文字样式
polar坐标轴指示器线条样式
极坐标系axisPointer阴影样式
极坐标系中tooltip的位置
极坐标系tooltip内容格式器设置
polar提示框浮层的边框与内边距
极坐标系tooltip文本样式的设置

ECharts极坐标系的径向轴

ECharts径向轴的属性设置

设置ECharts径向轴名称的文本样式

ECharts径向轴名称的富文本样式设置
ECharts径向轴轴线属性与样式

设置ECharts中径向轴刻度

ECharts径向轴刻度线样式设置

如何设置ECharts径向轴的刻度标签

利用富文本样式设置径向轴刻度标签
ECharts径向轴分隔线设置

ECharts径向轴分隔区域设置

ECharts径向轴分隔区域的样式设置

ECharts径向轴类目数据的属性及文本样式

ECharts径向轴类目标签的富文本样式

ECharts径向轴指示器属性设置

设置径向轴指示器的label标签

设置径向轴指示器label标签的文字样式
ECharts设置径向轴指示器的线条
设置ECharts径向轴指示器的阴影样式
ECharts径向轴指示器的拖拽手柄

ECharts极坐标系的angleAxis

设置ECharts极坐标系的角度轴属性
ECharst角度轴的轴线属性与样式设置

ECharts极坐标系角度轴刻度的属性

ECharts角度轴的刻度线样式设置

ECharts角度轴的刻度标签

ECharts角度轴刻度标签的富文本样式
设置ECharts角度轴分隔线的属性与样式
ECharts角度轴分隔区域的属性和样式

ECharts角度轴类目数据与标签设置

使用富文本样式设置ECharts角度轴的类目标签

设置ECharts角度轴指示器

ECharts角度轴指示器文本标签样式

设置角度轴指示器中label的文字样式
ECharts角度轴指示器的线条设置
设置ECharts角度轴指示器阴影样式

radar雷达图坐标系组件配置

radar组件的基本属性介绍

ECharts雷达图指示器名称的设置
radar坐标轴轴线属性与样式

雷达图的axisTick属性

设置radar刻度线样式

radar坐标轴刻度标签属性

利用富文本样式设置radar刻度标签
radar坐标轴分隔线
radar坐标轴分隔区域的设置
ECharts雷达图的指示器设置

如何使用dataZoom组件

ECharts内置型数据区域缩放组件（dataZoomInside）

ECharts滑动条型数据区域缩放组件（dataZoomSlider）

设置dataZoomSlider组件数据阴影的线条样式

dataZoomSlider组件数据阴影的填充样式
dataZoomSlider组件的手柄样式
ECharts滑动条型数据区域缩放组件文字样式的设置

ECharts视觉映射组件（visualMap）

连续型视觉映射组件（visualMapContinuous）的属性

视觉映射组件的controller属性
设置ECharts视觉映射组件的文字样式

ECharts分段型视觉映射组件

ECharts分段型视觉映射组件的属性
ECharts视觉元素怎么定义
设置分段型视觉映射组件的controller
设置分段型视觉映射组件文字样式

ECharts提示框组件属性

设置ECharts提示框组件文字的样式

axisPointer配置项

在tooltip中设置坐标轴指示器属性

设置ECharts提示框组件指示器的文本标签

设置提示框组件指示器文本标签的文字样式
ECharts提示框组件指示器的线条样式
ECharts提示框组件指示器的阴影样式
ECharts提示框组件指示器的crossStyle

设置ECharts的全局坐标轴指示器

ECharts全局坐标轴指示器的属性设置

设置ECharts坐标轴指示器的文本标签

ECharts坐标轴指示器文本标签的文字设置
设置ECharts坐标轴指示器的线条
ECharts坐标轴指示器的阴影样式
ECharts坐标轴指示器拖拽手柄

ECharts工具栏组件（toolbox）

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts导出图片的icon样式

ECharts配置项还原

设置ECharts配置项还原的icon样式

ECharts的数据视图工具

ECharts数据视图工具的icon样式

ECharts数据区域缩放工具

ECharts数据区域缩放的icon样式

ECharts动态类型切换工具

ECharts动态类型切换的icon样式
ECharts选框组件的控制按钮
ECharts工具栏组件的icon样式

ECharts区域选择组件（brush）

ECharts区域选择组件（brush）的属性

ECharts地理坐标系组件（geo）

ECharts地理坐标系属性介绍

geo组件文本标签设置

利用富文本样式设置geo组件文本标签
ECharts地图区域的多边形图形样式

ECharts设置特定的地图区域

ECharts特定地图区域的文本标签

ECharts平行坐标系（parallel）

ECharts平行坐标系的属性

设置多个ECharts平行坐标轴

ECharts平行坐标轴轴线设置
parallel坐标轴如何设置刻度属性
ECharts怎么设置平行坐标轴刻度标签
使用富文本样式设置parallel的刻度标签
parallel坐标轴如何配置类目标签
ECharts平行坐标轴类目标签的rich属性

parallel坐标轴组件的使用

如何框选parallel坐标轴
ECharts平行坐标轴组件如何设置轴线
怎么设置ECharts平行坐标轴组件刻度
ECharts如何使用平行坐标轴组件刻度标签

ECharts设置平行坐标轴组件的类目标签

ECharts设置类目标签的文字的方法

ECharts singleAxis组件基本使用

怎么设置ECharts单轴的轴线
如何设置singleAxis组件的刻度
关于ECharts单轴刻度标签的设置
用富文本样式设置ECharts的单轴刻度标签
singleAxis组件如何使用分隔线
ECharts设置单轴的分隔区域
ECharts单轴的类目标签属性及文字样式

单轴指示器在ECharts中的使用

ECharts单轴指示器文本标签
ECharts单轴指示器线条配置
ECharts单轴指示器怎么设置阴影
ECharts单轴指示器拖拽手柄的实现
ECharts单轴中tooltip如何设置

快速上手ECharts时间轴组件

时间轴timeline轴线如何设置
设置ECharts时间轴的文本标签
ECharts时间轴图形样式设置
ECharts当前项的图形样式

ECharts控制按钮的样式

ECharts控制按钮在不同状态下的样式
ECharts图形元素组件（graphic）
ECharts的group图形元素
ECharts如何使用image图形元素
ECharts图表的文本块设置
ECharts如何设置矩形元素
ECharts圆环图形元素的使用
设置ECharts扇形元素
ECharts圆弧属性
ECharts多边形元素的基本属性
ECharts图表折线元素
如何设置ECharts直线元素
ECharts怎么使用贝塞尔曲线

ECharts日历坐标系组件

ECharts日历坐标系属性
ECharts日历坐标系如何设置分隔线
ECharts日历格的样式怎么设置
如何设置ECharts星期轴的样式
ECharts日历坐标系的月份轴有哪些属性
ECharts日历坐标系年份标签样式

ECharts系列介绍

ECharts折线/面积图属性大全

如何标注ECharts折线图
ECharts折线图的标域该怎么设置
设置ECharts折线图的提示框

ECharts柱状图基本属性设置

设置ECharts柱状图的文本标签
ECharts柱状图的标注如何实现
使用ECharts柱状图标线
ECharts柱状图提示框

ECharts饼图属性设置

ECharts饼图data数据如何设置

ECharts如何实现散点图

ECharts散点图特定的提示框

具有涟漪特效的ECharts散点图属性

ECharts涟漪动画设置
ECharts涟漪特效散点图标域

ECharts关于雷达图的一些属性设置

ECharts如何设置雷达图的线条样式
与ECharts雷达图区域相关的属性设置

Treemap在ECharts中的使用

ECharts设置Treemap属性
Treemap层级设置
Treemap是否响应和触发鼠标事件
Treemap父节点标签
Treemap：使用面包屑显示当前节点路径
Treemap特定的提示框浮层

ECharts箱形图的使用

设置ECharts箱形图的标注
ECharts设置箱形图标线的属性
设置ECharts箱形图的标域属性
ECharts箱形图的提示框浮层设置

ECharts图表使用之K线图

K线图有哪些属性？
如何设置K线图的提示框浮层

ECharts系列列表：热力图

设置特定于ECharts热力图系列的提示框浮层

ECharts地图系列

ECharts地图的提示框浮层设置

ECharts系列列表：平行坐标系

ECharts平行坐标系属性

ECharts线图：绘制线数据

如何设置ECharts线图的特效
ECharts线图标域属性介绍

ECharts系列：桑基图的使用

设置桑基图节点的关系数据
ECharts：特定于桑基图的提示框浮层
ECharts漏斗图属性与实例介绍
ECharts仪表盘属性与使用

ECharts象形柱图

ECharts象形柱图属性设置
象形柱图hover动画效果设置
ECharts象形柱图的提示框浮层设置

ECharts系列：主题河流图

设置ECharts主题河流图的提示框浮层

ECharts图表自定义系列

ECharts自定义系列属性
ECharts自定义系列的渲染逻辑
设置ECharts自定义系列的提示框浮层
ECharts配置项：背景色
设置ECharts全局字体样式
设置ECharts动画的属性
ECharts渐进式渲染简单介绍
更多有关ECharts图表的设置

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }