ECharts
[TOC]
索引
echarts
- echarts.init()：
(dom,theme,opt)，创建echarts实例。 - echarts.registerMap()：
(mapName, opt)，注册可用的地图，只在 geo 组件或者 map 图表类型中使用。 - echarts.getMap()：
(mapName)，获取已注册地图。
echartsInstance
- echartsInstance.setOption()：
(option)，设置图表实例的配置项以及数据，万能接口。 - echartsInstance.getWidth()：
()，获取 ECharts 实例容器的宽度。 - echartsInstance.getHeight()：
()，获取 ECharts 实例容器的高度。 - echartsInstance.resize()：
({width?,height?,silent?,animation?})，改变图表尺寸，在容器大小发生改变时需要手动调用。 - echartsInstance.showLoading()：
(type?,opt?)，显示加载动画效果。 - echartsInstance.hideLoading()：
()，隐藏加载动画效果。 - echartsInstance.dispatchAction()：
(payload)，触发图表行为，如图例开关、显示提示框等。 - echartsInstance.dispose()：
()，销毁实例，销毁后实例无法再被使用。 - echartsInstance.on()：
(eventName,query?,handler,context?)，添加事件处理函数。
option
- backgroundColor：
Color，设置直角坐标系内绘图区。 - grid?：
{show?,left?,containLabel?,backgroundColor?,...}，直角坐标系内绘图区域。 - xAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的x轴。 - yAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的y轴。 - title?：
{text,show?,top?,left?,...}，图表的标题。 - legend?：
{show?,itemWidth?,icon?,formatter?,textStyle?,itemGap?,...}，图例，展现了不同系列的标记、颜色。图例文字来自于data.name - tooltip?：
{show?,trigger?,axisPointer?,formatter?,,...}，提示框。 - toolbox?：
{}，工具栏，提供操作图表的工具。 - visualMap?：
{type?,left?,,seriesIndex,inRange,...}，视觉映射，可以将数据值映射到图形的形状、大小、颜色等。 - geo?：
{map,roam?,label?,aspectScale?,itemStyle?,emphasis?,...}，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图、线集。 - series：
[{type,data,name?,label?,itemStyle?,emphasis?,coordinateSystem?,...}]，系列，配置系列图表的类型和图形信息数据。
color
- color：
{type,x,y,x2,y2,colorStops}，线性渐变。 - color：
{type,x,y,r,colorStops}，径向渐变。 - color：
{image,repeat}，纹理填充。
ECharts
echarts
init()
echarts.init()：(dom?,theme?,opt?)，创建echarts实例。
dom?：
HTMLDivElement | HTMLCanvasElement，实例容器，一般是一个具有高宽的 DIV 元素。theme?：
string | {} | null，应用的主题。不指定主题使用null。opt?：
{renderer?,ssr?,width?,height?,...}，附加参数。有下面几个可选项：- renderer?：
canvas | svg，默认：canvas，渲染模式。 - ssr?：
boolean，默认：false，是否使用服务端渲染，只有在 SVG 渲染模式有效。
- renderer?：
返回：
echartsInstance：
ECharts，返回一个ECharts实例。- js
// 1. 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 2. 初始化图表，使用 'dark' 主题 var myChart = echarts.init(document.getElementById('main'), 'dark'); // 3. 使用自定义宽高和渲染方式初始化图表 var myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg', // 使用 SVG 渲染方式 width: 800, // 设置宽度 height: 600 // 设置高度 });
registerMap()
echarts.registerMap()：(mapName, opt)，注册可用的地图，只在 geo 组件或者 map 图表类型中使用。
mapName：
string，地图名称。opt：
{geoJSON?,svg?,specialAreas?}，- geoJSON：
json，GeoJson 格式的数据。 - svg?：
string | SVG DOM，SVG 格式的数据。 - specialAreas?：
object，将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 geoJSON 中生效，svg 中不生效。
- geoJSON：
- js
// 1. 注册自定义地图 var mapGeoJson = {...} // 假设我们有一个自定义的 GeoJSON 数据 echarts.registerMap('myMap', {geoJSON: mapGeoJson}); // 2. 使用注册的中国地图 echarts.registerMap('china', echarts.getMap('china'));
getMap()
echarts.getMap()：(mapName)，获取已注册地图。
mapName：
string，地图名称。返回：
map：
{geoJSON,specialAreas}，返回注册的地图。- js
// 获取中国地图的数据, china为注册的地图 var chinaMap = echarts.getMap('china');
echartsInstance
setOption()
echartsInstance.setOption()：(option)，设置图表实例的配置项以及数据，万能接口。
option：
ECOption，图表的配置项和数据。- js
// 设置图表的配置项 var option = {...} // 配置图表 myChart.setOption(option);
getWidth()
echartsInstance.getWidth()：()，获取 ECharts 实例容器的宽度。
返回：
width：
number，返回容器的宽度。- js
// 获取图表容器的宽度 var chartWidth = myChart.getWidth(); console.log('图表容器的宽度为：', chartWidth); // 输出容器的宽度
getHeight()
echartsInstance.getHeight()：()，获取 ECharts 实例容器的高度。
返回：
height：
number，返回容器的高度。- js
// 获取图表容器的宽度 var chartHeight = myChart.getHeight(); console.log('图表容器的高度为：', chartHeight); // 输出容器的高度
resize()
echartsInstance.resize()：({width?,height?,silent?,animation?})，改变图表尺寸，在容器大小发生改变时需要手动调用。
width?：
Length，显式指定实例宽度。height?：
Length，显式指定实例高度。silent?：
boolean，默认：false，是否避免重复触发事件。animation?：
{duration?,easing?}，resize时是否应用过渡动画。返回：
echarts：
ECharts，返回一个ECharts。- js
// 1. 按钮点击后调整图表大小，手动设置 document.getElementById('resizeBtn').addEventListener('click', function() { myChart.resize({ width: 800, // 手动设置宽度 height: 500 // 手动设置高度 }); }); // 2. 监听窗口的大小变化，响应式调整图表大小 window.addEventListener('resize', function() { myChart.resize(); // 当窗口大小变化时，自动调整图表大小 }); // 3. 按钮点击后调整图表大小，并设置silent为true，避免重复触发resize事件 document.getElementById('resizeBtn').addEventListener('click', function() { myChart.resize({ width: 800, // 手动设置宽度 height: 500, // 手动设置高度 silent: true // 不触发 resize 事件 }); });
showLoading()
echartsInstance.showLoading()：(type?,opt?)，显示加载动画效果。
type?：
default，加载动画类型。opt?：
{text?,color?,zlevel?,...}，加载动画配置项。- js
// 显示加载动画 myChart.showLoading();
hideLoading()
echartsInstance.hideLoading()：()，隐藏加载动画效果。
- js
// 隐藏加载动画 myChart.hideLoading();
dispatchAction()
echartsInstance.dispatchAction()：({type,additionalParameters?})，触发图表行为，如图例开关、显示提示框等。
type：
string，表示要触发的行为类型。highlight/downplay: 高亮/取消高亮某个系列或数据项。showTip/hideTip: 显示/藏提示框。select/unselect: 选择/取消选择数据项。toggleLegend: 切换图例项的显示状态。dataZoom: 用于控制数据缩放。
additionalParameters?：
any，取决于触发的行为类型，不同的行为类型有不同的参数需求。highlight/downplay、showTip/hideTip、select/unselect- seriesIndex?：
number，指定要操作的系列索引，从0开始。 - dataIndex?：
number，指定要操作的数据项索引，从0开始。 toggleLegend- name?：
string，图例项的名称，用来指定要切换的图例项。 dataZoom- start?：
number，0-100，缩放的起始位置。 - end?：
number，0-100，缩放的结束位置。
- html
<div id="main" style="width: 600px; height: 400px"></div> <button onclick="highlightData()">高亮数据</button> <button onclick="toggleLegend()">切换图例</button> <button onclick="showTooltip()">显示提示框</button> <button onclick="selectData()">选择数据</button> <script> var myChart = echarts.init(document.getElementById('main')) var option = { ... } myChart.setOption(option) // 高亮数据项 function highlightData() { myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 1 }) } // 切换图例 function toggleLegend() { myChart.dispatchAction({ type: 'toggleLegend', name: '邮件营销' }) } // 显示提示框 function showTooltip() { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 2 }) } // 选择数据项 function selectData() { myChart.dispatchAction({ type: 'select', seriesIndex: 0, dataIndex: 0 }) } </script>
dispose()
echartsInstance.dispose()：()，销毁实例，销毁后实例无法再被使用。
- js
// SPA页面切换、图表切换时销毁图表 if (myChart) { myChart.dispose(); } // 当用户返回时，重新创建图表 myChart = echarts.init(document.getElementById('chart-container')); myChart.setOption(newOption);
on()
echartsInstance.on()：(eventName,query?,handler,context?)，添加事件处理函数。
eventName：
string，事件名称，全小写。- 基本事件：
click、mouseover、mouseout、mousedown、mouseup、mousemove。 datazoom：数据区域缩放事件legendselectchanged：图例选择改变事件brush：刷选事件resize：图表大小变化事件
- 基本事件：
query?：
string|Object，可选的过滤条件，能够只在指定的组件或者元素上进行响应。如'series.line'。handler：
(event) => void，事件处理函数。context?：
Object，回调函数内部的context，即this的指向。- js
// 1. 监听数据缩放事件 myChart.on('datazoom', function (params) { console.log('数据缩放:', params.start, params.end); }); // 2. 监听图例选择改变事件 myChart.on('legendselectchanged', function (params) { console.log('图例状态改变:', params.selected); }); // 3. 监听窗口或容器大小调整事件 myChart.on('resize', function () { console.log('图表大小已调整'); });
option
- backgroundColor：
Color，设置直角坐标系内绘图区。 - grid?：
{show?,left?,containLabel?,backgroundColor?,...}，直角坐标系内绘图区域。- show?：
boolean，默认：false，是否显示直角坐标系网格。 - left?, right?, top?, bottom?：
Length，默认：10%,10%,60,60，grid组件离容器左右上下的距离。 - containLabel?：
boolean，默认：false，grid区域是否包含坐标轴的刻度标签。 - backgroundColor?：
Color，默认：transparent，网格背景色。
- show?：
- xAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的x轴。 - yAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的y轴。show?：
boolean，默认：true，是否显示x或y轴。name?：
string，坐标轴名称。type?：
value | category | time | log，默认：category，坐标轴类型。value，数值轴，适用于连续数据。常用于y轴。category，类目轴，适用于离散的类目数据。常用于x轴。类目数据可来源xAxis.data、series.data或dataset.source。time，时间轴，适用于连续的时序数据。log，对数轴。适用于对数数据。
data：
string[] | [{}]，类目数据，在类目轴type: 'category'中有效。axisLine?：
{show?,lineStyle?}，坐标轴轴线相关设置。axisTick?：
{show?,length?,lineStyle?}，坐标轴刻度相关设置。axisLabel?：
{show?,color?,fontSize?}，坐标轴刻度标签的相关设置。splitLine?：
{show?,lineStyle?}，坐标轴在grid区域中的分隔线。lineStyle?，{color?,width?}，线条样式。
- title?：
{show?,top...?,text,textStyle?,subtext?,subtextStyle?,...}，图表的标题。- show?：
boolean，默认：true，是否显示标题组件。 - top?, left?：
Length, Length，title 组件离容器上侧、左侧的距离。 - text：
string，主标题文本，支持\n换行。 - textStyle?：
{color,rich,...}，主标题样式。 - subtext?：
string，副标题文本，支持\n换行。 - subtextStyle?：
{color,rich,...}，副标题样式。
- show?：
- legend?：
{show?,itemWidth?,icon?,formatter?,textStyle?,itemGap?,orient?,...}，图例，展现了不同系列的标记、颜色。图例文字来自于data.name- show?：
boolean，默认：true，是否显示图例。 - itemWidth?：
number，默认：25，图例标记的图形宽度。 - icon?：
circle | rect | ...，图例项的 icon。 - formatter?：
string | (name) => void，用来格式化图例文本。- name：
string，图例名称。
- name：
- textStyle?：
{rich?}，图例的公用文本样式。- rich?：
CSS样式，富文本的CSS样式
- rich?：
- itemGap?：
number，默认：10，图例每项之间的间隔。 - orient?：
horizontal | vertical，默认：horizontal，图例列表的布局朝向。
- show?：
- tooltip?：
{show?,trigger?,axisPointer?,formatter?,...}，提示框。- show?：
boolean，默认：true，是否显示提示框。 - trigger?：
item | axis，默认：item， - axisPointer?：
type，坐标轴指示器配置项。- type：
line | cross | shadow | none，指示器类型。
- type：
- formatter?：
string | (params, ticket, callback) => string | HTMLElement[]，提示框浮层内容格式器。- params：
object | array，formatter 需要的数据集。 - ticket：
string，异步回调标识，配合第三个参数callback使用。 - callback：
(ticket, html) => void，回调函数
- params：
- show?：
- toolbox?：
{}，工具栏，提供操作图表的工具。 - visualMap?：
{type?,left?,,seriesIndex,inRange,...}，视觉映射，可以将数据值映射到图形的形状、大小、颜色等。- type：
continuous | piecewise，默认：continuous，视觉映射的类型。 - left?,right?,top?,bottom?：
Length，默认：，visualMap 组件离容器的距离。 - seriesIndex：
number | []，默认：所有系列，指定取哪个系列的数据。 - inRange：
{color}，默认：，定义在选中范围中的视觉元素。- color：
[]，颜色数组。
- color：
- type：
- geo?：
{map,roam?,label?,aspectScale?,itemStyle?,emphasis?,...}，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图、线集。- map：
string，使用 registerMap 注册的地图名称。 - roam?：
boolean，默认：false，是否开启鼠标缩放和平移漫游。 - label?：
{show?,...}，图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 - aspectScale?：
number，默认：0.75，用于缩放地图的长宽比。 - itemStyle?：
{areaColor?,borderColor?,...}，地图区域的多边形图形样式。- areaColor?：
Color，默认：#eee，地图区域的颜色。 - borderColor?：
Color，默认：#000，图形的描边颜色。
- areaColor?：
- emphasis?：
{itemStyle,label,...}，高亮状态下的多边形和标签样式。
- map：
- series：
[{type,data,name?,label?,itemStyle?,emphasis?,coordinateSystem?,...}]，系列，配置系列图表的类型和图形信息数据。- 公共属性：
- type：
line | bar | pie | scatter | effectScatter | map | ...，指定系列图表的类型，比如：折线图、柱状图、饼图、散点图、地图等。 - data：
[]，系列中的数值内容数组。数组中的每一项称为数据项 。数据类型有如下写法：[value，...]： 一维数组。一维数组是二维数组的简写。[[index, value], ...]：二维数组。注意index从0开始。[[x, y, value], ...]：二维数组。x、y可以表示x、y 轴，常用于表示经度、纬度。[{value: y轴值, name: x轴值, label?: {}, itemStyle?: {}, emphasis?: {}, ...}, ...]：对象类型(推荐)。
- name?：
string，系列名称，用于tooltip的显示，legend的图例筛选等 - label?：
{show?,position?,color?,fontSize?}，图形上的文本标签。就近原则，data 中的比 series 优先级高。 - itemStyle?：
{color?, border*?, opacity?, shadow*?}，图形样式。还可以写在series.data中。 - emphasis?：
{disabled?, focus?, label?, itemStyle?}，高亮的图形样式和标签样式。还可以写在series.data中。 - coordinateSystem?：
cartesian2d | polar | geo，默认：cartesian2d，该系列使用的坐标系，默认值为二维的直角坐标系（笛卡尔坐标系）cartesian2d：二维的直角坐标系(笛卡尔坐标系)。polar：极坐标系。geo：地理坐标系。常用在地图的散点图中。
- bar属性：
- barWidth?：
number，默认：自适应，柱条的宽度，不设时自适应。 - line属性：
- smooth?：
boolean，默认：false，是否平滑曲线显示。 - showSymbol?：
boolean，默认：true，是否显示 symbol标记。 - symbolSize?：
number，默认：4，标记的大小。 - areaStyle?：
{color?,,...}，区域填充样式。设置后显示成区域面积图。 - pie属性：
- center?：
[x, y]，默认：[50%, 50%]]，饼图的中心（圆心）x、y坐标。 - radius?：
number | string | [内半径, 外半径]，默认：[0, '75%']，饼图的半径。 - roseType?：
false | radius | area，默认：false，是否展示成南丁格尔图，通过半径区分数据大小。'radius'：扇区圆心角展现数据的百分比，半径展现数据的大小。'area'：所有扇区圆心角相同，仅通过半径展现数据大小。
- 地图：
- geoIndex?：
number，指定一个geo组件。map和其他series（例如散点图）就可以共享一个geo组件了。
color
- color：
{type,x,y,x2,y2,colorStops}，线性渐变。- type：
linear，渐变类型：线性渐变。 - x,y：
number, number，渐变的起点坐标。 - x2,y2：
number, number，渐变的终点坐标。 - colorStops：
[offset,color]，渐变颜色停靠点。- offset：
number，表示颜色停靠点的位置。介于0-1之间的数字，0表示渐变的起点，1表示渐变的终点 - color：
Color，要应用的颜色，可以是任意有效的 CSS 颜色值。
- offset：
- type：
- color：
{type,x,y,r,colorStops}，径向渐变。- type：
radial，渐变类型：径向渐变。 - x,y：
number, number，圆心坐标。 - r：
number，圆半径。 - colorStops：
[offset,color]，渐变颜色停靠点。- offset：
number，表示颜色停靠点的位置。介于0-1之间的数字，0表示渐变的起点，1表示渐变的终点 - color：
Color，要应用的颜色，可以是任意有效的 CSS 颜色值。
- offset：
- type：
- color：
{image,repeat}，纹理填充。- image：
HTMLImageElement | HTMLCanvasElement，图片元素。 - repeat：
repeat | repeat-x | repeat-y | no-repeat，默认：repeat，是否平铺。
- image：