echarts报表javascript插件简介

简介

ECharts，纯Javascript图表库，基于Canvas，底层依赖ZRender，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图，同时支持任意维度的堆积和多图表混合展现。

名词解析

基本名词

名词	描述
chart	是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis	直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴
xAxis	直角坐标系中的横轴，通常并默认为类目轴
yAxis	直角坐标系中的纵轴，通常并默认为数值轴
grid	直角坐标系中除坐标轴外的绘图网格
legend	图例
dataRange	值域选择，常用于展现地域数据时选择值域范围
toolbox	辅助工具箱
tooltip	气泡提示框，用于展现更详细的数据
dataZoom	数据区域缩放，常用于展现大数据时选择可视范围
series	数据系列

图表名词

名词	描述
line	折线图，堆积折线图，区域图，堆积区域图
bar	柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图
scatter	散点图，气泡图，大规模散点图
k	K线图，蜡烛图，
pie	饼图，圆环图
radar	雷达图，填充雷达图
chord	和弦图
force	力导布局图
map	地图（支持中国及全国34个省市自治区地图）

图表类型

图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：

单图表类型：line

折线图	堆积折线图	区域图	堆积区域图

单图表类型：bar

柱形图	堆积柱形图	条形图	堆积条形图

单图表类型：scatter

散点图	气泡图

单图表类型：k

K线图

单图表类型：pie

饼图	圆环图	南丁格尔玫瑰图

单图表类型：radar

雷达图	填充雷达图

单图表类型：chord

和弦图	多维度选择和弦图

单图表类型：force

力导向布局图。

单图表类型：map

中国地图	全国34个省市自治区	世界地图	子区域模式

引入ECharts

echarts提供多种引入方式，请根据你的项目类型选择合适的方式：

模块化包引入

如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的时，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中很基本也是很重要的规则，务必在上线时做文件的连接压缩。

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',      
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});

模块化单文件引入（推荐）

我们建议你使用单一文件引入，如你所发现的，build文件夹下已经生成了多个单文件见下，根据你的需求使用：

• echarts.js : 经过压缩，包含除地图外的全部图表
• echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
• echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
• echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

如果需要更加定制的打包文件，建议在node环境下安装require.js，build文件夹内为你准备好配置项，可根据你的项目需求，修改config-tpl.js以构建你的最佳配置。

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，你需要配置如下：

//from echarts example
require.config({
    paths:{ 
        'echarts:'./js/echarts',
        'echarts/chart/bar' : './js/echarts',       // 把所需图表指向单文件
        'echarts/chart/line': './js/echarts'
    }
});

require.config配置后后就可以通过动态加载使用echarts

//from echarts example
require(
    [
        'echarts',
        'echarts/chart/line',   // 按需加载所需图表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);

总结来说，模块化如何引入ECharts，你都需要如下4步：

1. 引入一个模块加载器，如esl.js或者require.js
2. 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
3. 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明
4. 动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入

//from echarts example
< script src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
< /script>

可以直接引入的单文件如下：

• echarts-plain.js : 经过压缩，包含除地图外的全部图表
• echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
• echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
• echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

自定义构建echarts单文件

默认echarts通过build目录下的build.sh(build.bat)脚本可以输出是否包含地图，是否压缩和是否打包esl（可以标签引入）排列组合总共6个版本的echarts单文件，大部分场景下已经够用，但是如果你还是觉得很多图表用不到还放在里面非常浪费，可以通过build目录下的build.js来构建一个更加贴身的echarts单文件。

运行build.js只需要一个node环境，然后就可以直接在终端里运行 node build.js 运行构建脚本了，具体示例：

node build.js optimize=true exclude=map,force,line output=echarts.js plain=true

参数说明:

名称	描述
optimize	是否压缩, 默认false
exclude	不打包的图表，多个图表使用逗号分割, 默认使用所有图表
output	输出打包地址，默认为echarts.js
plain	是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false

更详细的配置在build/config-tpl.js目录下，具体的配置项使用可以参考requirejs optimizer的example build file，要注意的的是optimize, include, wrap三个配置项会在build过程中根据输入的参数被改掉，所以不建议直接修改这三个配置项，修改config-tpl.js最常见的场景是zrender和echarts不在同一个目录下从而需要修改zrender的package路径。

初始化

通过require获得echarts接口后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init均返回同一个实例（1.3.8+）。init方法说明如下：

名称	参数	描述
{ECharts} init	{dom} dom,  {string | Object =} theme	初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（暂无）直接传入名称，自定义扩展主题可传入主题对象

图表实例可用方法见方法

引入ECharts后的的初始化代码如下：

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/pie'
    ], 
    function(ec) {
        var myChart = ec.init(document.getElementById('main'));
        myChart.setOption({...});
    }
);

// -----------------------------

// 非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({...});

// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...}); 

熟悉模块化的你可以跳过了下面代码了

// 不习惯模块化的你当然可以
var ECharts;
require(['echarts'], function(ec){
    ECharts = ec;
});
// 是的，把echarts加载后保存起来作为命名空间使用

实例方法

实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用

名称	参数	描述
{self} setOption	{Object} option,  {boolean=} notMerge	万能接口，配置图表实例任何可配置选项（详见option），多次调用时option选项是默认是合并（merge）的， 如果不需求，可以通过notMerger参数为true阻止与上次option的合并。
{Object} getOption	{void}	返回内部持有的当前显示option克隆
{self} setSeries	{Array} series,  {boolean=} notMerge	数据接口，驱动图表生成的数据内容（详见series），效果等同调用setOption({series:{...}})
{Object} getSeries	{void}	返回内部持有的当前显示series克隆，效果同return getOption().series
{self} addData	单组数据：  {number} seriesIdx  {number | Object} data  {boolean=} isHead  {boolean=} dataGrow  {string=} additionData  多组数据添加：  {Array} params	动态数据接口，try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) »  seriesIdx 系列索引  data 增加数据  isHead 是否队头加入，默认，不指定或false时为队尾插入  dataGrow 是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据  additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和dataGrow  多组数据添加时参数为：  params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{self} on	{string} eventName,  {Function} eventListener	事件绑定，支持事件有：  REFRESH，RESTORE，CLICK，HOVER，  DATA_CHANGED，MAGIC_TYPE_CHANGED，DATA_VIEW_CHANGED，  DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED，MAP_SELECTED  事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间作为事件名引用。
{self} un	{string} eventName,  {Function} eventListener	事件解绑定
{self} showLoading	{Object} loadingOption	过渡控制（详见loadingOption），显示loading（读取中）
{self} hideLoading	{void}	过渡控制，隐藏loading（读取中）
{ZRender} getZrender	{void}	获取当前图表所用ZRender实例，可用于添加额外图形或进行深度定制，zrender接口详见ZRender
{string} getDataURL	{string=} imgType	获取当前图表的Base64图片dataURL，imgType 图片类型，支持png|jpeg，默认为png
{Dom} getImage	{string=} imgType	获取一个当前图表的img，imgType 图片类型，支持png|jpeg，默认为png
{self} resize	{void}	ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道， 使用方可以根据自己的需求绑定关心的事件，主动调用resize达到区域更新的效果。
{self} refresh	{void}	刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
{self} restore	{void}	还原图表，各种状态均被清除，还原为最初展现时的状态。
{self} clear	{void}	清空绘画内容，清空后实例可用
{void} dispose	{void}	释放图表实例，释放后实例不再可用

