echart API 文档

1.echart.js的使用：

第一步：在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echart的官方首页下载最新最全面的js文件，官网：http://echart.baidu.com

<script src="./js/echarts.js"></script>

第二步：并在body中创建一个具备大小的dom（div）；

<div id="main" style="width:600px height:400px;"></div>

第三布：基于创建好的DOM，创建script，并初始化echart图表；

var mychart = echart.init(document.getElementById('main'));

第四步：在script标签中创建选项并布置参数；

var option={//自定义参数，见下文参数};

第五步：布置完参数后，在最后为echart对象加载数据

mychart.setOption(option);

2.API
一、.tooltip:提示框，鼠标悬浮交互时的信息提示

1. show:显示策略，默认为true（显示），可选false（隐藏）；

   2.trigger：触发类型，默认为item（触发），可选axis（自定义触发）；

   3.zlevel:一级层叠控制，默认值为1，渲染canvas，相同的会在同一个canvas上渲染，但不推荐过多的设置，canvas对象增多会消耗更多的内存和性能，所以大部分可通过二级层叠来控制

   4.z：二级层叠控制，默认值8，相同的zlevel上z越高越靠顶层。

   5.showContent:默认为true，在show或axisPointer触发但不显示内容的时候，可以配置为false（隐藏）

   6.position：位置指定，默认显示坐标为输出参数，用户指定的新坐标为输出返回 如：function([x,y]){return [newX,newY]}

   7.formatter:内容格式器，默认值为null，，支持异步回调

   8.islandFormatter：拖拽重计算独有，数据孤岛内容格式器

   9.showDelay：显示延迟，默认值为20,单位ms,添加显示延迟可以避免频繁切换。

   10.hideDelay:隐藏延迟，默认值为100,单位是ms

   11.transitionDuration:动画变换时长，默认值为0.4,单位是s，改变交互体验

   12.enterable:false 鼠标是否可进入详情气泡中，默认为false，如增加详情交互，如添加链接等，可设置true

   13.backgroundColor：提示背景颜色，默认‘rgba(0,0,0,0.7)’,默认透明度为0.7的黑色

   14.borderColor:提示边框颜色，默认为#333；

   15.borderRadius：提示边框圆角，默认为4,单位为px

   16.borderWidth:提示边框线宽，默认为0，单位为px

   17.padding:提示内边距，默认各方向为5，接受数组分别设定各边距同css

   18.textStyle：文本样式，默认为白色，{color:’#fff’}

   19.axisPointer:坐标轴指示器，默认type：line,可选‘line\cross\shadow\none’ 对应设定style生效
   　　如：type:‘line’,lineStyle:{},crossStyle:{},shadowStyle:{}

二、.legend:图例

1. data：图例内容数组，每一项代表一个系列的name，根据该值索引series中同名系列所用的图标类型和item和itemStyle,如果索引不到，该item将默认为没启动状态，参数name,textStyle,icon

   2.orient:布局方式，默认为horizontal水平布局，可选vertical竖直。

   3.x：安放位置，默认全图居中，可选：left,right

   4.y：安放位置，默认全图顶端，可选top,bottom,center

   5.itemGap:各个item的间距，默认为10，单位px，配合orient布局

   6.itemWidth：图例图形的宽度，默认为20px.

   7.itemHeight:图例图形的高度，默认为14px

   8.textStyle：默认值设定图例文字颜色，color:auto,默认为{color:’#333’}

   9.selectedMode:选择模式，默认开启图例开关，true，可选single,multiple,true,

   10.selected:配置默认选中状态，可配合legend,selected事件做动态数据载入

   11.formatter：文本格式器，默认为null

   12.show:显示策略，默认为true（显示），可选false（隐藏）

   13.zlevel:一级层叠控制，默认值为1，渲染canvas，相同的会在同一个canvas上渲染，但不推荐过多的置，canvas对象增多会消耗更多的内存和性能，所以大部分可通过二级层叠来控制

   14.z：二级层叠控制，默认值8，相同的zlevel上z越高越靠顶层。

   15.borderRadius：提示边框圆角，默认为4,单位为px

   16.borderWidth:提示边框线宽，默认为0，单位为px

   17.padding:提示内边距，默认各方向为5，接受数组分别设定各边距同css

   18.borderColor:提示边框颜色，默认为#333；
   

三、.series：驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，确定适用类型：

1. name：系列名称，如启用ledgend，改制将被legend.data索引相关

   2.type：图表类型，必要参数！为空或不支持类型，则该系列数据不被显示，可选为：

   ‘line(折线图)’,‘bar(柱状图)’,‘scatter(散点图)’,‘k(K线图)’,‘pie(饼图)’,‘radar(雷达图)’,‘chord(和弦图)’

   ‘force(力导向布局图)’,‘map(地图)’

   3.data：数据，默认值[]

   4.zlevel：一级层叠控制。

   5.z：二级层叠控制

   6.clickable：数据图形是否可点击，默认开启，true，如果没有click事件响应可以关闭

   7.markPoint:标注

   8.markLine:标线

   不同type有个别属性不同或增加

四、.title：标题，每隔图标最多仅有一个标题控件，每隔标题控件可设主副标题

1. 1.show:显示策略，默认为true（显示），可选false（隐藏）；

   2.text：主标题文本，默认值‘’,‘\n’指定换行；

   3.zlevel:一级层叠控制，默认值为1，渲染canvas，相同的会在同一个canvas上渲染，但不推荐过多的设置，

   canvas对象增多会消耗更多的内存和性能，所以大部分可通过二级层叠来控制

   4.z：二级层叠控制，默认值8，相同的zlevel上z越高越靠顶层。

   5.link：主标题文本超链接

   6.target：指定窗口打开主标题超链接,默认null，支持self,blank,不指定等同为blank(新窗口)

   7.subtext:副标题文本，‘\n’指定换行、

   8.sublink：副标题文本超链接

   9.subtarget:指定窗口打开副标题超链接，默认null，支持self,blank,不指定等同为blank(新窗口)

   10.textAlign:水平对齐方式，默认根据x设置自动调整，left,right,center

   11.backgroundColor:标题背景颜色，默认透明

   12.borderColor:标题边框颜色，默认为#ccc

   13.borderWidth：标题边框线宽，默认为0，单位px

   14.padding:提示内边距，默认各方向为5，接受数组分别设定各边距同css

   15.itemGap：主副标题纵向间隔，默认为10，单位px

   16.textStyle:主标题文本样式，接受数组分别设定各边距同css

   17.subtextStyle:副标题文本样式

   18.x：水平安放位置，默认为left,可选left,center,right

   19.y：垂直安放位置，默认为top,可选top,bottom,center

五、.xAxis,yAxis:直角坐标系中横纵轴

1. 坐标轴类型，横轴默认为类目型‘category’.纵轴默认为数值型’value’如：

   xAxis:[{type:‘category’,data:[‘衬衫’,‘羊毛衫’,‘雪纺衫’,‘裤子’]},],

   yAxis:[{type:‘value’}]

六、.axis:坐标轴有三种类型：

1. 类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标
   数值型：需要指定数值区间，不指定时则自定计算数值范围，坐标轴内包含数值区间内容全部坐标
   时间型：时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同自动切换需要显示的时间粒度

2. 1.type：必填，纵坐标轴为value，横坐标轴为category

   2.show:显示策略，默认为true(显示)，可选false(隐藏)

   3.zlevel：一级层叠控制。

   4.z:二级层叠控制

   5.position：坐标轴类型，横坐标默认为bottom，纵坐标默认为left， 可选值bottom,top,left,right

   6.name:坐标轴名称，默认为空

   7.nameLocation:坐标抽名称位置，默认为end，可选start

   8.nameTextStyle:坐标轴名称文字样式，默认取全局配置，颜色跟随axisLine主色，false则顶头

   9.boundaryGap:类目其实和结束两段空白策略，默认true空，false则顶头
   10.boundaryGap：坐标轴两段空白策略，默认值[0,0],可选[原始最小值和最终的差距，原始最大值和最终的差距]

   11.min：指定的最小值，默认为null，会自动根据数值调整，指定后忽略boundaryGap[0]

   12.max: 指定的最大值，默认为null，会自动根据数值调整，指定后忽略boundaryGap[1]

   13.scale: 脱离0值比例，放大聚焦到最终_min,_max区间，

   14.splitNumber:分割段数，不指定时根据min、max算法调整

   15.logLabelBase:axis.type===‘log’时生效。指定时axisLabel显示指数形式如4²，不指定是为普通形式如：1000，

   16.logPositive:axis.type===‘log’时生效,指定是否使用反向log数轴，默认自适应，即如果value全为负值则为false否则为true

   17.axisLine:坐标轴线，默认不显示

   18.axisTick：坐标轴小标记，默认不显示

   19.axisLabel：坐标轴文本标签。

   20.splitLine：分割线，默认显示

   21.splitArea:分割区域，默认不显示

   22.data：类目列表

七、.timeline:时间轴，每隔图标最多仅有一个时间轴控件

1. 1.type：模式是时间类型，默认为time，可选为‘number’

   2.notMerge：时间轴上多个option切换时，是否进行merge操作，同setOption第二个参数

   3.realtime:拖拽或点击改变时间轴是否实时显示, 默认为true，在不支持canvas的浏览器中强制false

   4.autoPlay:是否自动播放，默认为false

   5.loop：是否循环播放,默认为true

   6.playInterval:播放时间间隔，默认2000，单位ms

   7.controlPosition:播放器位置，默认为left，可选left、right、none

   8.x,y,x2,y2:时间轴横纵坐标的的左上角，时间轴横纵坐标的右上角

   9.width:时间轴的宽度，默认自适应

   10.height：时间轴的高度，默认50，单位%;

   11.lineStyle:时间轴轴线样式，lineStyle控制线条样式

   12.label:抱歉文本

   13.checkpointStyle：时间轴当前点

   14.controlStyle：时间轴控制器样式

   15.symbol:轴点symbol，同serie,symbol

   16.symbolSize:轴点symbol，同serie,symbolSize

   17.currentIndex:当前索引位置，对应option数组，用于指定特定系列

   18.data：时间轴列表，同时也是轴label内容

转载：https://www.cnblogs.com/wymbk/p/5654178.html