echart.js的使用与API

---恢复内容开始---

echart.js的使用与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

　　1.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:{}

　　2.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；

　　3.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有个别属性不同或增加

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

　　　　　　　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

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

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

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

　　　　　　　　　　　 yAxis:[{type:'value'}]

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

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

　　　　　　　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：类目列表

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

　　　　　　　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内容

　　　　　　　以上为常用api，待我再次学习继续总结~