力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） · （百度）
by 于博（新华社） · 吴楚茵（南方都市报） · （百度）
by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）echart.js的使用与API - 墨韵明空 - 博客园
做一个有上进心的攻城狮！
---恢复内容开始---
echart.js的使用与API
1.echart.js的使用：
第一步：在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echart的官方首页下载最新最全面的js文件，官网：)；
&script src="./js/echarts.js"&&/script&
第二步：并在body中创建一个具备大小的dom（div）；
&div id="main" style="width:600px height:400"&&/div&
第三布：基于创建好的DOM，创建script，并初始化echart图表；
var mychart = echart.init(document.getElementById('main'));
第四步：在script标签中创建选项并布置参数；
var option={//自定义参数，见下文参数};
第五步：布置完参数后，在最后为echart对象加载数据
mychart.setOption(option);
　　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，待我再次学习继续总结~