| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ECharts</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="ECharts"> | |
| <meta name="author" content="linzhifeng@baidu.com"> | |
| <!-- Le styles --> | |
| <link href="asset/css/bootstrap.css" rel="stylesheet"> | |
| <link href="asset/css/bootstrap-responsive.css" rel="stylesheet"> | |
| <link href="asset/css/echartsHome.css" rel="stylesheet"> | |
| <!-- Fav and touch icons --> | |
| <link rel="shortcut icon" href="asset/ico/favicon.png"> | |
| </head> | |
| <body> | |
| <!-- NAVBAR | |
| ================================================== --> | |
| <div class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container"> | |
| <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="brand" href="../index.html">ECharts</a> | |
| <div class="nav-collapse collapse"> | |
| <a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a> | |
| <ul class="nav"> | |
| <li><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li> | |
| <li><a href="example.html" class="active">Example</a></li> | |
| <li class="active"><a href="doc.html">API & Doc</a></li> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="https://github.com/ecomfe/echarts/archive/1.0.0.zip">ZIP (1.0.0)</a></li> | |
| <li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li> | |
| <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li> | |
| <li class="divider"></li> | |
| <!--li class="nav-header">Library</li--> | |
| <li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li> | |
| <li><a href="http://tangram.baidu.com/" target="_blank">Tangram</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div><!--/.nav-collapse --> | |
| </div><!-- /.container --> | |
| </div><!-- /.navbar-inner --> | |
| </div><!-- /.navbar-wrapper --> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="span3"> | |
| <div class="affix accordion span3" id="accordion"> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-description"> | |
| <strong>描述</strong> | |
| </div> | |
| </div> | |
| <div id="collapse-description" class="accordion-body collapse in"> | |
| <div class="accordion-inner"> | |
| <div id="toc"> | |
| <ul> | |
| <li><a href="#简介">简介</a></li> | |
| <li><a href="#名词解析">名词解析</a></li> | |
| <li><a href="#图表类型">图表类型</a></li> | |
| <ul> | |
| <li><a href="#Line">line</a></li> | |
| <li><a href="#Bar">bar</a></li> | |
| <li><a href="#Scatter">scatter</a></li> | |
| <li><a href="#Pie">pie</a></li> | |
| <li><a href="#Radar">radar</a></li> | |
| </ul> | |
| <li><a href="#初始化">初始化</a></li> | |
| <li><a href="#方法">方法</a></li> | |
| <li><a href="#选项">选项</a></li> | |
| <ul> | |
| <li><a href="#Option">option</a></li> | |
| <li><a href="#Legend">legend</a></li> | |
| <li><a href="#Toolbox">toolbox</a></li> | |
| <li><a href="#Tooltip">tooltip</a></li> | |
| <li><a href="#DataZoom">dataZoom</a></li> | |
| <li><a href="#Grid">grid</a></li> | |
| <li><a href="#Xaxis">xAxis</a></li> | |
| <li><a href="#Yaxis">yAxis</a></li> | |
| <li><a href="#Axis">axis</a></li> | |
| <ul> | |
| <li><a href="#AxisAxisline">axisLine</a></li> | |
| <li><a href="#AxisAxistick">axisTick</a></li> | |
| <li><a href="#AxisAxislabel">axisLabel</a></li> | |
| <li><a href="#AxisSplitline">splitLine</a></li> | |
| <li><a href="#AxisSplitarea">splitArea</a></li> | |
| <li><a href="#AxisData">data</a></li> | |
| </ul> | |
| <li><a href="#Series">series</a></li> | |
| <ul> | |
| <li><a href="#SeriesData">data</a></li> | |
| </ul> | |
| <li><a href="#ItemStyle">itemStyle</a></li> | |
| <li><a href="#LineStyle">lineStyle</a></li> | |
| <li><a href="#AreaStyle">areaStyle</a></li> | |
| <li><a href="#TextStyle">textStyle</a></li> | |
| <li><a href="#Loadingoption">loadingOption</a></li> | |
| <li><a href="#Color">color</a></li> | |
| <li><a href="#Calculable">calculable</a></li> | |
| <li><a href="#CalculableColor">calculableColor</a></li> | |
| <li><a href="#CalculableHolderColor">calculableHolderColor</a></li> | |
| <li><a href="#NameConnector">nameConnector</a></li> | |
| <li><a href="#ValueConnector">valueConnector</a></li> | |
| <li><a href="#Animation">animation</a></li> | |
| <li><a href="#AnimationDuration">animationDuration</a></li> | |
| <li><a href="#AnimationEasing">animationEasing</a></li> | |
| </ul> | |
| <li><a href="#多级控制设计">多级控制设计</a></li> | |
| <li><a href="#附录一个直观的事例">附录：一个直观的事例</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-config"> | |
| <strong>默认选项</strong> | |
| </div> | |
| </div> | |
| <div id="collapse-config" class="accordion-body collapse"> | |
| <div class="accordion-inner"> | |
| <div id="config"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!--/.well --> | |
| </div> | |
| <div class="span9"> | |
| <p style="margin:10px 0 -30px 0"> | |
| <a href="mailto:kener.linfeng@gmail.com">Any feedback or question ? »</a> | |
| </p> | |
| <div id="doc"> | |
| <h3>简介<a name="简介"> </a></h3> | |
| <p>ECharts，纯Javascript图表库，基于Canvas，底层依赖<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。创新的拖拽重计算、数据视图等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、饼图（环形图），同时支持任意维度的堆积和多图表混合展现。</P> | |
| <img src="asset/img/architecture.png" /> | |
| <h3>名词解析<a name="名词解析"> </a></h3> | |
| <p>基本名词</p> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名词 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> chart </td> | |
| <td> 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 </td> | |
| </tr> | |
| <tr> | |
| <td> axis </td> | |
| <td> 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 </td> | |
| </tr> | |
| <tr> | |
| <td> xAxis </td> | |
| <td> 直角坐标系中的横轴，通常并默认为类目轴 </td> | |
| </tr> | |
| <tr> | |
| <td> yAxis </td> | |
| <td> 直角坐标系中的纵轴，通常并默认为数值轴 </td> | |
| </tr> | |
| <tr> | |
| <td> grid </td> | |
| <td> 直角坐标系中除坐标轴外的绘图网格 </td> | |
| </tr> | |
| <tr> | |
| <td> legend </td> | |
| <td> 图例 </td> | |
| </tr> | |
| <tr> | |
| <td> toolbox </td> | |
| <td> 辅助工具箱</td> | |
| </tr> | |
| <tr> | |
| <td> tooltip </td> | |
| <td> 气泡提示框，用于展现更详细的数据 </td> | |
| </tr> | |
| <tr> | |
| <td> dataZoom </td> | |
| <td> 数据区域缩放，常用于展现大数据时选择可视范围 </td> | |
| </tr> | |
| <tr> | |
| <td> series </td> | |
| <td> 数据系列 </td> | |
| </tr> | |
| </table> | |
| <P> 图表名词</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名词 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> line </td> | |
| <td> 折线图，堆积折线图，区域图，堆积区域图 </td> | |
| </tr> | |
| <tr> | |
| <td> bar </td> | |
| <td> 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图 </td> | |
| </tr> | |
| <tr> | |
| <td> scatter </td> | |
| <td> 散点图，气泡图（暂不支持） </td> | |
| </tr> | |
| <tr> | |
| <td> pie </td> | |
| <td> 饼图，圆环图 </td> | |
| </tr> | |
| <tr> | |
| <td> radar </td> | |
| <td> 雷达图，填充雷达图（暂不支持） </td> | |
| </tr> | |
| </table> | |
| <h3>图表类型<a name="图表类型"> </a></h3> | |
| <P> 图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：</P> | |
| <p><img src="./asset/img/doc/charts.jpg" title="标准图表类型" alt="标准图表类型"/></P> | |
| <h4>单图表类型：line<a name="Line"> </a></h4> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 折线图 </th> | |
| <th> 堆积折线图 </th> | |
| <th> 区域图 </th> | |
| <th> 堆积区域图 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/example/line1.png" title="" alt="折线图"/></td> | |
| <td><img src="./asset/img/example/line2.png" title="" alt="堆积折线图"/></td> | |
| <td><img src="./asset/img/example/line3.png" title="" alt="区域图"/></td> | |
| <td><img src="./asset/img/example/line4.png" title="" alt="堆积区域图"/></td> | |
| </tr> | |
| </table> | |
| <h4>单图表类型：bar<a name="Bar"> </a></h4> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 柱形图 </th> | |
| <th> 堆积柱形图 </th> | |
| <th> 条形图 </th> | |
| <th> 堆积条形图 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/example/bar1.png" title="" alt="柱形图"/></td> | |
| <td><img src="./asset/img/example/bar2.png" title="" alt="堆积柱形图"/></td> | |
| <td><img src="./asset/img/example/bar3.png" title="" alt="条形图"/></td> | |
| <td><img src="./asset/img/example/bar4.png" title="" alt="堆积条形图"/></td> | |
| </tr> | |
| </table> | |
| <h4>单图表类型：scatter（暂不支持）<a name="Scatter"> </a></h4> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 散点图 </th> | |
| <th> 气泡图 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/example/scatter1.jpg" title="" alt="散点图"/></td> | |
| <td><img src="./asset/img/example/scatter2.jpg" title="" alt="气泡图"/></td> | |
| </tr> | |
| </table> | |
| <h4>单图表类型：pie<a name="Pie"> </a></h4> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 饼图 </th> | |
| <th> 圆环图 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/example/pie1.png" title="" alt="饼图"/></td> | |
| <td><img src="./asset/img/example/pie2.png" title="" alt="圆环图"/></td> | |
| </tr> | |
| </table> | |
| <h4>单图表类型：radar（暂不支持）<a name="Radar"> </a></h4> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 雷达图 </th> | |
| <th> 填充雷达图 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/example/radar1.jpg" title="" alt="雷达图"/></td> | |
| <td><img src="./asset/img/example/radar2.jpg" title="" alt="填充雷达图"/></td> | |
| </tr> | |
| </table> | |
| <h3>初始化<a name="初始化"> </a></h3> | |
| <P> 图表库实现为多实例的，实例选项在新建时传入，同时也可在实例新建后通过实例方法setOption（见<a href="#方法" title="">方法</a>）传入，两种初始化方式最终产出效果是等价的，即如下两组代码产出效果相同。</P> | |
| <div class="code"> | |
| <pre>//初始化实例时传入选项 | |
| var myChart = new echarts(option); | |
| //初始化实例选项为空，通过实例方法传入选项 | |
| var myChart = new echarts(); | |
| myChart.setOption(option); | |
| </pre> | |
| </div> <P> 同时，在实例中任何个性化选项不会影响其他已存在或未来生成的实例。</P> | |
| <h3>方法<a name="方法"> </a></h3> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 参数 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td>{void} setOption</td> | |
| <td>{Object} option, {boolean=} notMerge</td> | |
| <td>万能接口，配置图表实例任何可配置选项（详见<a href="#Option" title="">option</a>），多次调用时option选项是默认是合并（merge）的，<br/>如果不需求，可以通过notMerger参数为true阻止与上次option的合并。 </td> | |
| </tr> | |
| <tr> | |
| <td>{void} setSeries</td> | |
| <td>{Array} series, {boolean=} notMerge</td> | |
| <td>数据接口，驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），效果等同调用setOption({series:{...}}) </td> | |
| </tr> | |
| <tr> | |
| <td>{void} on</td> | |
| <td>{string} eventName, {Function} eventListener</td> | |
| <td>事件绑定，支持事件有：<br/>REFRESH，CLICK，HOVER，<br/>DATA_CHANGED，DATA_ZOOM，LEGEND_SELECTED，MAGIC_TYPE_CHANGED </td> | |
| </tr> | |
| <tr> | |
| <td>{void} un</td> | |
| <td>{string} eventName, {Function} eventListener</td> | |
| <td>事件解绑定 </td> | |
| </tr> | |
| <tr> | |
| <td>{void} showLoading</td> | |
| <td>{Object} loadingOption</td> | |
| <td> 过渡控制（详见<a href="#Loadingoption" title="">loadingOption</a>），显示loading（读取中） </td> | |
| </tr> | |
| <tr> | |
| <td>{void} hideLoading</td> | |
| <td>{void}</td> | |
| <td>过渡控制，隐藏loading（读取中） </td> | |
| </tr> | |
| <tr> | |
| <td>{void} clear</td> | |
| <td>{void}</td> | |
| <td>清空绘画内容，清空后实例可用 </td> | |
| </tr> | |
| <tr> | |
| <td>{void} dispose( {void} ) </td> | |
| <td>{void}</td> | |
| <td>释放图表实例，释放后实例不再可用 </td> | |
| </tr> | |
| </table> | |
| <h3>选项<a name="选项"> </a></h3> | |
| <h4>option<a name="Option"> </a></h4> | |
| <P> 图表选项，包含图表实例任何可配置选项</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {Array} color </td> | |
| <td> 数值系列的颜色列表，默认为null则采用内置颜色，可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} legend </td> | |
| <td> 图例（详见<a href="#Legend" title="">legend</a>），每个图表最多仅有一个图例，混搭图表共享 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} toolbox </td> | |
| <td> 工具箱（详见<a href="#Toolbox" title="">toolbox</a>），每个图表最多仅有一个工具箱 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} tooltip </td> | |
| <td> 提示框（详见<a href="#Tooltip" title="">tooltip</a>），鼠标悬浮交互时的信息提示 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} dataZoom </td> | |
| <td> 数据区域缩放（详见<a href="#DataZoom" title="">dataZoom</a>）,数据展现范围选择 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} grid </td> | |
| <td> 直角坐标系内绘图网格（详见<a href="#Grid" title="">grid</a>） </td> | |
| </tr> | |
| <tr> | |
| <td> {Array | Object} xAxis </td> | |
| <td> 直角坐标系中横轴数组（详见<a href="#Xaxis" title="">xAxis</a>），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴 </td> | |
| </tr> | |
| <tr> | |
| <td> {Array | Object} yAxis </td> | |
| <td> 直角坐标系中纵轴数组（详见<a href="#Yaxis" title="">yAxis</a>），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴 </td> | |
| </tr> | |
| <tr> | |
| <td> {Array} series </td> | |
| <td> 驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），数组中每一项代表一个系列的特殊选项及数据 </td> | |
| </tr> | |
| </table> | |
| <h4>legend<a name="Legend"> </a></h4> | |
| <P> 图例，每个图表最多仅有一个图例。<a href="example/legend.html" target="_blank">try this »</a></P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {string} orient </td> | |
| <td> 'horizontal' </td> | |
| <td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} x </td> | |
| <td> 'center' </td> | |
| <td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} y </td> | |
| <td> 'top' </td> | |
| <td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {color} backgroundColor </td> | |
| <td> 'rgba(0,0,0,0)' </td> | |
| <td> 图例背景颜色，默认透明 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} borderColor </td> | |
| <td> '#ccc' </td> | |
| <td> 图例边框颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} borderWidth </td> | |
| <td> 0 </td> | |
| <td> 图例边框线宽，单位px，默认为0（无边框） </td> | |
| </tr> | |
| <tr> | |
| <td> {number | Array} padding </td> | |
| <td> 5 </td> | |
| <td> 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} itemGap </td> | |
| <td> 10 </td> | |
| <td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td> | |
| </tr> | |
| <!-- | |
| <tr> | |
| <td> {number} itemWidth </td> | |
| <td> 20 </td> | |
| <td> 图例图形宽度 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} itemHeight </td> | |
| <td> 14 </td> | |
| <td> 图例图形高度 </td> | |
| </tr> | |
| --> | |
| <tr> | |
| <td> {Object} textStyle </td> | |
| <td> {color: '#333'} </td> | |
| <td> 默认只设定了图例文字颜色（详见<a href="#TextStyle" title="">textStyle</a>） </td> | |
| </tr> | |
| <tr> | |
| <td> {Array <string>} data </td> | |
| <td> [ ] </td> | |
| <td> 图例内容数组，数组项为{string}，每一项代表一个系列的name。<br/>使用根据该值索引<a href="#Series" title="">series</a>中同名系列所用的图表类型和itemStyle，如果索引不到，该item将不显示。</td> | |
| </tr> | |
| </table> | |
| <p><img src="./asset/img/doc/legend.png" title="" alt="图例"/></P> | |
| <h4>toolbox<a name="Toolbox"> </a></h4> | |
| <P> 工具箱，每个图表最多仅有一个工具箱。</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> false </td> | |
| <td> 显示策略，可选为：true（显示） | false（隐藏） </td> | |
| </tr> | |
| <tr> | |
| <td> {string} orient </td> | |
| <td> 'horizontal' </td> | |
| <td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} x </td> | |
| <td> 'center' </td> | |
| <td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} y </td> | |
| <td> 'top' </td> | |
| <td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {color} backgroundColor </td> | |
| <td> 'rgba(0,0,0,0)' </td> | |
| <td> 工具箱背景颜色，默认透明 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} borderColor </td> | |
| <td> '#ccc' </td> | |
| <td> 工具箱边框颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} borderWidth </td> | |
| <td> 0 </td> | |
| <td> 工具箱边框线宽，单位px，默认为0（无边框） </td> | |
| </tr> | |
| <tr> | |
| <td> {number | Array} padding </td> | |
| <td> 5 </td> | |
| <td> 工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} itemGap </td> | |
| <td> 10 </td> | |
| <td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} itemSize </td> | |
| <td> 16 </td> | |
| <td> 工具箱icon大小，单位（px）</td> | |
| </tr> | |
| <tr> | |
| <td> {Array <color>} color </td> | |
| <td> ['#1e90ff','#22bb22','#4b0082','#d2691e'] </td> | |
| <td> 工具箱icon颜色序列，循环使用 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} feature </td> | |
| <td> {} </td> | |
| <td> 启用功能，目前支持feature见下</td> | |
| </tr> | |
| </table> | |
| <p><img src="./asset/img/doc/toolbox.png" title="" alt="工具箱"/></P> | |
| <div class="code"> | |
| <pre> | |
| feature : { | |
| mark : true, // 辅助线标志 | |
| dataView : true, // 数据视图 | |
| magicType:['line', 'bar'], // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换 | |
| refresh : true // 刷新，复位原始图表 | |
| } | |
| </pre> | |
| </div> | |
| <p>feature选项</p> | |
| <ul> | |
| <li> | |
| mark，辅助线标志 | |
| <ul> | |
| <li>简单传入true启动辅助线标志功能</li> | |
| <li>传入lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式</li> | |
| </ul> | |
| </li> | |
| <li> | |
| dataView，数据视图 | |
| <ul> | |
| <li>简单传入true启动数据视图</li> | |
| <li>传入{Object}设置更多属性</li> | |
| <ul> | |
| <li>{boolean=} readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能</li> | |
| <li>{Function=} optionToContent 自主编排数据视图的显示内容</li> | |
| <li>{Function=} contentToOption 当数据视图readOnly为false时，会出现刷新按钮，如果是自主编排的显示内容，如何翻转也请自理</li> | |
| <li>{Array=} lang 数据视图上有三个话术，默认是['Data View', 'close', 'refresh']，如需改写，可自定义</li> | |
| </ul> | |
| </ul> | |
| </li> | |
| <li> | |
| magicType，图表类型切换，当前仅支持直角系下的折线图、柱状图转换 | |
| <ul> | |
| <li>['line', 'bar']</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <h4>tooltip<a name="Tooltip"> </a></h4> | |
| <P> 提示框,鼠标悬浮交互时的信息提示。<a href="example/tooltip.html" target="_blank">try this »</a></P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {string} trigger </td> | |
| <td> 'item' </td> | |
| <td> 触发类型，默认数据触发，见下图，可选为：'item' | 'axis' </td> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 显示策略，可选为：true（显示） | false（隐藏） </td> | |
| </tr> | |
| <tr> | |
| <td> {string | Function} formatter </td> | |
| <td> null </td> | |
| <td> 内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方</td> | |
| </tr> | |
| <tr> | |
| <td> {string | Function} islandFormatter </td> | |
| <td> '{a} < br/>{b} : {c}' </td> | |
| <td> 拖拽重计算独有，数据孤岛内容格式器：{string}（Template） | {Function}，见表格下方</td> | |
| </tr> | |
| <tr> | |
| <td> {color} backgroundColor </td> | |
| <td> 'rgba(0,0,0,0.7)' </td> | |
| <td> 提示背景颜色，默认为透明度为0.7的黑色 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} borderColor </td> | |
| <td> '#333' </td> | |
| <td> 提示边框颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} borderRadius </td> | |
| <td> 4 </td> | |
| <td> 提示边框圆角，单位px，默认为4 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} borderWidth </td> | |
| <td> 0 </td> | |
| <td> 提示边框线宽，单位px，默认为0（无边框） </td> | |
| </tr> | |
| <tr> | |
| <td> {number | Array} padding </td> | |
| <td> 5 </td> | |
| <td> 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} textStyle </td> | |
| <td> { color:'#fff' } </td> | |
| <td> 文本样式，默认为白色字体（详见<a href="#TextStyle" title="">textStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <P> 内容格式器formatter：</P> | |
| <ul> | |
| <li> | |
| {string}，模板（Template），其变量为： | |
| <ul> | |
| <li>{a} | {a0}</li> | |
| <li>{b} | {b0}</li> | |
| <li>{c} | {c0}</li> | |
| <li>{d} | {d0} （部分图表类型无此项）</li> | |
| <li> 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...</li> | |
| <li> 其中变量a、b、c在不同图表类型下代表数据含义为： | |
| <ul> | |
| <li>折线（区域）图、柱状（条形）图、散点图 : a（系列名称），b（类目值），c（数值）, d（无）</li> | |
| <li>气泡图 : a（系列名称），b（横轴值），c（纵轴值）, d（数值）</li> | |
| <li>饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| {Function}，传递参数列表如下： | |
| <ul> | |
| <li><Array> params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]</li> | |
| <li><String> ticket : 异步回调标识</li> | |
| <li><Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <P> 触发类型：</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> item触发 </th> | |
| <th> axis触发 </th> | |
| </tr> | |
| <tr> | |
| <td><img src="./asset/img/doc/tooltip1.jpg" title="" alt="item触发"/></td> | |
| <td><img src="./asset/img/doc/tooltip2.jpg" title="" alt="axis触发"/></td> | |
| </tr> | |
| </table> | |
| <h4>dataZoom<a name="DataZoom"> </a></h4> | |
| <P> 数据区域缩放。仅对直角坐标系图表有效。<a href="example/dataZoom.html" target="_blank">try this »</a></P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> false </td> | |
| <td> 是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据。 </td> | |
| </tr> | |
| <tr> | |
| <td> {boolean} realtime </td> | |
| <td> false </td> | |
| <td> 缩放变化是否实时显示，建议性能较低的浏览器或数据量巨大时不启动实时效果。 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} orient </td> | |
| <td> 'horizontal' </td> | |
| <td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td> | |
| </tr> | |
| <tr> | |
| <td> {number} x </td> | |
| <td> 自适应 </td> | |
| <td> 水平安放位置，默认为根据grid参数适配，纵向布局默认左侧，可指定 {number}（左上角x坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {number} y </td> | |
| <td> 自适应 </td> | |
| <td> 垂直安放位置，默认为根据grid参数适配，纵向布局默认下方，可指定 {number}（左上角y坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {number} width </td> | |
| <td> 自适应 | 30</td> | |
| <td> 指定宽度，横向布局时默认为根据grid参数适配，纵向布局是默认为30，可指定 {number}（宽度，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {number} height </td> | |
| <td> 自适应 | 30</td> | |
| <td> 指定高度，纵向布局时默认为根据grid参数适配，横向布局是默认为30，可指定 {number}（高度，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {color} backgroundColor </td> | |
| <td> '#eee' </td> | |
| <td> 背景颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {color} dataBackgroundColor </td> | |
| <td> '#ccc' </td> | |
| <td> 数据缩略背景颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {color} fillerColor </td> | |
| <td> 'rgba(50,205,50,0.4)' </td> | |
| <td> 选择区域填充颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {color} handleColor </td> | |
| <td> 'rgba(70,130,180,0.8)' </td> | |
| <td> 控制手柄颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {(Array | number)} xAxisIndex </td> | |
| <td> null </td> | |
| <td> 当不指定时默认控制所有横向类目，可通过数组指定多个需要控制的横向类目坐标轴Index，仅一个时可直接为数字 </td> | |
| </tr> | |
| <tr> | |
| <td> {(Array | number)} yAxisIndex </td> | |
| <td> null </td> | |
| <td> 当不指定时默认控制所有纵向类目，可通过数组指定多个需要控制的纵向类目坐标轴Index，仅一个时可直接为数字 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} start </td> | |
| <td> 0 </td> | |
| <td> 数据缩放，选择起始比例，默认为0，从首个数据起选择。</td> | |
| </tr> | |
| <tr> | |
| <td> {number} end </td> | |
| <td> 100 </td> | |
| <td> 数据缩放，选择结束比例，默认为100（%），到最后一个数据选择结束。 </td> | |
| </tr> | |
| <tr> | |
| <td> {boolean} zoomLock </td> | |
| <td> false </td> | |
| <td> 数据缩放锁，默认为false，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。</td> | |
| </tr> | |
| </table> | |
| <h4>grid<a name="Grid"> </a></h4> | |
| <P> 直角坐标系内绘图网格</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {number} x </td> | |
| <td> 80 </td> | |
| <td> 直角坐标系内绘图网格起始横坐标，数值单位px </td> | |
| </tr> | |
| <tr> | |
| <td> {number} y </td> | |
| <td> 60 </td> | |
| <td> 直角坐标系内绘图网格起始纵坐标，数值单位px </td> | |
| </tr> | |
| <tr> | |
| <td> {number} width </td> | |
| <td> 自适应 </td> | |
| <td> 直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - 2 * x，数值单位px，见下图。 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} height </td> | |
| <td> 自适应 </td> | |
| <td> 直角坐标系内绘图网格（不含坐标轴）高度，默认为总宽度 - 2 * y，数值单位px，见下图。 </td> | |
| </tr> | |
| <tr> | |
| <td> {color} backgroundColor </td> | |
| <td> '#fff' </td> | |
| <td> 背景颜色。 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} borderWidth </td> | |
| <td> 1 </td> | |
| <td> 边框线宽 </td | |
| </tr> | |
| <tr> | |
| <td> {color} borderColor </td> | |
| <td> '#ccc' </td> | |
| <td> 边框颜色。 </td> | |
| </tr> | |
| </table> | |
| <p><img src="./asset/img/doc/grid.jpg" title="" alt="绘图网格"/></P> | |
| <h4>xAxis<a name="Xaxis"> </a></h4> | |
| <P>直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值。最多同时存在2条横轴，单条横轴时可指定安放于<a href="#Grid" title="">grid</a>的底部（默认）或顶部，2条同时存在时位置互斥，默认第一条安放于底部，第二条安放于顶部。</p> | |
| <p>坐标轴有两种类型，类目型和数值型（区别详见<a href="#Axis" title="">axis</a>），横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型，具体参数详见<a href="#Axis" title="">axis</a>。</P> | |
| <h4>yAxis<a name="Yaxis"> </a></h4> | |
| <P>直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值。最多同时存在2条纵轴，单条纵轴时可指定安放于<a href="#Grid" title="">grid</a>的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。</p> | |
| <p>坐标轴有两种类型，类目型和数值型（区别详见<a href="#Axis" title="">axis</a>），纵轴通常为数值型，但条形图时则纵轴为类目型，具体参数详见<a href="#Axis" title="">axis</a>。</P> | |
| <h4>axis<a name="Axis"> </a><a name="CategoryAxis"> </a><a name="ValueAxis"> </a></h4> | |
| <P> 坐标轴有两种类型，类目型和数值型，他们的区别在于：</P> | |
| <ul> | |
| <li>类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标</li> | |
| <li>数值型：需要指定数值区间，坐标轴内包含数值区间内容全部坐标</li> | |
| </ul> | |
| <P> 下面是坐标轴的全部选项，其中个别选项仅在类目型或数值型时有效，请注意适用类型。<a href="example/axis.html" target="_blank">try this »</a></P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {string} type </td> | |
| <td> 'category' | 'value' </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value' </td> | |
| </tr> | |
| <tr> | |
| <td> {string} position </td> | |
| <td> 'bottom' | 'left' </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴类型，横轴默认为类目型'bottom'，纵轴默认为数值型'left'，可选为：'bottom' | 'top' | 'left' | 'right' </td> | |
| </tr> | |
| <tr> | |
| <td> {boolean} boundaryGap </td> | |
| <td> true </td> | |
| <td> 类目型 </td> | |
| <td> 类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头 </td> | |
| </tr> | |
| <tr> | |
| <td> {Array} boundaryGap </td> | |
| <td> [0, 0] </td> | |
| <td> 数值型 </td> | |
| <td> 数值轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额] </td> | |
| </tr> | |
| <tr> | |
| <td> {number} min </td> | |
| <td> null </td> | |
| <td> 数值型 </td> | |
| <td> 指定的最小值，eg: 0，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[0] </td> | |
| </tr> | |
| <tr> | |
| <td> {number} max </td> | |
| <td> null </td> | |
| <td> 数值型 </td> | |
| <td> 指定的最大值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1] </td> | |
| </tr> | |
| <tr> | |
| <td> {number} precision </td> | |
| <td> 0 </td> | |
| <td> 数值型 </td> | |
| <td> 小数精度，默认为0，无小数点 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} power </td> | |
| <td> 100 </td> | |
| <td> 数值型 </td> | |
| <td> 整数精度，默认为100，个位和百位为0 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} splitNumber </td> | |
| <td> 5 </td> | |
| <td> 数值型 </td> | |
| <td> 分割段数，默认为5 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} axisLine </td> | |
| <td> {show : true} </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} axisTick </td> | |
| <td> {show : false} </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴小标记，默认不显示，属性show控制显示与否，属性length控制线长，属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} axisLabel </td> | |
| <td> {show : true} </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴文本标签，详见<a href="#AxisAxislabel" title="">axis.axisLabel</a></td> | |
| </tr> | |
| <tr> | |
| <td> {Object} splitLine </td> | |
| <td> {show : true} </td> | |
| <td> 通用 </td> | |
| <td> 分隔线，默认显示，属性show控制显示与否，属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} splitArea </td> | |
| <td> {show : false} </td> | |
| <td> 通用 </td> | |
| <td> 分隔区域，默认不显示，属性show控制显示与否，属性areaStyle（详见<a href="#AreaStyle" title="">areaStyle</a>）控制区域样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {Array} data </td> | |
| <td> [] </td> | |
| <td> 类目型 </td> | |
| <td> 类目列表，同时也是label内容，详见<a href="#AxisData" title="">axis.data</a></td> | |
| </tr> | |
| </table> | |
| <P> boundaryGap端空白策略</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 设置 </th> | |
| <th> 效果 </th> | |
| </tr> | |
| <tr> | |
| <td> boundaryGap: true </td> | |
| <td><img src="./asset/img/doc/axisBoundaryGap1.jpg" title="" alt="axisBoundaryGap1"/></td> | |
| </tr> | |
| <tr> | |
| <td> boundaryGap: false </td> | |
| <td><img src="./asset/img/doc/axisBoundaryGap.png" title="" alt="axisBoundaryGap"/></td> | |
| </tr> | |
| </table> | |
| <P> axis属性说明</P> | |
| <p><img src="./asset/img/doc/axisDetail.png" title="" alt="axisDetail"/></P> | |
| <h5>axis.axisLine<a name="AxisAxisline"> </a></h5> | |
| <P> 坐标轴线，默认显示且带如下样式：</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 通用 </td> | |
| <td> 是否显示，默认为true，设为false后下面都没意义了 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} lineStyle </td> | |
| <td> {color: '#48b', width: 2, style: 'solid'} </td> | |
| <td> 通用 </td> | |
| <td> 属性lineStyle控制线条样式，（详见<a href="#LineStyle" title="">lineStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <h5>axis.axisTick<a name="AxisAxistick"> </a></h5> | |
| <P> 坐标轴小标记，默认不显示，默认样式见下：</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> false </td> | |
| <td> 通用 </td> | |
| <td> 是否显示，默认为false，设为true后下面为默认样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} length </td> | |
| <td> 4 </td> | |
| <td> 通用 </td> | |
| <td> 属性length控制线长 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} lineStyle </td> | |
| <td> {color: '#ccc', width: 1, style: 'solid'} </td> | |
| <td> 通用 </td> | |
| <td> 属性lineStyle控制线条样式，（详见<a href="#LineStyle" title="">lineStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <h5>axis.axisLabel<a name="AxisAxislabel"> </a></h5> | |
| <P> 坐标轴文本标签选项</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 通用 </td> | |
| <td> 是否显示，默认为true，设为false后下面都没意义了 </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} interval </td> | |
| <td> 'auto' </td> | |
| <td> 类目型 </td> | |
| <td> 标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number}（用户指定选择间隔） </td> | |
| </tr> | |
| <tr> | |
| <td> {number} rotate </td> | |
| <td> 0 </td> | |
| <td> 通用 </td> | |
| <td> 标签旋转角度，默认为0，不旋转，正直为逆时针，负值为顺时针，可选为：-90 ~ 90 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} margin </td> | |
| <td> 8 </td> | |
| <td> 通用 </td> | |
| <td> 坐标轴文本标签与坐标轴的间距，默认为8，单位px </td> | |
| </tr> | |
| <tr> | |
| <td> {string | Function} formatter </td> | |
| <td> null </td> | |
| <td> 通用 </td> | |
| <td> 间隔名称格式器：{string}（Template） | {Function} </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} textStyle </td> | |
| <td> {color: '#333'} </td> | |
| <td> 通用 </td> | |
| <td> 文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <P> 间隔名称格式器formatter：</P> | |
| <ul> | |
| <li> | |
| {string}，模板（Template），其变量为： | |
| <ul> | |
| <li> | |
| {value}: 内容或值 | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| {Function}，传递参数同模板变量： | |
| <ul> | |
| <li> | |
| eg：function(value){return "星期" + "日一二三四五六".charAt(value);'} | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <h5>axis.splitLine<a name="AxisSplitline"> </a></h5> | |
| <P> 分隔线，默认显示且带如下样式：</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 通用 </td> | |
| <td> 是否显示，默认为true，设为false后下面都没意义了 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} lineStyle </td> | |
| <td> {color: '#ccc', width: 1, style: 'solid'} </td> | |
| <td> 通用 </td> | |
| <td> 属性lineStyle控制线条样式，（详见<a href="#LineStyle" title="">lineStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <h5>axis.splitArea<a name="AxisSplitarea"> </a></h5> | |
| <P> 分隔区域，默认不显示：</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> false </td> | |
| <td> 通用 </td> | |
| <td> 是否显示，默认为false，设为true后带如下默认样式 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} areaStyle </td> | |
| <td> {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']} </td> | |
| <td> 通用 </td> | |
| <td> 属性areaStyle（详见<a href="#AreaStyle" title="">areaStyle</a>）控制区域样式，颜色数组实现间隔变换。 </td> | |
| </tr> | |
| </table> | |
| <h5>axis.data<a name="AxisData"> </a></h5> | |
| <P> 类目型坐标轴文本标签数组，指定label内容。 | |
| 数组项通常为文本，如:</P> | |
| <div class="code"> | |
| <pre>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec'] | |
| </pre> | |
| </div> <P> 当需要对个别标签进行个性化定义时，数组项可用对象，接受textStyle设置个性化标签，如：</P> | |
| <div class="code"> | |
| <pre>[ | |
| 'Jav', 'Feb', 'Mar', | |
| { | |
| value:'Apr', //文本内容，如指定间隔名称格式器formatter，则这个值将被作为模板变量值或参数传入 | |
| textStyle:{ //详见textStyle | |
| color : 'red' | |
| ... | |
| } | |
| }, | |
| 'May', '...' | |
| ] | |
| </pre> | |
| </div> | |
| <h4>series<a name="Series"> </a></h4> | |
| <P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：</P> | |
| <table cellspacing="0" class="ADoc_table full"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {string} name </td> | |
| <td> null </td> | |
| <td> 通用 </td> | |
| <td> 系列名称，如启用legend，该值将被legend.data索引相关 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} tooltip </td> | |
| <td> null </td> | |
| <td> 通用 </td> | |
| <td> 提示框样式，仅对本系列有效，如不设则用option.tooltip（详见<a href="#Tooltip" title="">tooltip</a>）,鼠标悬浮交互时的信息提示 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} type </td> | |
| <td> null </td> | |
| <td> 通用 </td> | |
| <td> 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。<br/>可选为：'line'（折线图） | 'bar'（柱状图） | 'pie'（饼图） | 'scatter'（散点图，暂不支持） | 'radar'（雷达图，暂不支持） </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} itemStyle </td> | |
| <td> null </td> | |
| <td> 通用 </td> | |
| <td> 图形样式（详见<a href="#ItemStyle" title="">itemStyle</a>） </td> | |
| </tr> | |
| <tr> | |
| <td> {string} stack </td> | |
| <td> null </td> | |
| <td> 折线图，柱状图 </td> | |
| <td> 组合名称，多组数据的堆积图时使用，eg：stack:'group1'，则series数组中stack值等于'group1'的数据做堆积计算 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} xAxisIndex </td> | |
| <td> 0 </td> | |
| <td> 折线图，柱状图，散点图 </td> | |
| <td><a href="#Xaxis" title="">xAxis</a>坐标轴数组的索引，指定该系列数据所用的横坐标轴 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} yAxisIndex </td> | |
| <td> 0 </td> | |
| <td> 折线图，柱状图，散点图 </td> | |
| <td><a href="#Yaxis" title="">yAxis</a>坐标轴数组的索引，指定该系列数据所用的纵坐标轴 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} barMinHeight </td> | |
| <td> 20 </td> | |
| <td> 柱状图 </td> | |
| <td> 柱条最小高度，防止某item的值过小而影响交互 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} barWidth </td> | |
| <td> 自适应 </td> | |
| <td> 柱状图 </td> | |
| <td> 柱条宽度，不设时自适应 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} brokenPoint </td> | |
| <td> null </td> | |
| <td> 折线图 </td> | |
| <td> 拐点图形类型，默认自动选择（8种类型循环使用），支持类型有：<br/>'circle' | 'rectangle' | 'triangle' | 'diamond' |<br/>'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'</td> | |
| </tr> | |
| <tr> | |
| <td> {number} brokenPointSize </td> | |
| <td> 4 </td> | |
| <td> 折线图 </td> | |
| <td> 拐点图形大小，可计算特性启用情况建议增大以提高交互体验。</td> | |
| </tr> | |
| <tr> | |
| <td> {Array} center </td> | |
| <td> null </td> | |
| <td> 饼图 </td> | |
| <td> 圆心坐标，默认为[width / 2, height / 2]自适应居中 </td> | |
| </tr> | |
| <tr> | |
| <td> {number | Array} radius </td> | |
| <td> 自适应 </td> | |
| <td> 饼图 </td> | |
| <td> 半径，默认为Min(width, height) / 2 - 50, 传数组实现环形图，[内半径，外半径] </td> | |
| </tr> | |
| <tr> | |
| <td> {number} startAngle </td> | |
| <td> 0 </td> | |
| <td> 饼图 </td> | |
| <td> 开始角度, 有效输入范围：[-180,180]</td> | |
| </tr> | |
| <tr> | |
| <td> {number} minAngle </td> | |
| <td> 5 </td> | |
| <td> 饼图 </td> | |
| <td> 最小角度，防止某item的值过小而影响交互 </td> | |
| </tr> | |
| <tr> | |
| <td> {Array} data </td> | |
| <td> [] </td> | |
| <td> 通用 </td> | |
| <td> 数据（详见<a href="#SeriesData" title="">series.data</a>） </td> | |
| </tr> | |
| </table><h5>series.data<a name="SeriesData"> </a></h5> | |
| <P> 系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组<a href="#AxisData" title="">axis.data</a>的长度，并且他们间是一一对应的。数组项通常为数值，如:</P> | |
| <div class="code"> | |
| <pre>[12, 34, 56, ..., 10, 23] | |
| </pre> | |
| </div> <P> 当某类目对应数据不存在时（ps：'不存在' 不代表值为 0），可用'-'表示，无数据在折线图中表现为折线在该点断开，在柱状图中表现为该点无柱形，如：</P> | |
| <div class="code"> | |
| <pre>[12, '-', 56, ..., 10, 23] | |
| </pre> | |
| </div> <P> 当需要对个别内容进行个性化定义时，数组项可用对象，如：</P> | |
| <div class="code"> | |
| <pre>[ | |
| 12, 34, | |
| { | |
| value : 56, | |
| tooltip:{}, //自定义特殊tooltip，仅对该item有效，详见tooltip | |
| itemStyle:{} //自定义特殊itemStyle，仅对该item有效，详见itemStyle | |
| }, | |
| ..., 10, 23 | |
| ] | |
| </pre> | |
| </div> <P> 当图表类型为scatter（散点图或气泡图）时，其数值设置比较特殊，他的横纵坐标轴都可能为数值型，并且气泡图时需要指定气泡大小，所以scatter型图表设置为：</P> | |
| <div class="code"> | |
| <pre>[ | |
| { | |
| value : [10, 25, 5] //[xValue, yValue, rValue]，数组内依次为横值，纵值，大小 | |
| }, | |
| ..., | |
| { | |
| value : [30, 128, 15], //同上 | |
| tooltip:{}, //自定义特殊tooltip，仅对该item有效，详见tooltip | |
| itemStyle:{} //自定义特殊itemStyle，仅对该item有效，详见itemStyle | |
| } | |
| ] | |
| </pre> | |
| </div> <P> 当图表类型为饼图时，需要说明每部分数据的名称name，所以设置为：</P> | |
| <div class="code"> | |
| <pre>[ | |
| { | |
| value : 12， | |
| name : 'apple' //每部分数据的名称 | |
| }, | |
| ..., | |
| { | |
| value : 23, //同上 | |
| name : 'orange' //同上 | |
| tooltip:{}, //自定义特殊tooltip，仅对该item有效，详见tooltip | |
| itemStyle:{} //自定义特殊itemStyle，仅对该item有效，详见itemStyle | |
| } | |
| ] | |
| </pre> | |
| </div> | |
| <h4>itemStyle<a name="ItemStyle"> </a></h4> | |
| <P> 图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：</P> | |
| <div class="code"> | |
| <pre>itemStyle: { | |
| normal: { | |
| ... | |
| }, | |
| emphasis: { | |
| ... | |
| } | |
| } | |
| </pre> | |
| </div> <P> 其中normal和emphasis属性为对象，其包含：</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 适用类型 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {color} color </td> | |
| <td> 图表各异 </td> | |
| <td> 通用 </td> | |
| <td> 颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} lineStyle </td> | |
| <td> 图表各异 </td> | |
| <td> 折线图 </td> | |
| <td> 线条样式，详见<a href="#LineStyle" title="">lineStyle</a></td> | |
| </tr> | |
| <tr> | |
| <td> {Object} areaStyle </td> | |
| <td> 图表各异 </td> | |
| <td> 堆积折线图，填充雷达图</td> | |
| <td> 区域样式，详见<a href="#AreaStyle" title="">areaStyle</a></td> | |
| </tr> | |
| <tr> | |
| <td> {Object} label </td> | |
| <td> {show: true, position:'outer'} </td> | |
| <td> 饼图 </td> | |
| <td> 饼图标签，默认显示在外部，离饼图距离由labelLine.length决定 </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} labelLine </td> | |
| <td> {show: true} </td> | |
| <td> 饼图 </td> | |
| <td> 饼图标签视觉引导线，默认显示 </td> | |
| </tr> | |
| </table> | |
| <P> 其中饼图标签label属性为对象，其包含：</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 标签显示策略，可选为：true（显示） | false（隐藏） </td> | |
| </tr> | |
| <tr> | |
| <td> {string} position </td> | |
| <td> 'outer' </td> | |
| <td> 标签显示位置，可选为：'outer'（外部） | 'inner'（内部） </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} textStyle </td> | |
| <td> null </td> | |
| <td> 标签的文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td> | |
| </tr> | |
| </table> | |
| <P> 其中饼图标签视觉引导线labelLine属性为对象，其包含：</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {boolean} show </td> | |
| <td> true </td> | |
| <td> 饼图标签视觉引导线显示策略，可选为：true（显示） | false（隐藏） </td> | |
| </tr> | |
| <tr> | |
| <td> {number} length </td> | |
| <td> 40 </td> | |
| <td> 线长 ，从外圆边缘起计算，可为负值</td> | |
| </tr> | |
| <tr> | |
| <td> {Object} lineStyle </td> | |
| <td> 各异 </td> | |
| <td> 线条样式，详见<a href="#LineStyle" title="">lineStyle</a></td> | |
| </tr> | |
| </table> | |
| <P> 通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略，比如希望饼图文字标签默认隐藏，并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域，可以如下设置：</P> | |
| <div class="code"> | |
| <pre>itemStyle: { | |
| normal: { | |
| label: { | |
| show: false | |
| } | |
| labelLine: { | |
| show: false | |
| } | |
| } , | |
| emphasis: { | |
| label: { | |
| show: true, | |
| position: 'outer' | |
| } | |
| labelLine: { | |
| show: true, | |
| lineStyle: { | |
| color: 'red' | |
| } | |
| } | |
| } | |
| } | |
| </pre> | |
| </div> | |
| <p>高度个性化：</p> | |
| <ul> | |
| <li>折线图 <a href="example/line.html" target="_blank">try this »</a></li> | |
| <li>柱状图 <a href="example/bar.html" target="_blank">try this »</a></li> | |
| <li>饼图 <a href="example/pie.html" target="_blank">try this »</a></li> | |
| </ul> | |
| <h4>lineStyle<a name="LineStyle"> </a></h4> | |
| <P> 线条（线段）样式</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {color} color</td> | |
| <td> 各异 </td> | |
| <td> 颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} type </td> | |
| <td> 'solid' </td> | |
| <td> 线条样式，可选为：'solid' | 'dotted' | 'dashed' </td> | |
| </tr> | |
| <tr> | |
| <td> {number} width </td> | |
| <td> 各异 </td> | |
| <td> 线宽 </td> | |
| </tr> | |
| </table> | |
| <h4>areaStyle<a name="AreaStyle"> </a></h4> | |
| <P> 区域填充样式</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {color} color</td> | |
| <td> 各异 </td> | |
| <td> 颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} type </td> | |
| <td> 'default' </td> | |
| <td> 填充样式，目前仅支持'default'(实填充) </td> | |
| </tr> | |
| </table> | |
| <h4>textStyle<a name="TextStyle"> </a></h4> | |
| <P> 文字样式</P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {color} color</td> | |
| <td> 各异 </td> | |
| <td> 颜色 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} decoration </td> | |
| <td> 'none' </td> | |
| <td> 修饰，仅对tooltip.textStyle生效 </td> | |
| </tr> | |
| <tr> | |
| <td> {string} align </td> | |
| <td> 各异 </td> | |
| <td> 水平对齐方式，可选为：'left' | 'right' | 'center' </td> | |
| </tr> | |
| <tr> | |
| <td> {string} baseline </td> | |
| <td> 各异 </td> | |
| <td> 垂直对齐方式，可选为：'top' | 'bottom' | 'middle' </td> | |
| </tr> | |
| <tr> | |
| <td> {string} fontFamily </td> | |
| <td> 'Arial, Verdana, sans-serif'</td> | |
| <td> 字体系列 </td> | |
| </tr> | |
| <tr> | |
| <td> {number} fontSize </td> | |
| <td> 12</td> | |
| <td> 字号 ，单位px</td> | |
| </tr> | |
| <tr> | |
| <td> {string} fontStyle </td> | |
| <td> 'normal'</td> | |
| <td> 样式，可选为：'normal' | 'italic' | 'oblique' </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} fontWeight </td> | |
| <td> 'normal'</td> | |
| <td> 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 </td> | |
| </tr> | |
| </table> | |
| <h4>loadingOption<a name="Loadingoption"> </a></h4> | |
| <P> 过渡显示，loading（读取中）的选项。<a href="example/loading.html" target="_blank">try this »</a></P> | |
| <table cellspacing="0" class="ADoc_table"> | |
| <tr> | |
| <th> 名称 </th> | |
| <th> 默认值 </th> | |
| <th> 描述 </th> | |
| </tr> | |
| <tr> | |
| <td> {string} text </td> | |
| <td> 'Loading...' </td> | |
| <td> 显示话术 </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} x </td> | |
| <td> 'center' </td> | |
| <td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {string | number} y </td> | |
| <td> 'center' </td> | |
| <td> 垂直安放位置，默认为全图居中，可选为：'center' | 'bottom' | 'top' | {number}（y坐标，单位px） </td> | |
| </tr> | |
| <tr> | |
| <td> {Object} textStyle </td> | |
| <td> null </td> | |
| <td> 显示话术的文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td> | |
| </tr> | |
| <tr> | |
| <td> {string} effect </td> | |
| <td> 'spin' </td> | |
| <td> loading效果，可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'</td> | |
| </tr> | |
| <tr> | |
| <td> {object} effectOption </td> | |
| <td> null </td> | |
| <td> loading效果选项，详见zrender</td> | |
| </tr> | |
| <tr> | |
| <td> {number} progress </td> | |
| <td> null </td> | |
| <td> 指定当前进度[0~1]，个别效果有效。</td> | |
| </tr> | |
| </table> | |
| <h4>color<a name="Color"> </a></h4> | |
| <P> {Array}<br/> | |
| ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',<br/> | |
| '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0'] | |
| <br/>，默认颜色序列</P> | |
| <h4>calculable<a name="Calculable"> </a></h4> | |
| <P> {boolean} false，是否启用拖拽重计算特性，默认关闭</P> | |
| <h4>calculableColor<a name="CalculableColor"> </a></h4> | |
| <P> {color} 'rgba(255,165,0,0.6)'，拖拽重计算提示边框颜色</P> | |
| <h4>calculableHolderColor<a name="CalculableHolderColor"> </a></h4> | |
| <P> {color} '#ccc'，可计算占位提示颜色</P> | |
| <h4>nameConnector<a name="NameConnector"> </a></h4> | |
| <P> {string} ' & '，数据合并名字间连接符</P> | |
| <h4>valueConnector<a name="ValueConnector"> </a></h4> | |
| <P> {string} ' : '，数据合并名字与数值间连接符</P> | |
| <h4>animation<a name="Animation"> </a></h4> | |
| <P> {boolean} true，是否启用图表初始化动画，默认开启，建议IE8-关闭</P> | |
| <h4>animationDuration<a name="AnimationDuration"> </a></h4> | |
| <P> {number} 2000，动画时长，单位ms，支持多级控制</P> | |
| <h4>animationEasing<a name="AnimationEasing"> </a></h4> | |
| <P> {string} 'BounceOut'，主元素的缓动效果，支持多级控制，详见<a href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing" target="_blank">zrender.animation.easing</a>，可选有：<br/> | |
| 'Linear',<br/> | |
| 'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',<br/> | |
| 'CubicIn', 'CubicOut', 'CubicInOut',<br/> | |
| 'QuarticIn', 'QuarticOut', 'QuarticInOut',<br/> | |
| 'QuinticIn', 'QuinticOut', 'QuinticInOut',<br/> | |
| 'SinusoidalIn', 'SinusoidalOut', 'SinusoidalInOut',<br/> | |
| 'ExponentialIn', 'ExponentialOut', 'ExponentialInOut',<br/> | |
| 'CircularIn', 'CircularOut', 'CircularInOut',<br/> | |
| 'ElasticIn', 'ElasticOut', 'ElasticInOut',<br/> | |
| 'BackIn', 'BackOut', 'BackInOut',<br/> | |
| 'BounceIn', 'BounceOut', 'BounceInOut'<br/> | |
| </P> | |
| <h4>多级控制设计<a name="多级控制设计"> </a></h4> | |
| <P> 简单的说，你可以通过这三级满足不同level的定制和个性化需求：</P> | |
| <ul> | |
| <li>通过 option.* 设置全局统一配置；</li> | |
| <li>通过 option.series.* 设置特定系列特殊配置，其优先级高于 option 内的同名配置；</li> | |
| <li>通过 option.series.data.* 设置特定数据项的特殊配置，最高优先级；</li> | |
| </ul> | |
| <p><img src="./asset/img/doc/multiControl.jpg" title="" alt="多级控制"/></P> | |
| <h3>附录：一个直观的事例<a name="附录一个直观的事例"> </a></h3> | |
| <p>查看更多实例 <a href="example.html" target="_blank">example</a></p> | |
| <div class="code"> | |
| <pre>// 图表实例化------------------ | |
| var echarts = require('echarts/echarts'); | |
| 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(); | |
| </pre> | |
| </div> </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <!-- FOOTER --> | |
| <footer> | |
| <p class="pull-right"><a href="#">Back to top</a></p> | |
| <p>© 2013 Ecom-FE. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> | |
| </footer> | |
| </div><!--/.fluid-container--> | |
| <script src="asset/js/jquery.js"></script> | |
| <script src="asset/js/bootstrap-transition.js"></script> | |
| <script src="asset/js/bootstrap-alert.js"></script> | |
| <script src="asset/js/bootstrap-modal.js"></script> | |
| <script src="asset/js/bootstrap-dropdown.js"></script> | |
| <script src="asset/js/bootstrap-scrollspy.js"></script> | |
| <script src="asset/js/bootstrap-tab.js"></script> | |
| <script src="asset/js/bootstrap-tooltip.js"></script> | |
| <script src="asset/js/bootstrap-popover.js"></script> | |
| <script src="asset/js/bootstrap-button.js"></script> | |
| <script src="asset/js/bootstrap-collapse.js"></script> | |
| <script src="asset/js/bootstrap-carousel.js"></script> | |
| <script src="asset/js/bootstrap-typeahead.js"></script> | |
| <script src="asset/js/echartsConfig.js"></script> | |
| <script src="asset/js/echartsDoc.js"></script> | |
| </body> | |
| </html> |