选项

option

图表选项，包含图表实例任何可配置选项

名称	描述
{Array} color	数值系列的颜色列表，默认为null则采用内置颜色，可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{Object} title	标题（详见title），每个图表最多仅有一个标题控件
{Object} legend	图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
{Object} dataRange	值域选择（详见dataRange）,值域范围
{Object} toolbox	工具箱（详见toolbox），每个图表最多仅有一个工具箱
{Object} tooltip	提示框（详见tooltip），鼠标悬浮交互时的信息提示
{Object} dataZoom	数据区域缩放（详见dataZoom）,数据展现范围选择
{Object} grid	直角坐标系内绘图网格（详见grid）
{Array | Object} xAxis	直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array | Object} yAxis	直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series	驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据

title

标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。

名称	默认值	描述
{string} text	''	主标题文本，'\n'指定换行
{string} link	''	主标题文本超链接
{string} subtext	''	副标题文本，'\n'指定换行
{string} sublink	''	副标题文本超链接
{string | number} x	'left'	水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
{string | number} y	'top'	垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
{string} textAlign	null	水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
{color} backgroundColor	'rgba(0,0,0,0)'	标题背景颜色，默认透明
{string} borderColor	'#ccc'	标题边框颜色
{number} borderWidth	0	标题边框线宽，单位px，默认为0（无边框）
{number | Array} padding	5	标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
{number} itemGap	10	主副标题纵向间隔，单位px，默认为10
{Object} textStyle	{ fontSize: 18,  fontWeight: 'bolder',  color: '#333' }	主标题文本样式（详见textStyle）
{Object} subtextStyle	{color: '#aaa'}	副标题文本样式（详见textStyle）

legend

图例，每个图表最多仅有一个图例。try this »

名称	默认值	描述
{string} orient	'horizontal'	布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
{string | number} x	'center'	水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
{string | number} y	'top'	垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
{color} backgroundColor	'rgba(0,0,0,0)'	图例背景颜色，默认透明
{string} borderColor	'#ccc'	图例边框颜色
{number} borderWidth	0	图例边框线宽，单位px，默认为0（无边框）
{number | Array} padding	5	图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
{number} itemGap	10	各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图
{Object} textStyle	{color: '#333'}	默认只设定了图例文字颜色（详见textStyle）
{Boolean} selectedMode	true	选择模式，默认开启图例开关
{Object} selected	null	配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入，try this »
{Array } data	[ ]	图例内容数组，数组项为{string}，每一项代表一个系列的name。 使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。

dataRange

值域选择，每个图表最多仅有一个值域控件。try this »

名称	默认值	描述
{string} orient	'vertical'	布局方式，默认为垂直布局，可选为：'horizontal' | 'vertical'
{string | number} x	'left'	水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
{string | number} y	'bottom'	垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
{color} backgroundColor	'rgba(0,0,0,0)'	值域控件背景颜色，默认透明
{string} borderColor	'#ccc'	值域控件边框颜色
{number} borderWidth	0	值域控件边框线宽，单位px，默认为0（无边框）
{number | Array} padding	5	值域控件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
{number} itemGap	10	各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图
{number} min	null	指定的最小值，eg: 0，默认无，必须参数
{number} max	null	指定的最大值，eg: 100，默认无，必须参数
{number} precision	0	小数精度，默认为0，无小数点
{number} splitNumber	5	分割段数，默认为5，为0时为线性渐变
{Boolean} calculable	false	是否启用值域漫游，启用后无视splitNumber，值域显示为线性渐变
{Boolean} realtime	true	值域漫游是否实时显示
{Array} color	['#1e90ff','#f0ffff']	值域颜色标识，颜色数组长度必须>=2，颜色代表从数值高到低的变化，即颜色数组低位代表数值高的颜色标识
{Array} text	null	值域文字显示，splitNumber生效时默认以计算所得数值作为值域文字显示，可指定长度为2的文本数组显示简介的值域文本，如['高', '低']，'\n'指定换行
{Object} textStyle	{color: '#333'}	默认只设定了值域控件文字颜色（详见textStyle）

toolbox

工具箱，每个图表最多仅有一个工具箱。

名称	默认值	描述
{Boolean} show	false	显示策略，可选为：true（显示） | false（隐藏）
{string} orient	'horizontal'	布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
{string | number} x	'center'	水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
{string | number} y	'top'	垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
{color} backgroundColor	'rgba(0,0,0,0)'	工具箱背景颜色，默认透明
{string} borderColor	'#ccc'	工具箱边框颜色
{number} borderWidth	0	工具箱边框线宽，单位px，默认为0（无边框）
{number | Array} padding	5	工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
{number} itemGap	10	各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图
{number} itemSize	16	工具箱icon大小，单位（px）
{Array } color	['#1e90ff','#22bb22','#4b0082','#d2691e']	工具箱icon颜色序列，循环使用
{Object} feature	{}	启用功能，目前支持feature见下
{Boolean} showTitle	true	是否显示工具箱文字提示，默认启用
{Object} featureTitle	{ mark : '辅助线开关', markUndo : '删除辅助线', markClear : '清空辅助线', dataZoom : '区域缩放', dataZoomReset : '区域缩放后退', dataView : '数据视图', lineChart : '折线图切换', barChart : '柱形图切换', restore : '还原', saveAsImage : '保存为图片' }	工具箱文字提示默认话术
{Object} featureImageIcon	{}	工具箱自定义图标，格式同featureTitle，传入图片地址（路径）

feature : {
    mark : true,                    // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
    dataZoom : true,                // 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
    magicType:['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
    dataView : true,                // 数据视图，上图icon左数8，打开数据视图
    restore : true                  // 还原，复位原始图表，上图icon左数9，还原
    saveAsImage : true              // 保存为图片，上图icon左数10，保存
}
                    

feature选项

• mark，辅助线标志
  • 简单传入true启动辅助线标志功能
  • 传入lineStyle（详见lineStyle）控制线条样式
• dataView，数据视图
  • 简单传入true启动数据视图
  • 传入{Object}设置更多属性
    • {boolean=} readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
    • {Function=} optionToContent 自主编排数据视图的显示内容
    • {Function=} contentToOption 当数据视图readOnly为false时，会出现刷新按钮，如果是自主编排的显示内容，如何翻转也请自理
    • {Array=} lang 数据视图上有三个话术，默认是['Data View', 'close', 'refresh']，如需改写，可自定义
• magicType，图表类型切换，当前仅支持直角系下的折线图、柱状图转换
  • ['line', 'bar']
• saveAsImage，保存图片（IE8-不支持）
  • 简单传入true启动保存功能
  • 传入{Object}设置更多属性
    • {string=} type 默认保存图片类型为'png'，需改为'jpeg'
    • {string=} name 指定图片名称，如不指定，则用图表title标题，如无title标题则图片名称默认为“ECharts”
    • {string=} lang 非IE浏览器支持点击下载，有保存话术，默认是“点击保存”，可修改

tooltip

提示框,鼠标悬浮交互时的信息提示。try this »

名称	默认值	描述
{Boolean} show	true	显示策略，可选为：true（显示） | false（隐藏）
{Boolean} showContent	true	tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为falase， 可选为：true（显示） | false（隐藏）
{string} trigger	'item'	触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
{string | Function} formatter	null	内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
{string | Function} islandFormatter	'{a} < br/>{b} : {c}'	拖拽重计算独有，数据孤岛内容格式器：{string}（Template） | {Function}，见表格下方
{number} showDelay	20	显示延迟，添加显示延迟可以避免频繁切换，单位ms
{number} hideDelay	100	隐藏延迟，单位ms
{number} transitionDuration	0.4	动画变换时长，单位s
{color} backgroundColor	'rgba(0,0,0,0.7)'	提示背景颜色，默认为透明度为0.7的黑色
{string} borderColor	'#333'	提示边框颜色
{number} borderRadius	4	提示边框圆角，单位px，默认为4
{number} borderWidth	0	提示边框线宽，单位px，默认为0（无边框）
{number | Array} padding	5	提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
{Object} axisPointer	{ type : 'line', lineStyle : {   color: '#48b',   width: 2,   type: 'solid' }, areaStyle : {   size: 'auto',   color: 'rgba(150,150,150,0.3)' } }	坐标轴指示器，坐标轴触发有效，默认type为line，可选为：'line' | 'shadow' | 'none'(无)， lineStyle设置直线指示器（详见lineStyle）, areaStyle设置阴影指示器（详见areaStyle），areaStyle.size默认为'auto'自动计算，可指定具体宽度
{Object} textStyle	{ color:'#fff' }	文本样式，默认为白色字体（详见textStyle）

内容格式器formatter：

• {string}，模板（Template），其变量为：
  • {a} | {a0}
  • {b} | {b0}
  • {c} | {c0}
  • {d} | {d0} （部分图表类型无此项）
  • 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
  • 其中变量a、b、c在不同图表类型下代表数据含义为：
    • 折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）
    • 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
    • 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）
    • 弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)
    • 力导向图 :
      • 节点 : a（类目名称），b（节点名称），c（节点值）
      • 边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）
  • {Function}，传递参数列表如下：
    • params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]
    • ticket : 异步回调标识
    • callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html

  触发类型：

  item触发	axis触发

  dataZoom

  数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。try this »

  名称	默认值	描述
  {Boolean} show	false	是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据。
  {string} orient	'horizontal'	布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
  {number} x	自适应	水平安放位置，默认为根据grid参数适配，纵向布局默认左侧，可指定 {number}（左上角x坐标，单位px）
  {number} y	自适应	垂直安放位置，默认为根据grid参数适配，纵向布局默认下方，可指定 {number}（左上角y坐标，单位px）
  {number} width	自适应 | 30	指定宽度，横向布局时默认为根据grid参数适配，纵向布局是默认为30，可指定 {number}（宽度，单位px）
  {number} height	自适应 | 30	指定高度，纵向布局时默认为根据grid参数适配，横向布局是默认为30，可指定 {number}（高度，单位px）
  {color} backgroundColor	'#eee'	背景颜色
  {color} dataBackgroundColor	'#ccc'	数据缩略背景颜色
  {color} fillerColor	'rgba(50,205,50,0.4)'	选择区域填充颜色
  {color} handleColor	'rgba(70,130,180,0.8)'	控制手柄颜色
  {Array | number} xAxisIndex	null	当不指定时默认控制所有横向类目，可通过数组指定多个需要控制的横向类目坐标轴Index，仅一个时可直接为数字
  {Array | number} yAxisIndex	null	当不指定时默认控制所有纵向类目，可通过数组指定多个需要控制的纵向类目坐标轴Index，仅一个时可直接为数字
  {number} start	0	数据缩放，选择起始比例，默认为0，从首个数据起选择。
  {number} end	100	数据缩放，选择结束比例，默认为100（%），到最后一个数据选择结束。
  {Boolean} realtime	false	缩放变化是否实时显示，建议性能较低的浏览器或数据量巨大时不启动实时效果。
  {Boolean} zoomLock	false	数据缩放锁，默认为false，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。

  grid

  直角坐标系内绘图网格

  名称	默认值	描述
  {number} x	80	直角坐标系内绘图网格左上角横坐标，数值单位px
  {number} y	60	直角坐标系内绘图网格左上角纵坐标，数值单位px
  {number} x2	80	直角坐标系内绘图网格右下角横坐标，数值单位px
  {number} y2	60	直角坐标系内绘图网格右下角纵坐标，数值单位px
  {number} width	自适应	直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2，见下图。
  {number} height	自适应	直角坐标系内绘图网格（不含坐标轴）高度，默认为总宽度 - y - y2，数值单位px，指定height后将忽略y2，见下图。
  {color} backgroundColor	'#fff'	背景颜色。
  {number} borderWidth	1	边框线宽
  {color} borderColor	'#ccc'	边框颜色。

  xAxis

  直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值。最多同时存在2条横轴，单条横轴时可指定安放于grid的底部（默认）或顶部，2条同时存在时位置互斥，默认第一条安放于底部，第二条安放于顶部。

  坐标轴有两种类型，类目型和数值型（区别详见axis），横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型，具体参数详见axis。

  yAxis

  直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值。最多同时存在2条纵轴，单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。

  坐标轴有两种类型，类目型和数值型（区别详见axis），纵轴通常为数值型，但条形图时则纵轴为类目型，具体参数详见axis。

  axis

  坐标轴有两种类型，类目型和数值型，他们的区别在于：

  • 类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标
  • 数值型：需要指定数值区间，坐标轴内包含数值区间内容全部坐标

  下面是坐标轴的全部选项，其中个别选项仅在类目型或数值型时有效，请注意适用类型。try this »

  名称	默认值	适用类型	描述
  {string} type	'category' | 'value'	通用	坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
  {string} position	'bottom' | 'left'	通用	坐标轴类型，横轴默认为类目型'bottom'，纵轴默认为数值型'left'，可选为：'bottom' | 'top' | 'left' | 'right'
  {string} name	''	数值型	坐标轴名称，默认为空
  {string} nameLocation	'end'	数值型	坐标轴名称位置，默认为'end'，可选为：'start' | 'end'
  {Object} nameTextStyle	{}	数值型	坐标轴名称文字样式，默认取全局配置，颜色跟随axisLine主色，可设
  {Boolean} boundaryGap	true	类目型	类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
  {Array} boundaryGap	[0, 0]	数值型	数值轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]
  {number} min	null	数值型	指定的最小值，eg: 0，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[0]
  {number} max	null	数值型	指定的最大值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1]
  {Boolean} scale	false	数值型	脱离0值比例，放大聚焦到最终_min，_max区间
  {number} precision	0	数值型	小数精度，默认为0，无小数点
  {number} power	100	数值型	整数精度，默认为100，个位和百位为0
  {number} splitNumber	5	数值型	分割段数，默认为5
  {Object} axisLine	{show : true}	通用	坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
  {Object} axisTick	{show : false}	通用	坐标轴小标记，默认不显示，属性show控制显示与否，属性length控制线长，属性lineStyle（详见lineStyle）控制线条样式
  {Object} axisLabel	{show : true}	通用	坐标轴文本标签，详见axis.axisLabel
  {Object} splitLine	{show : true}	通用	分隔线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
  {Object} splitArea	{show : false}	通用	分隔区域，默认不显示，属性show控制显示与否，属性areaStyle（详见areaStyle）控制区域样式
  {Array} data	[]	类目型	类目列表，同时也是label内容，详见axis.data

  boundaryGap端空白策略

  设置	效果
  boundaryGap: true
  boundaryGap: false

  scale策略

  设置	scale: false	scale: true
  效果

  axis属性说明

  axis.axisLine

  坐标轴线，默认显示且带如下样式：

  名称	默认值	适用类型	描述
  {Boolean} show	true	通用	是否显示，默认为true，设为false后下面都没意义了
  {Object} lineStyle	{color: '#48b', width: 2, type: 'solid'}	通用	属性lineStyle控制线条样式，（详见lineStyle）

  axis.axisTick

  坐标轴小标记，默认不显示，默认样式见下：

  名称	默认值	适用类型	描述
  {Boolean} show	false	通用	是否显示，默认为false，设为true后下面为默认样式
  {string | number} interval	'auto'	类目型	小标记显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number}（用户指定选择间隔）
  {boolean} onGap	null	类目型	小标记是否显示为间隔，默认等于boundaryGap
  {boolean} inside	false	通用	小标记是否显示为在grid内部，默认在外部
  {number} length	4	通用	属性length控制线长
  {Object} lineStyle	{color: '#ccc', width: 1, type: 'solid'}	通用	属性lineStyle控制线条样式，（详见lineStyle）

  axis.axisLabel

  坐标轴文本标签选项

  名称	默认值	适用类型	描述
  {Boolean} show	true	通用	是否显示，默认为true，设为false后下面都没意义了
  {string | number} interval	'auto'	类目型	标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number}（用户指定选择间隔）
  {number} rotate	0	通用	标签旋转角度，默认为0，不旋转，正直为逆时针，负值为顺时针，可选为：-90 ~ 90
  {number} margin	8	通用	坐标轴文本标签与坐标轴的间距，默认为8，单位px
  {string | Function} formatter	null	通用	间隔名称格式器：{string}（Template） | {Function}
  {Object} textStyle	{color: '#333'}	通用	文本样式（详见textStyle），其中当坐标轴为数值型时，color接受方法回调，实现个性化的颜色定义，support #226 »

  间隔名称格式器formatter：

  • {string}，模板（Template），其变量为：
    • {value}: 内容或值
  • {Function}，传递参数同模板变量：
    • eg：function(value){return "星期" + "日一二三四五六".charAt(value);'}

  axis.splitLine

  分隔线，默认显示且带如下样式：

  名称	默认值	适用类型	描述
  {Boolean} show	true	通用	是否显示，默认为true，设为false后下面都没意义了
  {boolean} onGap	null	类目型	分隔线是否显示为间隔，默认等于boundaryGap
  {Object} lineStyle	{color: ['#ccc'], width: 1, type: 'solid'}	通用	属性lineStyle控制线条样式，（详见lineStyle）

  axis.splitArea

  分隔区域，默认不显示：

  名称	默认值	适用类型	描述
  {Boolean} show	false	通用	是否显示，默认为false，设为true后带如下默认样式
  {boolean} onGap	null	类目型	分隔区域是否显示为间隔，默认等于boundaryGap
  {Object} areaStyle	{color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}	通用	属性areaStyle（详见areaStyle）控制区域样式，颜色数组实现间隔变换。

  axis.data

  类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行，如:

  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']
  

  当需要对个别标签进行个性化定义时，数组项可用对象，接受textStyle设置个性化标签，如：

  [
      'Jav', 'Feb', 'Mar',
       {
          value:'Apr',            //文本内容，如指定间隔名称格式器formatter，则这个值将被作为模板变量值或参数传入
          textStyle:{             //详见textStyle
              color : 'red'
              ...
          }
       },
      'May', '...'
  ]
  

  polar

  极坐标：

  名称	默认值	描述
  {Array} center	['50%', '50%']	圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%
  {number} radius	'75%'	半径，支持绝对值（px）和百分比，百分比计算min(width, height) / 2 * 75%,
  {number} startAngle	90	开始角度, 有效输入范围：[-180,180]
  {number} splitNumber	5	分割段数，默认为5
  {Object} name	{ show:true,  formatter:null, textStyle:{color:#333} }	坐标轴名称
  {Array} boundaryGap	[0, 0]	数值轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]
  {Boolean} scale	false	脱离0值比例，放大聚焦到最终_min，_max区间
  {number} precision	0	小数精度，默认为0，无小数点
  {number} power	100	整数精度，默认为100，个位和百位为0
  {Object} axisLine	{show : true}	坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
  {Object} axisLabel	{show : false}	坐标轴文本标签，详见axis.axisLabel
  {Object} splitLine	{show : true}	分隔线，默认显示，属性show控制显示与否，属性lineStyle（详见lineStyle）控制线条样式
  {Object} splitArea	{show : true}	分隔区域，默认不显示，属性show控制显示与否，属性areaStyle（详见areaStyle）控制区域样式
  {Array} indicator	[]	雷达指标列表，同时也是label内容，例子见下

  indicator : [
      {name : '外观'},
      {name : '拍照', min : 0},
      {name : '系统', min : 0, max : 100},
      {name : '性能', axisLabel: {...}},
      {name : '屏幕'}
  ]
  

  series

  驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：

  名称	默认值	适用类型	描述
  {string} name	null	通用	系列名称，如启用legend，该值将被legend.data索引相关
  {Object} tooltip	null	通用	提示框样式，仅对本系列有效，如不设则用option.tooltip（详见tooltip）,鼠标悬浮交互时的信息提示
  {string} type	null	通用	图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：  'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）   'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
  {Object} itemStyle	null	通用	图形样式（详见itemStyle）
  {string} stack	null	折线图，柱状图	组合名称，多组数据的堆积图时使用，eg：stack:'group1'，则series数组中stack值等于'group1'的数据做堆积计算
  {number} xAxisIndex	0	折线图，柱状图，散点图 ，K线图	xAxis坐标轴数组的索引，指定该系列数据所用的横坐标轴
  {number} yAxisIndex	0	折线图，柱状图，散点图，K线图	yAxis坐标轴数组的索引，指定该系列数据所用的纵坐标轴
  {number | string} barGap	'30%'	柱状图	柱间距离，默认为柱形宽度的30%，可设固定值
  {number | string} barCategoryGap	'20%'	柱状图	类目间柱形距离，默认为类目间距的20%，可设固定值
  {number} barMinHeight	0	柱状图	柱条最小高度，可用于防止某item的值过小而影响交互
  {number} barWidth	自适应	柱状图 ，K线图	柱条（K线蜡烛）宽度，不设时自适应
  {number} barMaxWidth	自适应	K线图	K线蜡烛最大宽度，不设时自适应
  {string} symbol	null	折线图，散点图	标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有： 'circle' | 'rectangle' | 'triangle' | 'diamond' | 'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'  另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星  自1.3.5起支持symbol为自定义图片，格式为'image://' + '图片路径'， 如'image://../asset/ico/favicon.png'  详见例子 this 》
  {number | Function} symbolSize	2 | 4	折线图 (2)，散点图(4)	标志图形大小，可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组）
  {number} symbolRotate	null	折线图 ，散点图	标志图形旋转角度[-180,180]
  {Boolean} showAllSymbol	false	折线图	标志图形默认只有主轴显示（随主轴标签间隔隐藏策略），如需全部显示可把showAllSymbol设为true
  {Boolean} smooth	false	折线图	平滑曲线显示
  {boolean} large	false	散点图	启动大规模散点图
  {number} largeThreshold	2000	散点图	大规模散点图自动切换阀值，large为true下有效
  {Array} center	['50%', '50%']	饼图	圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%
  {number | Array} radius	[0, '75%']	饼图	半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 传数组实现环形图，[内半径，外半径]
  {number} startAngle	90	饼图	开始角度, 有效输入范围：[-180,180]
  {number} minAngle	0	饼图	最小角度，可用于防止某item的值过小而影响交互
  {string} roseType	null	饼图	南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
  {number} selectedOffset	10	饼图	选中是扇区偏移量
  {string} selectedMode	null	饼图，地图	选中模式，默认关闭，可选single，multiple
  {string} mapType	'china'	地图	地图类型，支持world，china及全国34个省市自治区。省市自治区的mapType直接使用简体中文：  新疆， 西藏， 内蒙古， 青海， 四川， 黑龙江， 甘肃， 云南， 广西， 湖南， 陕西，  广东，吉林， 河北， 湖北， 贵州， 山东， 江西， 河南， 辽宁， 山西， 安徽， 福建，  浙江， 江苏，重庆， 宁夏， 海南， 台湾， 北京， 天津， 上海， 香港， 澳门'  支持子区域模式，通过主地图类型扩展出所包含的子区域地图，格式为'主地图类型|子区域名称'，如  'world|Brazil'，'china|广东'，详见例子 this 》
  {Boolean} hoverable	true	地图	非数值显示（如仅用于显示标注标线时），可以通过hoverable:false关闭区域悬浮高亮
  {Object} mapLocation	{x:'center',y:'center'}	地图	地图位置设置，默认只适应上下左右居中可配x，y，width，height，任意参数为空都将根据其他参数自适应
  {string} mapValueCalculation	'sum'	地图	地图数值计算方式，默认为加和，可选为：'sum'（总数） | 'average'（均值）
  {number} mapValuePrecision	0	地图	地图数值计算结果小数精度，mapValueCalculation为average时有效，默认为取整，需要小数精度时设置大于0的整数
  {boolean} showLegendSymbol	true	地图	显示图例颜色标识（系列标识的小圆点），存在legend时生效
  {Object} roam	false	地图	是否开启滚轮缩放和拖拽漫游
  {Object} nameMap	null	地图	自定义地区的名称映射，如{'China' : '中国'}
  {Object} textFixed	null	地图	地区的名称文本位置修正，数值单位为px，正直为左下偏移，负值为右上偏移，如{'China' : [10, -10]}
  {Object} geoCoord	null	地图	通过绝对经纬度指定地区的名称文本位置，如{'Islands':[113.95, 22.26]}，香港离岛区名称显示定位到东经113.95，北纬22.26上
  {Array} categories	[]	力导向	力导向图中节点的分类, 每一项有name和itemStyle两个属性，itemStyle配置详见itemStyle
  {Array} nodes	[]	力导向	力导向图的顶点数据, 每一项都有 name, value, category三个属性，分别表示节点的名称， 节点的值和节点的分类
  {Array} links	[]	力导向	力导向图的边数据, 每一项都有 source, target, weight三个属性, source和target是顶点的索引值， 边的权重(weight)越大则两个顶点之间的联系越大(最后稳定之后的距离越小)
  {number} minRadius	10	力导向	顶点数据映射成圆半径后的最小半径
  {number} maxRadius	20	力导向	顶点数据映射成圆半径后的最大半径
  {number} density	1	力导向	顶点的密度，影响布局时顶点运动的速度，值越大速度越慢
  {number} attractiveness	1	力导向	顶点之间的引力系数，影响到布局稳定之后的大小，值越大则稳定之后顶点之间的距离越小
  {number} padding	2	弦图	每个sector之间的间距(用角度表示)
  {string} sort	'none'	弦图	数据排序， 可以取none, ascending, descending
  {string} sortSub	'none'	弦图	数据排序（弦）， 可以取none, ascending, descending
  {Boolean} showScale	false	弦图	是否显示刻度
  {Boolean} showScaleText	false	弦图	是否显示刻度文字
  {Boolean} clockWise	false	饼图，弦图	显示是否顺时针
  {Array} matrix	[[]]	弦图	关系数据，用二维数组表示，项 [i][j] 的数值表示 i 到 j 的关系数据
  {Array} data	[]	通用	数据（详见series.data）
  {Array} markPoint	{}	通用	标注（详见series.markPoint）
  {Array} data	{}	通用	标线（详见series.markLine）

  series.data

  系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值，如:

  [12, 34, 56, ..., 10, 23]

  当某类目对应数据不存在时（ps：'不存在' 不代表值为 0），可用'-'表示，无数据在折线图中表现为折线在该点断开，在柱状图中表现为该点无柱形，如：

  [12, '-', 56, ..., 10, 23]

  当需要对个别内容进行个性化定义时，数组项可用对象，如：

  [
      12, 34,
      {
          value : 56,
          tooltip:{},             //自定义特殊tooltip，仅对该item有效，详见tooltip
          itemStyle:{}            //自定义特殊itemStyle，仅对该item有效，详见itemStyle
      },
      ..., 10, 23
  ]
  

  当图表类型为scatter（散点图或气泡图）时，其数值设置比较特殊，他的横纵坐标轴都可能为数值型，并且气泡图时需要指定气泡大小，所以scatter型图表设置为：

  [
      {
          value : [10, 25, 5]     //[xValue, yValue, rValue]，数组内依次为横值，纵值，大小(可选)
      },
      [12, 15, 1]
      ...
  ]
  

  当图表类型为K线图时，其数值设置比较特殊，他的数值内容为长度为4的数组，分别代表[开盘价，收盘价，最低值，最高值]

  [
      {
          value : [2190.1, 2148.35, 2126.22, 2190.1] // // 开盘，收盘，最低，最高
      },
      [2242.26, 2210.9, 2205.07, 2250.63],
      ...
  ]
  

  当图表类型为饼图时，需要说明每部分数据的名称name，可设置选中状态，所以设置为：

  [
      {
          value : 12，
          name : 'apple'          //每部分数据的名称
      },
      ...
  ]
  

  当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态，所以设置为：

  [
      {
          name: '北京',
          value: 1234,
          selected: true
      },
      {
          name: '天津',
          value: 321
      },
      ...
  ]
  

  series.markPoint

  系列中的数据标注内容

  名称	默认值	描述
  {string} symbol	'pin'	标注类型，同series中的symbol
  {number | Function} symbolSize	10	标注大小，同series中的symbolSize
  {number} symbolRotate	null	标注图形旋转角度，同series中的symbolRotate
  {number} itemStyle	{...}	标注图形样式属性，同series中的itemStyle
  {Object} geoCoord	{}	地图特有，标注图形定位坐标，同series中的geoCoord
  {Array} data	[]	标注图形数据，见下

  series.markPoint.data

  标注的数据内容数组，最直接的数据项可直接指定标注位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:

  data : [
      {name: '标注1', value: 100, x: 50, y: 20},
      {name: '标注2', value: 200, x: 150, y: 120},
      ...
  ]

  在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：

  data : [
      {name: '标注1', value: 100, xAxis: 1, yAxis: 20},      // 当xAxis为类目轴时，数值1会被理解为类目轴的index
      {name: '标注2', value: 100, xAxis: '周三', yAxis: 20}, // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
      {name: '标注3', value: 200, xAxis: 10, yAxis: 20},     // 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
      ...
  ]

  标注数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标注，并且能够随地图漫游缩放，需要为markPoint提供一份geoCoord，如下

  data : [
      {name: '北京', value: 100},
      {name: '上海', value: 200},
      ...
  ],
  geoCoord : {
      "北京":[116.46,39.92],           // 支持数组[经度，维度]
      "上海": {x: 121.48, y: 31.22},   // 支持对象{x:经度,y:纬度}
      ...
  }
  

  series.markLine

  系列中的数据标线内容

  名称	默认值	描述
  {Array | string} symbol	['circle', 'arrow']	标线起始和结束的symbol介绍类型，如果都一样，可以直接传string，同series中的symbol
  {Array | number | Function} symbolSize	[2, 4]	标线起始和结束的symbol大小，半宽（半径）参数，如果都一样，可以直接传number或function，同series中的symbolSize
  {Array | number} symbolRotate	null	标线起始和结束的symbol旋转控制，同series中的symbolRotate
  {number} itemStyle	{...}	标线图形样式属性，同series中的itemStyle
  {Object} geoCoord	{}	地图特有，标线图形定位坐标，同series中的geoCoord
  {Array} data	[]	标线图形数据，见下

  series.markLine.data

  标线的数据内容数组，最直接的数据项可直接指定标线起始和结束位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:

  data : [
      [
          {name: '标线1起点', value: 100, x: 50, y: 20}, 
          {name: '标线1终点', x: 150, y: 120}
      ],
      [
          {name: '标线2起点', value: 200, x: 30, y: 80}, 
          {name: '标线2终点', x: 270, y: 190}
      ],
      ...
  ]

  在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标线基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：

  data : [
      [
          {name: '标线1起点', value: 100, xAxis: 1, yAxis: 20},      // 当xAxis为类目轴时，数值1会被理解为类目轴的index
          {name: '标线1终点', xAxis: '周三', yAxis: 20},             // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
      ],
      [
          {name: '标线2起点', value: 200, xAxis: 10, yAxis: 20},     // 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
          {name: '标线2终点', xAxis: 270, yAxis: 190}
      ],
      ...
  ]

  标线数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标线，并且能够随地图漫游缩放，需要为markLine提供一份geoCoord，如下

  data : [
      [
          {name: '北京', value: 100},
          {name:'上海'}
      ],
      [
          {name: '北京', value: 100},
          {name:'广州'}
      ],
      ...
  ],
  geoCoord : {
      "北京":[116.46,39.92],           // 支持数组[经度，维度]
      "广州":[113.23,23.16],
      "上海": {x: 121.48, y: 31.22},   // 支持对象{x:经度,y:纬度}
      ...
  }
  

  itemStyle

  图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：

  itemStyle: {
      normal: {
          ...
      },
      emphasis: {
          ...
      }
  }
  

  其中normal和emphasis属性为对象，其包含：

  名称	默认值	适用类型	描述
  {color} color	图表各异	通用	颜色，主色
  {Object} lineStyle	图表各异	折线图，K线图 ，地图，markLine	线条样式，详见lineStyle
  {Object} areaStyle	图表各异	堆积折线图，地图	区域样式，详见areaStyle
  {Object} chordStyle	图表各异	和弦图	弦样式，详见chordStyle
  {string} borderColor	'#fff'	柱形图，折线图（symbol），散点图（symbole），饼图，markPoint	柱形边框颜色
  {number} borderRadius	0	柱形图	柱形边框圆角，单位px，默认为0
  {number} borderWidth	1	柱形图，折线图（symbol），散点图（symbole），饼图，markPoint	柱形边框线宽，单位px，默认为1
  {Object} label	{show: true, position:'outer'}	折线图，柱形图，K线图，散点图，饼图 ，地图，力导向，markPoint，markLine	标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，地图标签不可指定位置  折线图，柱形图，K线图，散点图可指定position见下
  {Object} labelLine	{show: true}	饼图	饼图标签视觉引导线，默认显示

  其中标签label属性为对象，其包含：

  名称	默认值	描述
  {Boolean} show	true	标签显示策略，可选为：true（显示） | false（隐藏）
  {string} position	'outer' | null	标签显示位置，地图标签不可指定位置  饼图可选为：'outer'（外部） | 'inner'（内部），  折线图，柱形图，K线图，散点图默认根据布局自适应为'top'或者'right'，可选的还有：'inside'|'left'|'bottom'
  {string | Function} formatter	null	标签文本格式器，仅饼图支持，同Tooltip.formatter，不支持回调
  {Object} textStyle	null	标签的文本样式（详见textStyle）

  其中饼图标签视觉引导线labelLine属性为对象，其包含：

  名称	默认值	描述
  {Boolean} show	true	饼图标签视觉引导线显示策略，可选为：true（显示） | false（隐藏）
  {number} length	40	线长 ，从外圆边缘起计算，可为负值
  {Object} lineStyle	各异	线条样式，详见lineStyle

  通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略，比如希望饼图文字标签默认隐藏，并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域，可以如下设置：

  itemStyle: {
      normal: {
          label: {
              show: false
          }
          labelLine: {
              show: false
          }
      } ,
      emphasis: {
          label: {
              show: true,
              position: 'outer'
          }
          labelLine: {
              show: true,
              lineStyle: {
                  color: 'red'
              }
          }
      }
  }
  

  高度个性化：

  • 折线图 try this »
  • 柱状图 try this »
  • K线图 try this »
  • 散点图try this »
  • 饼图 try this »
  • 和弦图 try this »
  • 力导向布局 try this »
  • 地图 try this »

  lineStyle

  线条（线段）样式

  名称	默认值	描述
  {color} color	各异	颜色
  {string} type	'solid'	线条样式，可选为：'solid' | 'dotted' | 'dashed'
  {number} width	各异	线宽
  {color=} shadowColor	rgba(0,0,0,0)	折线主线(IE8+)有效，阴影色彩，支持rgba
  {number=} shadowBlur	5	折线主线(IE8+)有效，阴影模糊度，大于0有效
  {number=} shadowOffsetX	3	折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
  {number=} shadowOffsetY	3	折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上

  areaStyle

  区域填充样式

  名称	默认值	描述
  {color} color	各异	颜色
  {string} type	'default'	填充样式，目前仅支持'default'(实填充)

  textStyle

  文字样式

  名称	默认值	描述
  {color} color	各异	颜色
  {string} decoration	'none'	修饰，仅对tooltip.textStyle生效
  {string} align	各异	水平对齐方式，可选为：'left' | 'right' | 'center'
  {string} baseline	各异	垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
  {string} fontFamily	'Arial, Verdana, sans-serif'	字体系列
  {number} fontSize	12	字号 ，单位px
  {string} fontStyle	'normal'	样式，可选为：'normal' | 'italic' | 'oblique'
  {string | number} fontWeight	'normal'	粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900

  loadingOption

  过渡显示，loading（读取中）的选项。try this »

  名称	默认值	描述
  {string} text	'Loading...'	显示话术 ，'\n'指定换行
  {string | number} x	'center'	水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
  {string | number} y	'center'	垂直安放位置，默认为全图居中，可选为：'center' | 'bottom' | 'top' | {number}（y坐标，单位px）
  {Object} textStyle	null	显示话术的文本样式（详见textStyle）
  {string} effect	'spin'	loading效果，可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
  {Object} effectOption	null	loading效果选项，详见zrender
  {number} progress	null	指定当前进度[0~1]，个别效果有效。

  backgroundColor

  {color} 'rgba(0,0,0,0)'，全图默认背景

  color

  {Array} [ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' ]，默认颜色序列

  symbolList

  {Array} [ 'circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' ]，默认标志图形类型列表，循环使用

  renderAsImage

  {boolean | string} false，非IE8-支持渲染为图片，可设为true或指定图片格式（png | jpeg），渲染为图片后实例依然可用（如setOption，resize等），但各种交互失效

  calculable

  {Boolean} false，是否启用拖拽重计算特性，默认关闭

  calculableColor

  {color} 'rgba(255,165,0,0.6)'，拖拽重计算提示边框颜色

  calculableHolderColor

  {color} '#ccc'，可计算占位提示颜色

  nameConnector

  {string} ' & '，数据合并名字间连接符

  valueConnector

  {string} ' : '，数据合并名字与数值间连接符

  animation

  {Boolean} true，是否启用图表初始化动画，默认开启，建议IE8-关闭

  animationDuration

  {number} 2000，动画时长，单位ms，支持多级控制

  animationEasing

  {string} 'BounceOut'，主元素的缓动效果，支持多级控制，详见zrender.animation.easing，可选有：
  'Linear',
  'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',
  'CubicIn', 'CubicOut', 'CubicInOut',
  'QuarticIn', 'QuarticOut', 'QuarticInOut',
  'QuinticIn', 'QuinticOut', 'QuinticInOut',
  'SinusoidalIn', 'SinusoidalOut', 'SinusoidalInOut',
  'ExponentialIn', 'ExponentialOut', 'ExponentialInOut',
  'CircularIn', 'CircularOut', 'CircularInOut',
  'ElasticIn', 'ElasticOut', 'ElasticInOut',
  'BackIn', 'BackOut', 'BackInOut',
  'BounceIn', 'BounceOut', 'BounceInOut'
  

  多级控制设计

  简单的说，你可以通过这三级满足不同level的定制和个性化需求：

  • 通过 option.* 设置全局统一配置；
  • 通过 option.series.* 设置特定系列特殊配置，其优先级高于 option 内的同名配置；
  • 通过 option.series.data.* 设置特定数据项的特殊配置，最高优先级；

  附录：地图扩展

  支持标准GeoJson动态扩展地图类型，try HK 》 USA 》

  // step1: 找到目标地区的geoJson数据文件，如HK_geo.json
  
  // step2: 在require('echarts/util/mapData/params').params中命名你的地图类型，如HK
  // step3: 命名赋值为对象{}, 实现接口方法getGeoJson，通过callback返回目标地区geoJson数据文件
  require('echarts/util/mapData/params').params.HK = {
      getGeoJson: function(callback) {
          $.getJSON('geoJson/HK_geo.json',callback);
      }
  }
  
  // step3*: 对于数据地图类型，一般不需要特殊的投射算法，ECharts统一使用了简化的投射算法，因而对于个别地区可能需要人为调整，可以通过specialArea指定个别地区安的经纬度坐标和区间大小，如
  require('echarts/util/mapData/params').params.USA = {
      getGeoJson: function(callback) {
          $.getJSON('geoJson/USA_geo.json', callback);
      },
      specialArea : {
          Alaska : {              // 把阿拉斯加移到美国主大陆左下方
              left : -131,        // 安放位置起始点：西经113度
              top : 31,           // 安放位置起始点：北纬31度
              width : 15,         // 区间大小宽高不大于15度
              height : 15
          },
          Hawaii : {
              left : -112,        // 夏威夷
              top : 29,
              width : 5,
              height : 5
          },
          'Puerto Rico' : {       // 波多黎各
              left : -76,
              top : 26,
              width : 2,
              height : 2
          }
      }
  }
  
  // step4: 已经有这个地图类型了，可以在option中使用了
  option.series = [
          {
              type: 'map',
              mapType: 'HK', // 自定义扩展图表类型
              ...
           }
   ]
  

  附录：组件和图表的实例接口

  为了实现更高级的功能和需求定制，ECharts团队做了个艰难的决定，开放组件和图表实例接口。这些组件和图表实例都被挂载到init所得到的实例上（如myChart），分别存放在chart和component下，如可以通过myChart.chart.map得到当前地图实例并可以读取并调用里面的各种属性和方法。

  【重要】请注意，ECharts接口基于数据驱动设计，这些实例并不为开放准备，虽然你可以无限制的访问，甚至动态的覆盖重写，但这可能会导致图表无法正常工作或随着版本升级无法得到兼容，所以我们仅列出如下部分方法和属性作为使用上的参考（或者说限制），我们会尽最大的努力去保证这些方法或属性的稳定和向下兼容，并且保证在出现无法兼容的更新时在changelog上通告。如果你使用了并不出现在下述文档中的方法或属性将得不到这份保证，请谅解。

  组件实例接口

  ECharts包含组件有：title、legend、dataRange、toolbox、tooltip、dataZoom、grid、xAxis、yAxis、polar

  legend

  图例，每个图表最多仅有一个图例。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_LEGEND
  {Function}	isSelected	图例开关相关，判断传入的名称当前是否处于开启状态。 参数：{string} name （名称） 返回：{Boolean} true为开启，false为关闭
  {Function}	getSelectedMap	图例开关相关，获取当前的全部图例开关状态图。 参数：无 返回：{Object} {name:value}的键值表，name为名称，value为状态值，true为开启，false为关闭
  {Function}	getColor	图例颜色相关，获取传入的名称所对应的颜色，如果传入名称未出现在已有的图例数据项中，将生成一个新的颜色与传入名称匹配并返回该颜色 参数：{string} name （名称） 返回：{color} 匹配颜色

  dataRange

  值域选择，每个图表最多仅有一个值域控件。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_DATARANGE
  {Function}	getColor	值域控件颜色相关，获取传入的值所对应的颜色 参数：{number} value （值） 返回：{color} 匹配颜色

  dataZoom

  数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_DATAZOOM
  {Function}	absoluteZoom	数据区域缩放控制 参数：{Object} {start : value, end : value, start2 : value, end2 : value} （缩放参数） 返回：无，作用：根据传入的value改变数据显示区域，value有效值为[0,100]，一般仅指定主区域控制start、end即可，在散点图中可以同时做两个维度的区域缩放，可通过额外指定start2、end2实现。

  grid

  直角坐标系内绘图网格。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_GRID
  {Function}	getX	网格左上角在图形显示中的横坐标，单位px。 参数：无  返回：{number} 坐标值
  {Function}	getXend	网格右下角在图形显示中的横坐标，单位px。 参数：无  返回：{number} 坐标值
  {Function}	getY	网格左上角在图形显示中的纵坐标，单位px。 参数：无  返回：{number} 坐标值
  {Function}	getYend	网格右上角在图形显示中的纵坐标，单位px。 参数：无  返回：{number} 坐标值
  {Function}	getWidth	网格在图形显示中的实际宽度，单位px。 参数：无  返回：{number} 宽度值
  {Function}	getHeight	网格在图形显示中的实际高度，单位px。 参数：无  返回：{number} 高度值
  {Function}	getArea	网格实际区域数据，等同一次返回getX，getY，getWidth，getHeight。 参数：无  返回：{Object} {x : value, y : value, width : value, height : value}

  xAxis/yAxis

  横纵坐标轴。可使用的属性和方法有：

  类型	名称	描述
  {Function}	getAxis	获取传入index的坐标轴实例，存在最多上下左右4条坐标轴，坐标轴可以为类目轴或数值轴，获取坐标轴实例和可用的坐标轴方法见下节 参数：{number} 0/1 （坐标轴index） 返回：{categoryAxis | valueAxis} 指定index的坐标轴实例，可以是类目轴或数值轴

  categoryAxis

  类目轴。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_AXIS_CATEGORY
  {Function}	getCoord	根据类目名字值换算绘图位置，单位px 参数：{string} name （名字） 返回：{number} 坐标值，重名类目值返回第一个匹配的
  {Function}	getCoordByIndex	根据类目轴数据索引换算绘图位置，单位px 参数：{number} index （索引） 返回：{number} 坐标值，index小于0返回坐标起点，大于类目长度返回重点
  {Function}	getNameByIndex	根据类目轴数据索引换算类目轴名称 参数：{number} index （索引） 返回：{string} 名字
  {Function}	getIndexByName	根据类目轴名称换算类目轴数据索引 参数：{string} name （名字） 返回：{number} 索引，重名类目值返回第一个匹配的

  valueAxis

  数值轴。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_AXIS_VALUE
  {Function}	getCoord	根据数值换算绘图位置，单位px 参数：{number} value （数值） 返回：{number} 坐标值

  polar

  极坐标。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	组件类型，等于config.COMPONENT_TYPE_POLAR
  {Function}	getVector	获取每个指标上某个value对应的坐标，单位px 参数：{number} polarIndex （极坐标索引）, {number} indicatorIndex （指标索引）, {number} value （数值） 返回：{Array} [x, y] 坐标值

  图表实例接口

  ECharts支持的图表有：line、bar、scatter、k、pie、radar、chord、force、map

  map

  地图。可使用的属性和方法有：

  类型	名称	描述
  {string}	type	图表类型，等于config.CHART_TYPE_MAP
  {Function}	getPosByGeo	经纬度转平面坐标，单位px 参数：{string} mapType （地图类型）, {Array} [ew,ns] （经纬度） 返回：{Array} [x, y] 坐标值
  {Function}	getGeoByPos	平面坐标转经纬度，单位px 参数：{string} mapType （地图类型）, {Array} [x, y] （坐标值 ） 返回：{Array} [ew,ns] 经纬度

  附录：一个直观的事例

  查看更多实例 example，或者使用这个demo 或 ECharts单一文件引入作为你的模板

  // 图表实例化------------------
  // srcipt标签式引入
  var myChart = echarts.init(document.getElementById('main'));
  
  // ajax getting data...............
  
  // 过渡---------------------
  myChart.showLoading({
      text: '正在努力的读取数据中...',    //loading话术
  });
  
  // ajax return
  myChart.hideLoading();
  
  // 图表使用-------------------
  var option = {
      legend: {                                   // 图例配置
          padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
          itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
          data: ['ios', 'android']
      },
      tooltip: {                                  // 气泡提示配置
          trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
      },
      xAxis: [                                    // 直角坐标系中横轴数组
          {
              type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          }
      ],
      yAxis: [                                    // 直角坐标系中纵轴数组
          {
              type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
              boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
              splitNumber: 4                      // 数值轴用，分割段数，默认为5
          }
      ],
      series: [
          {
              name: 'ios',                        // 系列名称
              type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
              data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
          },
          {
              name: 'android',                    // 系列名称
              type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
              data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
          }
      ]
  };
  myChart.setOption(option);
  
  ...
  
  // 增加些数据------------------
  option.legend.data.push('win');
  option.series.push({
          name: 'win',                            // 系列名称
          type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
          data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
  });
  myChart.setOption(option);
  
  ...
  
  // 图表清空-------------------
  myChart.clear();
  
  // 图表释放-------------------
  myChart.dispose();

• from: http://echarts.caixin.com/doc/doc.html