5709 lines
322 KiB
HTML
5709 lines
322 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="ECharts">
|
||
<meta name="author" content="kener.linfeng@gmail.com">
|
||
<title>ECharts · Doc</title>
|
||
|
||
<link rel="shortcut icon" href="./asset/ico/favicon.png">
|
||
|
||
<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="./asset/css/bootstrap.css" rel="stylesheet">
|
||
<link href="./asset/css/carousel.css" rel="stylesheet">
|
||
<link href="./asset/css/echartsHome.css" rel="stylesheet">
|
||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Fixed navbar -->
|
||
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
|
||
|
||
<div class="container-fluid">
|
||
<div class="row-fluid">
|
||
<div class="col-md-3">
|
||
<div class="affix panel col-md-3" id="accordion">
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-description">
|
||
<strong>描述</strong>
|
||
</div>
|
||
</div>
|
||
<div id="collapse-description" class="panel-collapse collapse in">
|
||
<div class="panel-body">
|
||
<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="#K">k</a></li>
|
||
<li><a href="#Pie">pie</a></li>
|
||
<li><a href="#Radar">radar</a></li>
|
||
<li><a href="#Chord">chord</a></li>
|
||
<li><a href="#Force">force</a></li>
|
||
<li><a href="#Map">map</a></li>
|
||
<li><a href="#Heatmap">heatmap</a></li>
|
||
<li><a href="#Gauge">gauge</a></li>
|
||
<li><a href="#Funnel">funnel</a></li>
|
||
<li><a href="#eventRiver">eventRiver</a></li>
|
||
<li><a href="#treemap">treemap</a></li>
|
||
<li><a href="#venn">venn</a></li>
|
||
<li><a href="#treeChart">tree</a></li>
|
||
<li><a href="#wordCloud">wordCloud</a></li>
|
||
</ul>
|
||
<li><a href="#引入ECharts">引入ECharts</a></li>
|
||
<ul>
|
||
<li><a href="#引入ECharts1">模块化包引入</a></li>
|
||
<li><a href="#引入ECharts2">模块化单文件引入（<b>推荐</b>）</a></li>
|
||
<li><a href="#引入ECharts3">标签式单文件引入</a></li>
|
||
</ul>
|
||
<li><a href="#自定义构建echarts单文件">自定义构建echarts单文件</a></li>
|
||
<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="#Timeline">timeline</a></li>
|
||
<li><a href="#Title">title</a></li>
|
||
<li><a href="#Toolbox">toolbox</a></li>
|
||
<li><a href="#Tooltip">tooltip</a></li>
|
||
<li><a href="#Legend">legend</a></li>
|
||
<li><a href="#DataRange">dataRange</a></li>
|
||
<li><a href="#DataZoom">dataZoom</a></li>
|
||
<li><a href="#RoamController">roamController</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="#Polar">polar</a></li>
|
||
<li><a href="#Series">series（通用）</a></li>
|
||
<ul>
|
||
<li><a href="#SeriesCartesian">series（直角系）</a></li>
|
||
<li><a href="#SeriesPie">series（饼图）</a></li>
|
||
<li><a href="#SeriesRadar">series（雷达图）</a></li>
|
||
<li><a href="#SeriesMap">series（地图）</a></li>
|
||
<li><a href="#SeriesHeatmap">series（热力图）</a></li>
|
||
<li><a href="#SeriesForce">series（力导向布局图）</a></li>
|
||
<li><a href="#SeriesChord">series（和弦图）</a></li>
|
||
<li><a href="#SeriesGauge">series（仪表盘）</a></li>
|
||
<li><a href="#SeriesFunnel">series（漏斗图）</a></li>
|
||
<li><a href="#SeriesEventRiver">series（事件河流图）</a></li>
|
||
<li><a href="#SeriesTreemap">series（矩形树图）</a></li>
|
||
<li><a href="#SeriesTree">series（树图）</a></li>
|
||
<li><a href="#SeriesVenn">series（维恩图）</a></li>
|
||
<li><a href="#SeriesWordCloud">series（字符云）</a></li>
|
||
<li><a href="#SeriesData">data</a></li>
|
||
<li><a href="#SeriesMarkPoint">markPoint</a></li>
|
||
<ul>
|
||
<li><a href="#SeriesMarkPointData">data</a></li>
|
||
</ul>
|
||
<li><a href="#SeriesMarkLine">markLine</a></li>
|
||
<ul>
|
||
<li><a href="#SeriesMarkLineData">data</a></li>
|
||
</ul>
|
||
</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="#NoDataLoadingOption">noDataLoadingOption</a></li>
|
||
<li><a href="#BackgroundColor">backgroundColor</a></li>
|
||
<li><a href="#Color">color</a></li>
|
||
<li><a href="#SymbolList">symbolList</a></li>
|
||
<li><a href="#RenderAsImage">renderAsImage</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="#AddDataAnimation">addDataAnimation</a></li>
|
||
<li><a href="#AnimationThreshold">animationThreshold</a></li>
|
||
<li><a href="#AnimationDuration">animationDuration</a></li>
|
||
<li>
|
||
<a href="#animationDurationUpdate">animationDurationUpdate</a>
|
||
</li>
|
||
<li><a href="#AnimationEasing">animationEasing</a></li>
|
||
</ul>
|
||
<li><a href="#图数据表示">图数据表示</a></li>
|
||
<ul>
|
||
<li><a href="#categories">categories</a></li>
|
||
<li><a href="#nodes(data)">nodes(data)</a></li>
|
||
<li><a href="#GraphLinks">links</a></li>
|
||
<li><a href="#GraphMatrix">matrix</a></li>
|
||
</ul>
|
||
<li><a href="#多级控制设计">多级控制设计</a></li>
|
||
<li><a href="#附录地图扩展">附录：地图扩展</a></li>
|
||
<li><a href="#附录组件图表实例接口">附录：组件和图表的实例接口</a></li>
|
||
<ul>
|
||
<li><a href="#附录组件实例接口">组件实例接口</a></li>
|
||
<ul>
|
||
<li><a href="#TimelineInterface">timeline</a></li>
|
||
<li><a href="#TooltipInterface">tooltip</a></li>
|
||
<li><a href="#LegendInterface">legend</a></li>
|
||
<li><a href="#DataRangeInterface">dataRange</a></li>
|
||
<li><a href="#DataZoomInterface">dataZoom</a></li>
|
||
<li><a href="#GridInterface">grid</a></li>
|
||
<li><a href="#AxisInterface">xAxis/yAxis</a></li>
|
||
<li><a href="#CategoryAxisInterface">categoryAxis</a></li>
|
||
<li><a href="#ValueAxisInterface">valueAxis</a></li>
|
||
<li><a href="#PolarInterface">polar</a></li>
|
||
</ul>
|
||
<li><a href="#附录图表实例接口">图表实例接口</a></li>
|
||
<ul>
|
||
<li><a href="#MapInterface">map</a></li>
|
||
</ul>
|
||
</ul>
|
||
<li><a href="#附录一个直观的事例">附录：一个直观的事例</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-config">
|
||
<strong>默认选项</strong>
|
||
</div>
|
||
</div>
|
||
<div id="collapse-config" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
<div id="config"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!--/.well -->
|
||
</div>
|
||
<div class="col-md-9">
|
||
<p style="margin:20px 0 -30px 0">
|
||
<a href="./start.html" target="_blank" style="margin-right: 50px;">入门教程 ( Getting started ) »</a>
|
||
<a href="https://github.com/ecomfe/echarts/issues?page=1&state=open" target="_blank">Any feedback or question ? »</a>
|
||
</p>
|
||
<div id="doc">
|
||
<h3>简介<a name="简介"> </a></h3>
|
||
<p>ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。</P>
|
||
<p>支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。</P>
|
||
<img src="asset/img/architecture.png" alt="Echarts Architecture"/>
|
||
<h3>名词解析<a name="名词解析"> </a></h3>
|
||
<p>基本名词</p>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<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> dataRange </td>
|
||
<td> 值域选择，常用于展现地域数据时选择值域范围 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> dataZoom </td>
|
||
<td> 数据区域缩放，常用于展现大量数据时选择可视范围 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> roamController </td>
|
||
<td> 缩放漫游组件，搭配地图使用 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> toolbox </td>
|
||
<td> 辅助工具箱，辅助功能，如添加标线，框选缩放等</td>
|
||
</tr>
|
||
<tr>
|
||
<td> tooltip </td>
|
||
<td> 气泡提示框，常用于展现更详细的数据 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> timeline </td>
|
||
<td> 时间轴，常用于展现同一系列数据在时间维度上的多份数据 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> series </td>
|
||
<td> 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 </td>
|
||
</tr>
|
||
</table>
|
||
<P> 图表名词</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<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> k </td>
|
||
<td> K线图，蜡烛图。常用于展现股票交易数据。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> pie </td>
|
||
<td> 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> radar </td>
|
||
<td> 雷达图，填充雷达图。高维度数据展现的常用图表。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> chord </td>
|
||
<td> 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> force </td>
|
||
<td> 力导布局图。常用于展现复杂关系网络聚类布局。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> map </td>
|
||
<td> 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> heatmap </td>
|
||
<td> 热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> gauge </td>
|
||
<td> 仪表盘。用于展现关键指标数据，常见于BI类系统。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> funnel </td>
|
||
<td> 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> evnetRiver </td>
|
||
<td> 事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td> treemap </td>
|
||
<td>
|
||
矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> venn </td>
|
||
<td>
|
||
韦恩图。用于展示集合以及它们的交集。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> tree </td>
|
||
<td> 树图。用于展示树形数据结构各节点的层级关系</td>
|
||
</tr>
|
||
<tr>
|
||
<td> wordCloud </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 full">
|
||
<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 full">
|
||
<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 full">
|
||
<tr>
|
||
<th colspan=2> 散点图 </th>
|
||
<th> 气泡图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/scatter1.png" title="" alt="散点图"/></td>
|
||
<td><img src="./asset/img/example/dataRange1.png" title="" alt="散点图"/></td>
|
||
<td><img src="./asset/img/example/scatter2.png" title="" alt="气泡图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：k<a name="K"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan="2"> K线图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:center"><img src="./asset/img/example/k1.png" title="" alt="K线图" /></td>
|
||
<td style="text-align:center"><img src="./asset/img/example/k.png" title="" alt="K线图" /></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：pie<a name="Pie"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 饼图 </th>
|
||
<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>
|
||
<td><img src="./asset/img/example/pie4.png" title="" alt="南丁格尔玫瑰图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：radar<a name="Radar"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 雷达图 </th>
|
||
<th> 填充雷达图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/radar1.png" title="" alt="雷达图"/></td>
|
||
<td><img src="./asset/img/example/radar2.png" title="" alt="填充雷达图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：chord<a name="Chord"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan="2"> 和弦图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/chord1.png" title="" alt="和弦图"/></td>
|
||
<td><img src="./asset/img/example/chord2.png" title="" alt="和弦图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：force<a name="Force"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan="3"> 力导向布局图。 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/force1.png" title="" alt="力导向布局图"/></td>
|
||
<td><img src="./asset/img/example/force2.png" title="" alt="力导向布局图"/></td>
|
||
<td><img src="./asset/img/example/webkit-dep.png" title="" alt="力导向布局图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：map<a name="Map"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 中国地图 </th>
|
||
<th> 全国34个省市自治区 </th>
|
||
<th> 世界地图</th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/map1.png" title="" alt="中国地图"/></td>
|
||
<td><img src="./asset/img/example/map3.png" title="" alt="全国34个省市自治区"/></td>
|
||
<td><img src="./asset/img/example/map4.png" title="" alt="世界地图"/></td>
|
||
</tr>
|
||
<tr>
|
||
<th> 子区域模式 </th>
|
||
<th> 标准GeoJson扩展 </th>
|
||
<th> SVG扩展</th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/map8.png" title="" alt="子区域模式"/></td>
|
||
<td><img src="./asset/img/example/map6.png" title="" alt="标准GeoJson扩展"/></td>
|
||
<td><img src="./asset/img/example/map16.png" title="" alt="SVG扩展"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：heatmap<a name="Heatmap"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan="3"> 热力图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/heatmap.png" title="" alt="热力图"/></td>
|
||
<td><img src="./asset/img/example/heatmap2.png" title="" alt="热力图"/></td>
|
||
<td><img src="./asset/img/example/heatmap_map.png" title="" alt="热力图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：gauge<a name="Gauge"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan=2> 仪表盘 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/gauge4.png" title="" alt="仪表盘"/></td>
|
||
<td><img src="./asset/img/example/gauge3.png" title="" alt="仪表盘"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：funnel<a name="Funnel"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan=3> 漏斗图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/funnel1.png" title="" alt="漏斗图"/></td>
|
||
<td><img src="./asset/img/example/funnel2.png" title="" alt="漏斗图"/></td>
|
||
<td><img src="./asset/img/example/funnel3.png" title="" alt="漏斗图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：eventRiver<a name="eventRiver"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan=3> 事件河流图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/eventRiver1.png" title="" alt="事件河流图"/></td>
|
||
<td><img src="./asset/img/example/eventRiver2.png" title="" alt="事件河流图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：treemap<a name="treemap"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan=2> 矩形树图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/treemap.png" title="" alt="矩形树图"/></td>
|
||
<td><img src="./asset/img/example/treemap1.png" title="" alt="矩形树图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：venn<a name="venn"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table" style="width:600px;">
|
||
<tr>
|
||
<th colspan=1> 韦恩图类型 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/venn.png" title="" alt="韦恩图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：tree<a name="treeChart"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th colspan=2> 树图 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/tree1.png" title="" alt="树图"/></td>
|
||
<td><img src="./asset/img/example/tree2.png" title="" alt="树图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>单图表类型：wordCloud<a name="wordCloud"> </a></h4>
|
||
<table cellspacing="0" class="ADoc_table" style="width:600px;">
|
||
<tr>
|
||
<th colspan=2> 字符云 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="./asset/img/example/wordCloud.png" title="" alt="树图"/></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>引入ECharts<a name="引入ECharts"> </a></h3>
|
||
<p>echarts提供多种引入方式，请根据你的项目类型选择合适的方式：</p>
|
||
|
||
<h3>模块化包引入<a name="引入ECharts1"> </a></h3>
|
||
<P>如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如<a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载<a href="https://github.com/ecomfe/zrender" target="_blank">zrender</a>到本地，可参考<a href="example/demo.html" target="_blank">demo</a>，你需要配置如下。</p>
|
||
<p>需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。</P>
|
||
<div class="code">
|
||
<pre>//from echarts example
|
||
require.config({
|
||
packages: [
|
||
{
|
||
name: 'echarts',
|
||
location: '../../src',
|
||
main: 'echarts'
|
||
},
|
||
{
|
||
name: 'zrender',
|
||
location: '../../../zrender/src', // zrender与echarts在同一级目录
|
||
main: 'zrender'
|
||
}
|
||
]
|
||
});
|
||
</pre>
|
||
</div>
|
||
|
||
<h3>模块化单文件引入（<b>推荐</b>）<a name="引入ECharts2"> </a></h3>
|
||
<P>如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。</p>
|
||
<p>自2.1.8起，我们为echarts开发了专门的合并压缩工具<a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>。如你所发现的，build文件夹下已经包含了由<a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>生成的单文件：</P>
|
||
<ul>
|
||
<li>dist（文件夹） : 经过合并、压缩的单文件</li>
|
||
<li>
|
||
<ul>
|
||
<li>echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入</li>
|
||
<li>chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
|
||
<ul>
|
||
<li>line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）</li>
|
||
<li>bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）</li>
|
||
<li>scatter.js : 散点图</li>
|
||
<li>k.js : K线图</li>
|
||
<li>pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）</li>
|
||
<li>radar.js : 雷达图</li>
|
||
<li>map.js : 地图</li>
|
||
<li>force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）</li>
|
||
<li>chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）</li>
|
||
<li>funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）</li>
|
||
<li>gauge.js : 仪表盘</li>
|
||
<li>eventRiver.js : 事件河流图</li>
|
||
<li>treemap.js : 矩阵树图</li>
|
||
<li>venn.js : 韦恩图</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试</li>
|
||
</ul>
|
||
<p>采用单一文件使用例子见<a href="example/www/index.html" target="_blank">ECharts单一文件引入</a>，存放在example/www下，首先你需要通过script标签引入echarts主文件</p>
|
||
<div class="code">
|
||
<pre>//from echarts example
|
||
<body>
|
||
<div id="main" style="height:400px;"></div>
|
||
...
|
||
<script src="./js/echarts.js"></script>
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<p>在主文件引入后你将获得一个AMD环境，配置require.conifg如下：</p>
|
||
<div class="code">
|
||
<pre>//from echarts example
|
||
<body>
|
||
<div id="main" style="height:400px;"></div>
|
||
...
|
||
<script src="./js/echarts.js"></script>
|
||
<script type="text/javascript">
|
||
require.config({
|
||
paths: {
|
||
echarts: './js/dist'
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<p>require.config配置后就可以通过动态加载使用echarts</p>
|
||
<div class="code">
|
||
<pre>//from echarts example
|
||
<body>
|
||
<div id="main" style="height:400px;"></div>
|
||
...
|
||
<script src="./js/echarts.js"></script>
|
||
<script type="text/javascript">
|
||
require.config({
|
||
paths: {
|
||
echarts: './js/dist'
|
||
}
|
||
});
|
||
require(
|
||
[
|
||
'echarts',
|
||
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
|
||
'echarts/chart/bar'
|
||
],
|
||
function (ec) {
|
||
var myChart = ec.init(document.getElementById('main'));
|
||
var option = {
|
||
...
|
||
}
|
||
myChart.setOption(option);
|
||
}
|
||
);
|
||
</script>
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<p>总结来说，模块化单文件引入ECharts，你需要如下4步：</p>
|
||
<ol>
|
||
<li>为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）</li>
|
||
<li>通过script标签引入echarts主文件</li>
|
||
<li>为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明</li>
|
||
<li>动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）</li>
|
||
</ol>
|
||
<p>详见<a href="./start.html" target="_blank" style="margin-right: 50px;">入门教程 ( Getting started ) »</a></p>
|
||
|
||
<h3>标签式单文件引入<a name="引入ECharts3"> </a></h3>
|
||
<P>自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考<a href="example/www2/index.html" target="_blank">ECharts标签式引入</a>，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。</p>
|
||
<p>标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：<br/>echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')</p>
|
||
<div class="code">
|
||
<pre>//from echarts example
|
||
<body>
|
||
<div id="main" style="height:400px;"></div>
|
||
...
|
||
<script src="example/www2/js/dist/echarts-all.js"></script>
|
||
<script>
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var option = {
|
||
...
|
||
}
|
||
myChart.setOption(option);
|
||
</script>
|
||
</body>
|
||
</pre>
|
||
</div>
|
||
<p>可以直接引入的单文件如下：</p>
|
||
<ul>
|
||
<li>dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据</li>
|
||
<li>source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试</li>
|
||
</ul>
|
||
<p>详见<a href="./start.html" target="_blank" style="margin-right: 50px;">入门教程 ( Getting started ) »</a></p>
|
||
|
||
<h3>自定义构建echarts单文件<a name="自定义构建echarts单文件"></a></h3>
|
||
<p>详见 echarts-optimizer 安装使用说明：<a href="https://github.com/ecomfe/echarts-optimizer/blob/master/README.md" target="_blank">README.md</a></p>
|
||
|
||
<h3>初始化<a name="初始化"> </a></h3>
|
||
<p>通过require获得echarts接口（或者命名空间）后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例（1.4.0+）。init方法说明如下：</p>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 参数 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{ECharts}</b> init </td>
|
||
<td> <b>{dom}</b> dom, <br/><b>{string | Object =}</b> theme </td>
|
||
<td> 初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象。如：
|
||
<br/>var myCharts = echarts.init(document.getElementById('main'), 'macarons')；
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<p>图表实例可用方法见<a href="#方法">方法</a></p>
|
||
<p>引入ECharts后的的初始化代码如下：</p>
|
||
<div class="code">
|
||
<pre>
|
||
// 作为入口
|
||
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({...}); </pre>
|
||
</div>
|
||
<p>熟悉模块化的你可以跳过了下面代码了</p>
|
||
<div class="code">
|
||
<pre>
|
||
// 不习惯模块化的你当然可以
|
||
var echarts;
|
||
require(['echarts'], function (ec){
|
||
echarts = ec;
|
||
});
|
||
// 是的，把echarts加载后保存起来作为命名空间使用</pre>
|
||
</div>
|
||
|
||
<h3>实例方法<a name="实例方法"> </a></h3>
|
||
<p>实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用</p>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 参数 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> setOption</td>
|
||
<td><b>{Object}</b> option, <br/><b>{boolean=}</b> notMerge</td>
|
||
<td>万能接口，配置图表实例任何可配置选项（详见<a href="#Option" title="">option</a>），多次调用时option选项默认是合并（merge）的，merge的设计可以让setOption很方便的成为更新任何属性的万能方法，比如你仅需要改title文字，则仅需要：<br/> setOption({title : {text : '新标题'}}); <br/>如果不需要，可以通过notMerger参数为true阻止与上次option的合并，如多次setOption间数据改变、长度不一致等的场景。
|
||
<br/><br/>2.0.0起支持timeline组件，option中包含timeline（详见<a href="#Timeline" title="">timeline</a>）时每一个独立的option应该放置到命名为options的数组内，如
|
||
<pre>myCharts.setOption({
|
||
timeline : {...},
|
||
options : [
|
||
{ // option1
|
||
title : {...},
|
||
series : [...]
|
||
},
|
||
{...}, // option2
|
||
...
|
||
]
|
||
});</pre>
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{Object}</b> getOption</td>
|
||
<td><b>{void}</b></td>
|
||
<td>返回内部持有的当前显示option克隆（拷贝）。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> setSeries</td>
|
||
<td><b>{Array}</b> series, <br/><b>{boolean=}</b> notMerge</td>
|
||
<td>数据接口，驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），效果等同调用 setOption({series : {...}}, notMerge) </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{Object}</b> getSeries</td>
|
||
<td><b>{void}</b></td>
|
||
<td>返回内部持有的当前显示series克隆（拷贝），效果同 getOption().series</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> addData</td>
|
||
<td>单组数据：
|
||
<br/><b>{number}</b> seriesIdx
|
||
<br/><b>{number | Object}</b> data
|
||
<br/><b>{boolean=}</b> isHead
|
||
<br/><b>{boolean=}</b> dataGrow
|
||
<br/><b>{string=}</b> additionData
|
||
<br/>多组数据添加：
|
||
<br/><b>{Array}</b> params
|
||
</td>
|
||
<td>动态数据接口，<a href="example/dynamicLineBar.html" target="_blank">try this (Line & Bar) »</a> <a href="example/dynamicScatterK.html" target="_blank">try this (Scatter & K) »</a> <a href="example/dynamicPieRadar.html" target="_blank">try this (Pie & Radar) »</a>
|
||
<br/>seriesIdx 系列索引
|
||
<br/>data 增加数据
|
||
<br/>isHead 是否队头加入，默认，不指定或false时为队尾插入
|
||
<br/>dataGrow 是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据
|
||
<br/>additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和dataGrow
|
||
<br/>多组数据添加时参数为：
|
||
<br/>params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> addMarkPoint</td>
|
||
<td><b>{number}</b> seriesIdx
|
||
<br/><b>{Object}</b> markData
|
||
</td>
|
||
<td>新增标注接口，其中
|
||
<br/>seriesIdx 系列索引
|
||
<br/>markData [标注]对象，同<a href="#SeriesMarkPoint" title="">series.markPoint</a>，支持多个
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> addMarkLine</td>
|
||
<td><b>{number}</b> seriesIdx
|
||
<br/><b>{Object}</b> markData
|
||
</td>
|
||
<td>新增标线接口，其中
|
||
<br/>seriesIdx 系列索引
|
||
<br/>markData [标线]对象，同<a href="#SeriesMarkLine" title="">series.markLine</a>，支持多个
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> delMarkPoint</td>
|
||
<td><b>{number}</b> seriesIdx
|
||
<br/><b>{string}</b> markName
|
||
</td>
|
||
<td>删除单个标注接口，其中
|
||
<br/>seriesIdx 系列索引
|
||
<br/>markName [标注]名称
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> delMarkLine</td>
|
||
<td><b>{number}</b> seriesIdx
|
||
<br/><b>{string}</b> markName
|
||
</td>
|
||
<td>删除单个标线接口，其中
|
||
<br/>seriesIdx 系列索引
|
||
<br/>markName [标线]名称，已构建的标线名称默认为markLine数据中起始点的name，如果同时终点也有name属性，如地图标线，则标线名称等于“nameStart > nameEnd”，如markLine的data为
|
||
<br/>[{name:'北京', value:100}, {name:'上海'}]
|
||
<br/>则删除该标线时传入的markName为 "北京 > 上海"
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> on</td>
|
||
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
|
||
<td>事件绑定，事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间作为事件名引用，当前版本支持事件有：
|
||
<br/>-----------------------基础事件-----------------------
|
||
<br/>REFRESH（刷新），
|
||
<br/>RESTORE（还原），
|
||
<br/>RESIZE（显示空间变化），
|
||
<br/>CLICK（点击），
|
||
<br/>DBLCLICK（双击），
|
||
<br/>HOVER（悬浮），
|
||
<br/>MOUSEOUT（鼠标离开数据图形），
|
||
<br/>---------------------交互逻辑事件--------------------
|
||
<br/>DATA_CHANGED（数据修改，如拖拽重计算），
|
||
<br/>DATA_VIEW_CHANGED（数据视图修改），
|
||
<br/>MAGIC_TYPE_CHANGED（动态类型切换），
|
||
<br/>TIMELINE_CHANGED（时间轴变化），
|
||
<br/>DATA_ZOOM（数据区域缩放），
|
||
<br/>DATA_RANGE（值域漫游），
|
||
<br/>DATA_RANGE_SELECTED（值域开关选择），
|
||
<br/>DATA_RANGE_HOVERLINK（值域漫游hover），
|
||
<br/>LEGEND_SELECTED（图例开关选择），
|
||
<br/>LEGEND_HOVERLINK（图例hover），
|
||
<br/>MAP_ROAM（地图漫游），
|
||
<br/>MAP_SELECTED（地图选择），
|
||
<br/>PIE_SELECTED（饼图选择），
|
||
<br/>FORCE_LAYOUT_END（力导向布局结束）
|
||
<br/><a href="./example/event.html" target="_blank">事件调试 » </a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> un</td>
|
||
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
|
||
<td>事件解绑定 </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> setTheme</td>
|
||
<td><b>{string | Object}</b> theme</td>
|
||
<td> 设置主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象 </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> connect</td>
|
||
<td><b>{ECharts | Array <ECharts>}</b> connectTarget</td>
|
||
<td>多图联动，传入联动目标为EChart实例，支持数组。多图联动支持直角系下tooltip联动，保存图片的自动拼接，同时支持的联动事件有：
|
||
<br/>REFRESH，RESTORE，MAGIC_TYPE_CHANGED
|
||
<br/>DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED
|
||
<br/><a href="./example/mix8.html" target="_blank">多图联动 »</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> disConnect</td>
|
||
<td><b>{ECharts | Array <ECharts>}</b> connectTarget</td>
|
||
<td>解除已连结的多图联动 </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> showLoading</td>
|
||
<td><b>{Object}</b> loadingOption</td>
|
||
<td> 过渡控制（详见<a href="#Loadingoption" title="">loadingOption</a>），显示loading（读取中） <a href="example/loading.html" target="_blank">try this »</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> hideLoading</td>
|
||
<td><b>{void}</b></td>
|
||
<td>过渡控制，隐藏loading（读取中） </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{ZRender}</b> getZrender</td>
|
||
<td><b>{void}</b></td>
|
||
<td>获取当前图表所用ZRender实例，可用于添加额外图形或进行深度定制，zrender接口详见<a href="http://ecomfe.github.io/zrender/doc/doc.html#zrenderInstance" target="_blank">ZRender</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{string}</b> getDataURL</td>
|
||
<td><b>{string=}</b> imgType</td>
|
||
<td>获取当前图表的Base64图片dataURL，IE8-不支持，imgType 图片类型，支持png|jpeg，默认为png</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{Dom}</b> getImage</td>
|
||
<td><b>{string=}</b> imgType</td>
|
||
<td>获取一个当前图表的img，imgType 图片类型，支持png|jpeg，默认为png</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> resize</td>
|
||
<td><b>{void}</b></td>
|
||
<td>ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，使用方可以根据自己的需求绑定关心的事件，主动调用resize达到自适应的效果，常见如window.onresize = myChart.resize。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> refresh</td>
|
||
<td><b>{void}</b></td>
|
||
<td>刷新图表，图例选择、数据区域缩放，拖拽状态均保持。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> restore</td>
|
||
<td><b>{void}</b></td>
|
||
<td>还原图表，各种状态均被清除，还原为最初展现时的状态。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{self}</b> clear</td>
|
||
<td><b>{void}</b></td>
|
||
<td>清空绘画内容，清空后实例可用 </td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>{void}</b> dispose</td>
|
||
<td><b>{void}</b></td>
|
||
<td>释放图表实例，释放后实例不再可用 </td>
|
||
</tr>
|
||
</table>
|
||
<h3>选项<a name="选项"> </a></h3>
|
||
|
||
<h4>option<a name="Option"> </a></h4>
|
||
<P> 图表选项，包含图表实例任何可配置选项：<span class='bgGreen'> 公共选项 </span>，<span class='bgRed'> 组件选项 </span>，<span class='bgBlue'> 数据选项 </span></P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr class='bgGreen'>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 全图默认背景，（详见<a href="#BackgroundColor" title="">backgroundColor</a>），支持rgba，默认为无，透明</td>
|
||
</tr>
|
||
<tr class='bgGreen'>
|
||
<td> <b>{Array}</b> color </td>
|
||
<td> 数值系列的颜色列表，（详见<a href="#Color" title="">color</a>），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取 </td>
|
||
</tr>
|
||
<tr class='bgGreen'>
|
||
<td> <b>{boolean}</b> renderAsImage </td>
|
||
<td> 非IE8-支持渲染为图片，（详见<a href="#RenderAsImage" title="">renderAsImage</a>）</td>
|
||
</tr>
|
||
<tr class='bgGreen'>
|
||
<td> <b>{boolean}</b> calculable </td>
|
||
<td> 是否启用拖拽重计算特性，默认关闭，（详见<a href="#calculable" title="">calculable</a>，相关的还有
|
||
<a href="#CalculableColor" title="">calculableColor</a>，
|
||
<a href="#CalculableHolderColor" title="">calculableHolderColor</a>，
|
||
<a href="#NameConnector" title="">nameConnector</a>，
|
||
<a href="#ValueConnector" title="">valueConnector</a>）
|
||
</td>
|
||
</tr>
|
||
<tr class='bgGreen'>
|
||
<td> <b>{boolean}</b> animation </td>
|
||
<td> 是否开启动画，默认开启，（详见
|
||
<a href="#Animation" title="">animation</a>，相关的还有
|
||
<a href="#AddDataAnimation" title="">addDataAnimation</a>，
|
||
<a href="#AnimationThreshold" title="">animationThreshold</a>，
|
||
<a href="#AnimationDuration" title="">animationDuration</a>，
|
||
<a href="#animationDurationUpdate" title="">
|
||
animationDurationUpdate
|
||
</a>，
|
||
<a href="#AnimationEasing" title="">animationEasing</a>）
|
||
</td>
|
||
</tr>
|
||
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> timeline </td>
|
||
<td> 时间轴（详见<a href="#Timeline" title="">timeline</a>），每个图表最多仅有一个时间轴控件 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> title </td>
|
||
<td> 标题（详见<a href="#Title" title="">title</a>），每个图表最多仅有一个标题控件 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> toolbox </td>
|
||
<td> 工具箱（详见<a href="#Toolbox" title="">toolbox</a>），每个图表最多仅有一个工具箱 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> tooltip </td>
|
||
<td> 提示框（详见<a href="#Tooltip" title="">tooltip</a>），鼠标悬浮交互时的信息提示 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> legend </td>
|
||
<td> 图例（详见<a href="#Legend" title="">legend</a>），每个图表最多仅有一个图例，混搭图表共享 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> dataRange </td>
|
||
<td> 值域选择（详见<a href="#DataRange" title="">dataRange</a>）,值域范围 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> dataZoom </td>
|
||
<td> 数据区域缩放（详见<a href="#DataZoom" title="">dataZoom</a>）,数据展现范围选择 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> roamController </td>
|
||
<td> 漫游缩放组件（详见<a href="#RoamController" title="">roamController</a>）,搭配地图使用 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Object}</b> grid </td>
|
||
<td> 直角坐标系内绘图网格（详见<a href="#Grid" title="">grid</a>） </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Array | Object}</b> xAxis </td>
|
||
<td> 直角坐标系中横轴数组（详见<a href="#Xaxis" title="">xAxis</a>），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴 </td>
|
||
</tr>
|
||
<tr class='bgRed'>
|
||
<td> <b>{Array | Object}</b> yAxis </td>
|
||
<td> 直角坐标系中纵轴数组（详见<a href="#Yaxis" title="">yAxis</a>），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴 </td>
|
||
</tr>
|
||
<tr class='bgBlue'>
|
||
<td> <b>{Array}</b> series </td>
|
||
<td> 驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），数组中每一项代表一个系列的特殊选项及数据 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
|
||
<h4>timeline<a name="Timeline"> </a></h4>
|
||
<P> 时间轴，每个图表最多仅有一个时间轴控件，try <a href="./example/bar11.html" target="_blank">bar »</a>、<a href="./example/scatter4.html" target="_blank">scatter »</a>、<a href="./example/pie7.html" target="_blank">pie »</a>、<a href="./example/map14.html" target="_blank">map »</a></P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 4 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type </td>
|
||
<td> 'time' </td>
|
||
<td> 模式是时间类型，时间轴间隔根据时间跨度自动计算，可选为：'number' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> notMerge </td>
|
||
<td> false </td>
|
||
<td> 时间轴上多个option切换时是否进行merge操作，同setOption第二个参数（详见<a href="#实例方法" title="">实例方法</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> realtime </td>
|
||
<td> true </td>
|
||
<td> 拖拽或点击改变时间轴是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x </td>
|
||
<td> 80 </td>
|
||
<td> 时间轴左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y </td>
|
||
<td> null </td>
|
||
<td> 时间轴左上角纵坐标，数值单位px，支持百分比（字符串），默认无，随y2定位，如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x2 </td>
|
||
<td> 80 </td>
|
||
<td> 时间轴右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y2 </td>
|
||
<td> 0 </td>
|
||
<td> 时间轴右下角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 自适应 </td>
|
||
<td> 时间轴宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2。见下图。
|
||
<br/>支持百分比（字符串），如'50%'(显示区域一半的宽度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> height </td>
|
||
<td> 50 </td>
|
||
<td> 时间轴高度，数值单位px，支持百分比（字符串），如'50%'(显示区域一半的高度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 背景颜色，默认透明。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 边框线宽 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 边框颜色。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> controlPosition </td>
|
||
<td> 'left' </td>
|
||
<td> 播放控制器位置，可选为：'left' | 'right' | 'none' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> autoPlay </td>
|
||
<td> false </td>
|
||
<td> 是否自动播放</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> loop </td>
|
||
<td> true </td>
|
||
<td> 是否循环播放</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> playInterval </td>
|
||
<td> 2000 </td>
|
||
<td> 播放时间间隔，单位ms </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> lineStyle </td>
|
||
<td><pre>{
|
||
color: '#666',
|
||
width: 1,
|
||
type: 'dashed'
|
||
} </pre></td>
|
||
<td> 时间轴轴线样式，lineStyle控制线条样式，（详见<a href="#LineStyle" title="">lineStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> label </td>
|
||
<td><pre>{
|
||
show: true,
|
||
interval: 'auto',
|
||
rotate: 0,
|
||
formatter: null,
|
||
textStyle: {
|
||
color: '#333'
|
||
}
|
||
} </pre></td>
|
||
<td> 时间轴标签文本<br/>
|
||
<br/>show : 是否显示
|
||
<br/>interval : 挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number}
|
||
<br/>rotate : 旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90
|
||
<br/>formatter ： 间隔名称格式器：{string}（Template） | {Function}
|
||
<br/>textStyle : 文字样式（详见<a href="#TextStyle" title="">textStyle</a>）
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> checkpointStyle </td>
|
||
<td><pre>{
|
||
symbol : 'auto',
|
||
symbolSize : 'auto',
|
||
color : 'auto',
|
||
borderColor : 'auto',
|
||
borderWidth : 'auto',
|
||
label: {
|
||
show: false,
|
||
textStyle: {
|
||
color: 'auto'
|
||
}
|
||
}
|
||
} </pre></td>
|
||
<td> 时间轴当前点<br/>
|
||
<br/>symbol : 当前点symbol，默认随轴上的symbol
|
||
<br/>symbolSize : 当前点symbol大小，默认随轴上symbol大小
|
||
<br/>color : 当前点symbol颜色，默认为随当前点颜色，可指定具体颜色，如无则为'#1e90ff'
|
||
<br/>borderColor ： 当前点symbol边线颜色
|
||
<br/>borderWidth ： 当前点symbol边线宽度
|
||
<br/>label同上
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> controlStyle </td>
|
||
<td><pre>{
|
||
itemSize: 15,
|
||
itemGap: 5,
|
||
normal : {
|
||
color : '#333'
|
||
},
|
||
emphasis : {
|
||
color : '#1e90ff'
|
||
}
|
||
} </pre></td>
|
||
<td> 时间轴控制器样式，可指定itemSize按钮大小，itemGap按钮间隔，normal.color正常和emphasis.color高亮颜色
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'emptyDiamond'</td>
|
||
<td> 轴点symbol，同serie.symbol </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> symbolSize </td>
|
||
<td> 4 </td>
|
||
<td> 轴点symbol，同serie.symbolSize </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> currentIndex </td>
|
||
<td> 0 </td>
|
||
<td> 当前索引位置，对应options数组，用于指定显示特定系列 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 时间轴列表，同时也是轴label内容 </td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/timeline.png" title="" alt="时间轴"/></P>
|
||
|
||
|
||
<h4>title<a name="Title"> </a></h4>
|
||
<P> 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 6 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> text </td>
|
||
<td> '' </td>
|
||
<td> 主标题文本，'\n'指定换行 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> link </td>
|
||
<td> '' </td>
|
||
<td> 主标题文本超链接 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> target </td>
|
||
<td> null </td>
|
||
<td> 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> subtext </td>
|
||
<td> '' </td>
|
||
<td> 副标题文本，'\n'指定换行 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> sublink </td>
|
||
<td> '' </td>
|
||
<td> 副标题文本超链接 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> subtarget </td>
|
||
<td> null </td>
|
||
<td> 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'left' </td>
|
||
<td> 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'top' </td>
|
||
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> textAlign </td>
|
||
<td> null </td>
|
||
<td> 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 标题背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 标题边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 标题边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemGap </td>
|
||
<td> 5 </td>
|
||
<td> 主副标题纵向间隔，单位px，默认为10</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td><pre>{
|
||
fontSize: 18,
|
||
fontWeight: 'bolder',
|
||
color: '#333'
|
||
} </pre></td>
|
||
<td> 主标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> subtextStyle </td>
|
||
<td><pre>{
|
||
color: '#aaa'
|
||
} </pre> </td>
|
||
<td> 副标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
|
||
</table>
|
||
<p><img src="./asset/img/doc/title.png" title="" alt="标题"/></P>
|
||
|
||
|
||
<h4>toolbox<a name="Toolbox"> </a></h4>
|
||
<P> 工具箱，每个图表最多仅有一个工具箱。<a href="example/toolbox.html" target="_blank">try this »</a></P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> false </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 6 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> orient </td>
|
||
<td> 'horizontal' </td>
|
||
<td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'right' </td>
|
||
<td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'top' </td>
|
||
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 工具箱背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 工具箱边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 工具箱边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemGap </td>
|
||
<td> 10 </td>
|
||
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemSize </td>
|
||
<td> 16 </td>
|
||
<td> 工具箱icon大小，单位（px）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array <color>}</b> color </td>
|
||
<td> ['#1e90ff','#22bb22','#4b0082','#d2691e'] </td>
|
||
<td> 工具箱icon颜色序列，循环使用，同时支持在具体feature内指定color </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> disableColor </td>
|
||
<td> '#ddd' </td>
|
||
<td> 禁用颜色定义 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> effectiveColor </td>
|
||
<td> 'red' </td>
|
||
<td> 生效颜色定义</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showTitle </td>
|
||
<td> true </td>
|
||
<td> 是否显示工具箱文字提示，默认启用</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> {} </td>
|
||
<td> 工具箱提示文字样式，（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> feature </td>
|
||
<td><pre>{
|
||
mark : {
|
||
show : false,
|
||
title : {
|
||
mark : '辅助线开关',
|
||
markUndo : '删除辅助线',
|
||
markClear : '清空辅助线'
|
||
},
|
||
lineStyle : {
|
||
width : 2,
|
||
color : '#1e90ff',
|
||
type : 'dashed'
|
||
}
|
||
},
|
||
dataZoom : {
|
||
show : false,
|
||
title : {
|
||
dataZoom : '区域缩放',
|
||
dataZoomReset : '区域缩放后退'
|
||
}
|
||
},
|
||
dataView : {
|
||
show : false,
|
||
title : '数据视图',
|
||
readOnly: false,
|
||
lang: ['数据视图', '关闭', '刷新']
|
||
},
|
||
magicType: {
|
||
show : false,
|
||
title : {
|
||
line : '折线图切换',
|
||
bar : '柱形图切换',
|
||
stack : '堆积',
|
||
tiled : '平铺',
|
||
force: '力导向布局图切换',
|
||
chord: '和弦图切换',
|
||
pie: '饼图切换',
|
||
funnel: '漏斗图切换'
|
||
},
|
||
option: {
|
||
// line: {...},
|
||
// bar: {...},
|
||
// stack: {...},
|
||
// tiled: {...},
|
||
// force: {...},
|
||
// chord: {...},
|
||
// pie: {...},
|
||
// funnel: {...}
|
||
},
|
||
type : []
|
||
},
|
||
restore : {
|
||
show : false,
|
||
title : '还原'
|
||
},
|
||
saveAsImage : {
|
||
show : false,
|
||
title : '保存为图片',
|
||
type : 'png',
|
||
lang : ['点击保存']
|
||
}
|
||
}
|
||
</pre></td>
|
||
<td> 启用功能，目前支持feature见下，工具箱自定义功能回调处理，见<a href="example/toolbox.html" target="_blank">try this »</a>
|
||
<p><img src="./asset/img/doc/toolbox.png" title="" alt="工具箱"/></P>
|
||
<ul>
|
||
<li>
|
||
mark，辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部，可设置更多属性
|
||
<ul>
|
||
<li>可传入lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式</li>
|
||
</ul>
|
||
</li><br/>
|
||
<li>
|
||
dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
|
||
</li><br/>
|
||
<li>
|
||
dataView，数据视图，上图icon左数6，打开数据视图，可设置更多属性
|
||
<ul>
|
||
<li><b>{boolean=}</b> readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能</li>
|
||
<li><b>{Function=}</b> optionToContent 自主编排数据视图的显示内容</li>
|
||
<li><b>{Function=}</b> contentToOption 当数据视图readOnly为false时，会出现刷新按钮，如果是自主编排的显示内容，如何翻转也请自理</li>
|
||
<li><b>{Array=}</b> lang 数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']，如需改写，可自定义</li>
|
||
</ul>
|
||
</li><br/>
|
||
<li>
|
||
magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
|
||
<ul>
|
||
<li><b>{Array}</b> type ['line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel'] </li>
|
||
<li><b>{Object=}</b> option 可选，可传入切换是动态修改的配置，将复写series内的数组项</li>
|
||
</ul>
|
||
</li><br/>
|
||
<li>
|
||
restore，还原，复位原始图表，上图icon右数2
|
||
</li><br/>
|
||
<li>
|
||
saveAsImage，保存图片（IE8-不支持），上图icon最右，可设置更多属性
|
||
<ul>
|
||
<li><b>{string=}</b> type 默认保存图片类型为'png'，需改为'jpeg'</li>
|
||
<li><b>{string=}</b> name 指定图片名称，如不指定，则用图表title标题，如无title标题则图片名称默认为“ECharts”</li>
|
||
<li><b>{string=}</b> lang 非IE浏览器支持点击下载，有保存话术，默认是“点击保存”，可修改</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
|
||
<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> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 1 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 8 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showContent </td>
|
||
<td> true </td>
|
||
<td> tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，<br/>可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> trigger </td>
|
||
<td> 'item' </td>
|
||
<td> 触发类型，默认数据触发，见下图，可选为：'item' | 'axis' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | Function}</b> position </td>
|
||
<td> null </td>
|
||
<td> 位置指定，传入<b>{Array}</b>，如[x, y]， 固定位置[x, y]；传入<b>{Function}</b>，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> formatter </td>
|
||
<td> null </td>
|
||
<td> 内容格式器：<b>{string}</b>（Template） | <b>{Function}</b>，支持异步回调见表格下方</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> islandFormatter </td>
|
||
<td> '{a} < br/>{b} : {c}' </td>
|
||
<td> 拖拽重计算独有，数据孤岛内容格式器：<b>{string}</b>（Template） | <b>{Function}</b>，见表格下方</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> showDelay </td>
|
||
<td> 20 </td>
|
||
<td> 显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> hideDelay </td>
|
||
<td> 100 </td>
|
||
<td> 隐藏延迟，单位ms</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> transitionDuration </td>
|
||
<td> 0.4 </td>
|
||
<td> 动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> enterable </td>
|
||
<td> false </td>
|
||
<td> 鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0.7)' </td>
|
||
<td> 提示背景颜色，默认为透明度为0.7的黑色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> '#333' </td>
|
||
<td> 提示边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderRadius </td>
|
||
<td> 4 </td>
|
||
<td> 提示边框圆角，单位px，默认为4 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 提示边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisPointer </td>
|
||
<td><pre>{
|
||
type: 'line',
|
||
lineStyle: {
|
||
color: '#48b',
|
||
width: 2,
|
||
type: 'solid'
|
||
},
|
||
crossStyle: {
|
||
color: '#1e90ff',
|
||
width: 1,
|
||
type: 'dashed'
|
||
},
|
||
shadowStyle: {
|
||
color: 'rgba(150,150,150,0.3)',
|
||
width: 'auto',
|
||
type: 'default'
|
||
}
|
||
} </pre></td>
|
||
<td> 坐标轴指示器，默认type为line，可选为：'line' | 'cross' | 'shadow' | 'none'(无)，指定type后对应style生效，见下
|
||
<br/>lineStyle设置直线指示器（详见<a href="#LineStyle" title="">lineStyle</a>）,
|
||
<br/>crossStyle设置十字准星指示器（详见<a href="#LineStyle" title="">lineStyle</a>）,
|
||
<br/>shadowStyle设置阴影指示器（详见<a href="#AreaStyle" title="">areaStyle</a>），areaStyle.size默认为'auto'自动计算，可指定具体宽度</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> { color:'#fff' } </td>
|
||
<td> 文本样式，默认为白色字体（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
</table>
|
||
<P> 内容格式器formatter：<a href="example/tooltip.html" target="_blank">try this »</a></P>
|
||
<ul>
|
||
<li>
|
||
<b>{string}</b>，模板（Template），其变量为：
|
||
<ul>
|
||
<li>{a} | {a0}</li>
|
||
<li>{b} | {b0}</li>
|
||
<li>{c} | {c0}</li>
|
||
<li>{d} | {d0} （部分图表类型无此项）</li>
|
||
<li>{e} | {e0} （部分图表类型无此项）</li>
|
||
<li> 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...</li>
|
||
<li> 其中变量a、b、c、d在不同图表类型下代表数据含义为：
|
||
<ul>
|
||
<li><b>折线（区域）图</b>、<b>柱状（条形）图、<b>K线图</b></b> : a（系列名称），b（类目值），c（数值）, d（无）</li>
|
||
<li><b>散点图（气泡）图</b> : a（系列名称），b（数据名称），c（数值数组）, d（无）</li>
|
||
<li><b>地图</b> : a（系列名称），b（区域名称），c（合并数值）, d（无）</li>
|
||
<li><b>饼图</b>、<b>雷达图</b>、<b>仪表盘</b>、<b>漏斗图</b>: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）</li>
|
||
<li><b>力导向图, 和弦图</b> :
|
||
<ul>
|
||
<li>节点 : a（系列名称），b（节点名称），c（节点值）, d(节点类目索引)</li>
|
||
<li>边 : a（系列名称），b（边名称，默认为大端节点名称-小端节点名称），c（link.value）, d(大端节点 name 或者 index), e(小端节点 name 或者 index)</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<b>{Function}</b>，传递参数列表为[params, ticket, callback]，详见下：
|
||
<ul>
|
||
<li><Array> params : 数组内容同模板变量，<pre>[
|
||
{
|
||
|
||
seriesIndex: 0,
|
||
seriesName: '一周销量',
|
||
name: '周一',
|
||
dataIndex: 0,
|
||
data: data,
|
||
name: name,
|
||
value: value,
|
||
percent: special, // 饼图
|
||
indicator: special, // 雷达图、力导向、和弦
|
||
value2: special2, // 力导向、和弦
|
||
indicator2: special2 // 力导向、和弦
|
||
},
|
||
{..},
|
||
...
|
||
]
|
||
</pre></li>
|
||
<li><String> ticket : 异步回调标识</li>
|
||
<li><Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html</li>
|
||
<li><i>*函数回调时this指针指向当前图表实例（myChart）</i></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<P> 触发类型：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> item触发 </th>
|
||
<th> axis触发 </th>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:center"><img src="./asset/img/doc/tooltip1.jpg" title="" alt="item触发"/></td>
|
||
<td style="text-align:center"><img src="./asset/img/doc/tooltip2.jpg" title="" alt="axis触发"/></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> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 4 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> orient </td>
|
||
<td> 'horizontal' </td>
|
||
<td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'center' </td>
|
||
<td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'top' </td>
|
||
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 图例背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 图例边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 图例边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemGap </td>
|
||
<td> 10 </td>
|
||
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemWidth </td>
|
||
<td> 20 </td>
|
||
<td> 图例图形宽度 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemHeight </td>
|
||
<td> 14 </td>
|
||
<td> 图例图形高度 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> {color: '#333'} </td>
|
||
<td> 默认只设定了图例文字颜色（详见<a href="#TextStyle" title="">textStyle</a>） ，更个性化的是，要指定文字颜色跟随图例，可设color为'auto'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> formatter </td>
|
||
<td> null </td>
|
||
<td> 文本格式器：<b>{string}</b>（Template） | <b>{Function}</b>，模板变量为'{name}'，函数回调参数为name</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> selectedMode </td>
|
||
<td> true </td>
|
||
<td> 选择模式，默认开启图例开关，可选single，multiple </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> selected </td>
|
||
<td> null </td>
|
||
<td> 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入，<a href="example/legend.html" target="_blank">try this »</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [ ] </td>
|
||
<td> 图例内容数组，数组项通常为<b>{string}</b>，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
|
||
<br/>使用根据该值索引<a href="#Series" title="">series</a>中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。
|
||
<br/>如需个性化图例文字样式，可把数组项改为<b>{Object}</b>，指定文本样式和个性化图例icon，格式为
|
||
<br/>{<br/> name : <b>{string}</b>, <br/> textStyle : <b>{Object}</b>, <br/> icon : <b>{string}</b><br/>}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/legend.png" title="" alt="图例"/></P>
|
||
|
||
<h4>dataRange<a name="DataRange"> </a></h4>
|
||
<P> 值域选择，每个图表最多仅有一个值域控件。<a href="example/dataRange.html" target="_blank">try this »</a></P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 4 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> orient </td>
|
||
<td> 'vertical' </td>
|
||
<td> 布局方式，默认为垂直布局，可选为：'horizontal' | 'vertical' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'left' </td>
|
||
<td> 水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'bottom' </td>
|
||
<td> 垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 值域控件背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 值域控件边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 值域控件边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 值域控件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemGap </td>
|
||
<td> 10 </td>
|
||
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemWidth </td>
|
||
<td> 20 </td>
|
||
<td> 值域控件图形宽度 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> itemHeight </td>
|
||
<td> 14 </td>
|
||
<td> 值域控件图形高度 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> min </td>
|
||
<td> null </td>
|
||
<td> 指定的最小值，eg: 0，默认无，必须参数，唯有指定了splitList时可缺省min。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> max </td>
|
||
<td> null </td>
|
||
<td> 指定的最大值，eg: 100，默认无，必须参数，唯有指定了splitList时可缺省max</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> precision </td>
|
||
<td> 0 </td>
|
||
<td> 小数精度，默认为0，无小数点，当 min ~ max 间在当前精度下无法整除splitNumber份时，精度会自动提高以满足均分，不支持不等划分 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> splitNumber </td>
|
||
<td> 5 </td>
|
||
<td> 分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array.<Object>}</b> splitList </td>
|
||
<td> null </td>
|
||
<td>
|
||
自定义分割方式，支持不等距分割。splitList被指定时，splitNumber将被忽略。<br />
|
||
splitList是一个（不可为空的）Array，Array的每一项为一个Object，含有如下属性：<br />
|
||
{ <br />
|
||
start: 10 本项的数据范围起点（>=），如果不设置表示负无穷。<br />
|
||
end: 30 本项的数据范围终点（<=），如果不设置表示正无穷。<br />
|
||
如果想本项只对应一个值，那么start和end设同样的数就可以了。<br />
|
||
label: '10 to 30' 本项的显示标签，缺省则自动生成label <br />
|
||
color: '#333' 本项的颜色，缺省则自动计算color <br />
|
||
} <br />
|
||
详见例子 <a href="./example/dataRange2.html" target="_blank">this 》</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> range </td>
|
||
<td> null </td>
|
||
<td>
|
||
用于设置dataRange的初始选中范围。calculable为true时有效。<br />
|
||
其值型如：{start: 10, end: 50}。
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> selectedMode </td>
|
||
<td> true </td>
|
||
<td> 选择模式，默认开启值域开关，可选single，multiple </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> calculable </td>
|
||
<td> false </td>
|
||
<td> 是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> hoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用地图hover时的联动响应（详情披露） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> realtime </td>
|
||
<td> true </td>
|
||
<td> 值域漫游是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> color </td>
|
||
<td> ['#1e90ff','#f0ffff'] </td>
|
||
<td> 值域颜色标识，颜色数组长度必须>=2，颜色代表从数值高到低的变化，即颜色数组低位代表数值高的颜色标识 ，支持Alpha通道上的变化（rgba）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> formatter </td>
|
||
<td> null </td>
|
||
<td> 内容格式器：<b>{string}</b>（Template） | <b>{Function}</b>，模板变量为'{value}'和'{value2}'，代表数值起始值和结束值，函数参数两个，含义同模板变量，当calculable为true时模板变量仅有'{value}'，<a href="example/dataRange.html" target="_blank">try this »</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> text </td>
|
||
<td> null </td>
|
||
<td> 值域文字显示，splitNumber生效时默认以计算所得数值作为值域文字显示，可指定长度为2的文本数组显示简介的值域文本，如['高', '低']，'\n'指定换行</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> {color: '#333'} </td>
|
||
<td> 默认只设定了值域控件文字颜色（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/dataRange.png" title="" alt="值域"/></P>
|
||
|
||
<h4>dataZoom<a name="DataZoom"> </a></h4>
|
||
<P> 数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。<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> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 4 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> false </td>
|
||
<td> 是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> orient </td>
|
||
<td> 'horizontal' </td>
|
||
<td> 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> x </td>
|
||
<td> 自适应 </td>
|
||
<td> 水平安放位置，默认为根据grid参数适配，纵向布局默认左侧，可指定 <b>{number}</b>（左上角x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> y </td>
|
||
<td> 自适应 </td>
|
||
<td> 垂直安放位置，默认为根据grid参数适配，纵向布局默认下方，可指定 <b>{number}</b>（左上角y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 自适应 | 30</td>
|
||
<td> 指定宽度，横向布局时默认为根据grid参数适配，纵向布局是默认为30，可指定 <b>{number}</b>（宽度，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> height </td>
|
||
<td> 自适应 | 30</td>
|
||
<td> 指定高度，纵向布局时默认为根据grid参数适配，横向布局是默认为30，可指定 <b>{number}</b>（高度，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> dataBackgroundColor </td>
|
||
<td> '#eee' </td>
|
||
<td> 数据缩略背景颜色，仅以第一个系列的数据作为缩量图显示</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> fillerColor </td>
|
||
<td> 'rgba(144,197,237,0.2)' </td>
|
||
<td> 选择区域填充颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> handleColor </td>
|
||
<td> 'rgba(70,130,180,0.8)' </td>
|
||
<td> 控制手柄颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> handleSize </td>
|
||
<td> 8</td>
|
||
<td> 控制手柄大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | number}</b> xAxisIndex </td>
|
||
<td> null </td>
|
||
<td> 当不指定时默认控制所有横向类目，可通过数组指定多个需要控制的横向类目坐标轴Index，仅一个时可直接为数字 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | number}</b> yAxisIndex </td>
|
||
<td> null </td>
|
||
<td> 当不指定时默认控制所有纵向类目，可通过数组指定多个需要控制的纵向类目坐标轴Index，仅一个时可直接为数字 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> start </td>
|
||
<td> 0 </td>
|
||
<td> 数据缩放，选择起始比例，默认为0（%），从首个数据起选择。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> end </td>
|
||
<td> 100 </td>
|
||
<td> 数据缩放，选择结束比例，默认为100（%），到最后一个数据选择结束。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showDetail </td>
|
||
<td> true </td>
|
||
<td> 缩放变化是否显示定位详情。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> realtime </td>
|
||
<td> false </td>
|
||
<td> 缩放变化是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> zoomLock </td>
|
||
<td> false </td>
|
||
<td> 数据缩放锁，默认为false，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。</td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/dataZoom.png" title="" alt="数据区域缩放"/></P>
|
||
|
||
<h4>roamController<a name="RoamController"> </a></h4>
|
||
<P> 缩放漫游组件，仅对地图有效。<a href="example/map1.html" target="_blank">try this »</a></P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏）。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 4 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'left' </td>
|
||
<td> 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'top' </td>
|
||
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 80</td>
|
||
<td> 指定宽度，决定4向漫游圆盘大小，可指定 <b>{number}</b>（宽度，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> height </td>
|
||
<td> 120</td>
|
||
<td> 指定高度，缩放控制键默认会在指定高度的最下方最大化显示，可指定 <b>{number}</b>（高度，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 缩放漫游组件背景颜色，默认透明 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> '#ccc' </td>
|
||
<td> 缩放漫游组件边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 缩放漫游组件边框线宽，单位px，默认为0（无边框） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> padding </td>
|
||
<td> 5 </td>
|
||
<td> 缩放漫游组件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> fillerColor </td>
|
||
<td> '#fff' </td>
|
||
<td> 漫游组件文字填充颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> handleColor </td>
|
||
<td> '#6495ed' </td>
|
||
<td> 控制手柄主体颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> step </td>
|
||
<td> 15 </td>
|
||
<td> 4向漫游移动步伐，单位px</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> mapTypeControl </td>
|
||
<td> null </td>
|
||
<td> 必须，指定漫游组件可控地图类型，如：{ china: true }<br/>当同一图表内同时呈现多个地图时，可以单独指定所需控制地图类型，如：{ china: false, '北京': true} </td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/roamController.png" title="" alt="缩放漫游组件"/></P>
|
||
|
||
<h4>grid<a name="Grid"> </a></h4>
|
||
<P> 直角坐标系内绘图网格</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 0 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x </td>
|
||
<td> 80 </td>
|
||
<td> 直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y </td>
|
||
<td> 60 </td>
|
||
<td> 直角坐标系内绘图网格左上角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x2 </td>
|
||
<td> 80 </td>
|
||
<td> 直角坐标系内绘图网格右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y2 </td>
|
||
<td> 60 </td>
|
||
<td> 直角坐标系内绘图网格右下角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 自适应 </td>
|
||
<td> 直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2，见下图。
|
||
<br/>支持百分比（字符串），如'50%'(显示区域一半的宽度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> height </td>
|
||
<td> 自适应 </td>
|
||
<td> 直角坐标系内绘图网格（不含坐标轴）高度，默认为总高度 - y - y2，数值单位px，指定height后将忽略y2，见下图。
|
||
<br/>支持百分比（字符串），如'50%'(显示区域一半的高度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> backgroundColor </td>
|
||
<td> 'rgba(0,0,0,0)' </td>
|
||
<td> 背景颜色，默认透明。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 1 </td>
|
||
<td> 边框线宽 </td
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> 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>
|
||
<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 style="width:70px"> 适用类型 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type </td>
|
||
<td> 'category' | 'value' | 'time' | 'log' </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 通用 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 0 </td>
|
||
<td> 通用 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> position </td>
|
||
<td> 'bottom' | 'left' </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴类型，横轴默认为类目型'bottom'，纵轴默认为数值型'left'，可选为：'bottom' | 'top' | 'left' | 'right' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> '' </td>
|
||
<td> 数值型，时间型</td>
|
||
<td> 坐标轴名称，默认为空</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> nameLocation </td>
|
||
<td> 'end' </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 坐标轴名称位置，默认为'end'，可选为：'start' | 'end'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> nameTextStyle </td>
|
||
<td> {} </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 坐标轴名称文字样式，默认取全局配置，颜色跟随axisLine主色，可设</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> boundaryGap </td>
|
||
<td> true </td>
|
||
<td> 类目型 </td>
|
||
<td> 类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> boundaryGap </td>
|
||
<td> [0, 0] </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 坐标轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> min </td>
|
||
<td> null </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 指定的最小值，eg: 0，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[0] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> max </td>
|
||
<td> null </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 指定的最大值，eg: 100，默认无，会自动根据具体数值调整，指定后将忽略boundaryGap[1] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> scale </td>
|
||
<td> false </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 脱离0值比例，放大聚焦到最终_min，_max区间 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> splitNumber </td>
|
||
<td> null </td>
|
||
<td> 数值型，时间型 </td>
|
||
<td> 分割段数，不指定时根据min、max算法调整</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> logLabelBase </td>
|
||
<td> null </td>
|
||
<td> value </td>
|
||
<td> axis.type === 'log'时生效。指定时，axisLabel显示为指数形式，如指定为4时，axisLabel可显示为4²、4³。不指定时，显示为普通形式，如 1,000,000 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> logPositive </td>
|
||
<td> null </td>
|
||
<td> value </td>
|
||
<td> axis.type === 'log'时生效。指明是否使用反向log数轴（从而支持value为负值）。默认自适应，即如果value全为负值，则logPositive自动设为false，否则为true。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLine </td>
|
||
<td> 各异</td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴线，默认显示，详见下方 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisTick </td>
|
||
<td> 各异 </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴小标记，默认不显示，详见下方</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLabel </td>
|
||
<td> 各异 </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴文本标签，详见下方</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> splitLine </td>
|
||
<td> 各异 </td>
|
||
<td> 通用 </td>
|
||
<td> 分隔线，默认显示，，详见下方</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> splitArea </td>
|
||
<td> 各异 </td>
|
||
<td> 通用 </td>
|
||
<td> 分隔区域，默认不显示，详见下方 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> 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 full">
|
||
<tr>
|
||
<th> 设置 </th>
|
||
<td> boundaryGap: true </td>
|
||
<td> boundaryGap: false </td>
|
||
</tr>
|
||
<tr>
|
||
<th> 效果 </th>
|
||
<td><img src="./asset/img/doc/axisBoundaryGap1.jpg" title="" alt="axisBoundaryGap1"/></td>
|
||
<td><img src="./asset/img/doc/axisBoundaryGap.png" title="" alt="axisBoundaryGap"/></td>
|
||
</tr>
|
||
</table>
|
||
<P> scale策略</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 设置 </th>
|
||
<td>scale: false</td>
|
||
<td>scale: true</td>
|
||
</tr>
|
||
<tr>
|
||
<th> 效果 </th>
|
||
<td><img src="./asset/img/doc/axisScale1.png" title="" alt="axisScale1"/></td>
|
||
<td><img src="./asset/img/doc/axisScale2.png" title="" alt="axisScale2"/></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> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 是否显示，默认为true，设为false后下面都没意义了 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> onZero </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 定位到垂直方向的0值坐标上 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> lineStyle </td>
|
||
<td> <pre>{
|
||
color: '#48b',
|
||
width: 2,
|
||
type: 'solid'
|
||
} </pre> </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> <b>{boolean}</b> show </td>
|
||
<td> false（数值轴和时间轴）<br/> true（类目轴） </td>
|
||
<td> 通用 </td>
|
||
<td> 是否显示，默认为false，设为true后下面为默认样式 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number | function}</b> interval </td>
|
||
<td> 'auto' </td>
|
||
<td> 类目型 </td>
|
||
<td> 小标记显示挑选间隔，默认为'auto'，可选为：
|
||
<br/>'auto'（随axisLabel，自动隐藏显示不下的） | 0（全部显示） |
|
||
<br/><b>{number}</b>（用户指定选择间隔）
|
||
<br/><b>{function}</b>函数回调，传递参数[index，data[index]]，返回true显示，返回false隐藏
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> onGap </td>
|
||
<td> null </td>
|
||
<td> 类目型 </td>
|
||
<td> 小标记是否显示为间隔，默认等于boundaryGap</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> inside </td>
|
||
<td> false </td>
|
||
<td> 通用 </td>
|
||
<td> 小标记是否显示为在grid内部，默认在外部</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> length </td>
|
||
<td> 5 </td>
|
||
<td> 通用 </td>
|
||
<td> 属性length控制线长 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> lineStyle </td>
|
||
<td> <pre>{
|
||
color: '#333',
|
||
width: 1
|
||
} </pres></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> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 是否显示，默认为true，设为false后下面都没意义了 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number | function}</b> interval </td>
|
||
<td> 'auto' </td>
|
||
<td> 类目型 </td>
|
||
<td> 标签显示挑选间隔，默认为'auto'，可选为：
|
||
<br/>'auto'（自动隐藏显示不下的） | 0（全部显示） |
|
||
<br/><b>{number}</b>（用户指定选择间隔）
|
||
<br/><b>{function}</b>函数回调，传递参数[index，data[index]]，返回true显示，返回false隐藏
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> rotate </td>
|
||
<td> 0 </td>
|
||
<td> 通用 </td>
|
||
<td> 标签旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> margin </td>
|
||
<td> 8 </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴文本标签与坐标轴的间距，默认为8，单位px </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clickable </td>
|
||
<td> false </td>
|
||
<td> 通用 </td>
|
||
<td> 坐标轴文本标签是否可点击</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> formatter </td>
|
||
<td> null </td>
|
||
<td> 通用 </td>
|
||
<td> 间隔名称格式器：<b>{string}</b>（Template） | <b>{Function}</b> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td><pre>{
|
||
color: '#333'
|
||
} </pre> </td>
|
||
<td> 通用 </td>
|
||
<td> 文本样式（详见<a href="#TextStyle" title="">textStyle</a>），其中当坐标轴为数值型和时间型时，color接受方法回调，实现个性化的颜色定义，support <a href="https://github.com/ecomfe/echarts/issues/226" target="_blank">#226 »</a> </td>
|
||
</tr>
|
||
</table>
|
||
<P> 间隔名称格式器formatter：</P>
|
||
<ul>
|
||
<li>
|
||
<b>{string}</b>，模板（Template），其变量为：
|
||
<ul>
|
||
<li>
|
||
{value}: 内容或值
|
||
</li>
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<b>{Function}</b>，传递参数同模板变量：
|
||
<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> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 是否显示，默认为true，设为false后下面都没意义了 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> onGap </td>
|
||
<td> null </td>
|
||
<td> 类目型 </td>
|
||
<td> 分隔线是否显示为间隔，默认等于boundaryGap</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> lineStyle </td>
|
||
<td><pre>{
|
||
color: ['#ccc'],
|
||
width: 1,
|
||
type: 'solid'
|
||
} </pre></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> <b>{boolean}</b> show </td>
|
||
<td> false </td>
|
||
<td> 通用 </td>
|
||
<td> 是否显示，默认为false，设为true后带如下默认样式 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> onGap </td>
|
||
<td> null </td>
|
||
<td> 类目型 </td>
|
||
<td> 分隔区域是否显示为间隔，默认等于boundaryGap</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> areaStyle </td>
|
||
<td><pre>{
|
||
color: [
|
||
'rgba(250,250,250,0.3)',
|
||
'rgba(200,200,200,0.3)'
|
||
]
|
||
} </pre> </td>
|
||
<td> 通用 </td>
|
||
<td> 属性areaStyle（详见<a href="#AreaStyle" title="">areaStyle</a>）控制区域样式，颜色数组实现间隔变换。 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>axis.data<a name="AxisData"> </a></h5>
|
||
<P> 类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行，如:</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>polar<a name="Polar"> </a></h4>
|
||
<P> 极坐标：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 0 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> center </td>
|
||
<td> ['50%', '50%'] </td>
|
||
<td> 圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50% </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> radius </td>
|
||
<td> '75%' </td>
|
||
<td> 半径，支持绝对值（px）和百分比，百分比计算min(width, height) / 2 * 75%, </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> startAngle </td>
|
||
<td> 90 </td>
|
||
<td> 开始角度, 有效输入范围：[-180,180]</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> splitNumber </td>
|
||
<td> 5 </td>
|
||
<td> 分割段数，默认为5 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> name </td>
|
||
<td><pre>{
|
||
show: true,
|
||
formatter: null,
|
||
textStyle: {
|
||
color:#333
|
||
}
|
||
} </pre></td>
|
||
<td> 坐标轴名称</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> boundaryGap </td>
|
||
<td> [0, 0] </td>
|
||
<td> 数值轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> scale </td>
|
||
<td> false </td>
|
||
<td> 脱离0值比例，放大聚焦到最终_min，_max区间 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLine </td>
|
||
<td> {show : true} </td>
|
||
<td> 坐标轴线，默认显示，属性show控制显示与否，属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLabel </td>
|
||
<td> {show : false} </td>
|
||
<td> 坐标轴文本标签，详见<a href="#AxisAxislabel" title="">axis.axisLabel</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> splitLine </td>
|
||
<td> {show : true} </td>
|
||
<td> 分隔线，默认显示，属性show控制显示与否，属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> splitArea </td>
|
||
<td> {show : true} </td>
|
||
<td> 分隔区域，默认不显示，属性show控制显示与否，属性areaStyle（详见<a href="#AreaStyle" title="">areaStyle</a>）控制区域样式 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{String}</b> type </td>
|
||
<td> 'polygon' </td>
|
||
<td> 极坐标的形状，'polygon'|'circle' 多边形|圆形</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> indicator </td>
|
||
<td> [] </td>
|
||
<td> 雷达指标列表，同时也是label内容，例子见下</td>
|
||
</tr>
|
||
</table>
|
||
<div class="code">
|
||
<pre>
|
||
indicator : [
|
||
{text : '外观'},
|
||
{text : '拍照', min : 0},
|
||
{text : '系统', min : 0, max : 100},
|
||
{text : '性能', axisLabel: {...}},
|
||
{text : '屏幕'}
|
||
]
|
||
</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> <b>{number}</b> zlevel </td>
|
||
<td> 0 </td>
|
||
<td> 通用 </td>
|
||
<td> 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> z </td>
|
||
<td> 2 </td>
|
||
<td> 通用 </td>
|
||
<td> 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type </td>
|
||
<td> null </td>
|
||
<td> 通用 </td>
|
||
<td> 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：
|
||
<br/>'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
|
||
<br/> 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> null </td>
|
||
<td> 通用 </td>
|
||
<td> 系列名称，如启用legend，该值将被legend.data索引相关 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> tooltip </td>
|
||
<td> null </td>
|
||
<td> 通用 </td>
|
||
<td> 提示框样式，仅对本系列有效，如不设则用option.tooltip（详见<a href="#Tooltip" title="">tooltip</a>）,鼠标悬浮交互时的信息提示 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clickable </td>
|
||
<td> true </td>
|
||
<td> 通用 </td>
|
||
<td> 数据图形是否可点击，默认开启，如果没有click事件响应可以关闭 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> null </td>
|
||
<td> 通用 </td>
|
||
<td> 图形样式（详见<a href="#ItemStyle" title="">itemStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 通用 </td>
|
||
<td> 数据（详见<a href="#SeriesData" title="">series.data</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> markPoint </td>
|
||
<td> {} </td>
|
||
<td> 通用 </td>
|
||
<td> 标注（详见<a href="#SeriesMarkPoint" title="">series.markPoint</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> markLine </td>
|
||
<td> {} </td>
|
||
<td> 通用 </td>
|
||
<td> 标线（详见<a href="#SeriesMarkLine" title="">series.markLine</a>） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（直角系）<a name="SeriesCartesian"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 适用类型 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> stack </td>
|
||
<td> null </td>
|
||
<td> 折线图，柱状图 </td>
|
||
<td> 组合名称，双数值轴时无效，多组数据的堆积图时使用，eg：stack:'group1'，则series数组中stack值等于'group1'的数据做堆积计算 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> xAxisIndex </td>
|
||
<td> 0 </td>
|
||
<td> 折线图，柱状图，散点图 ，K线图</td>
|
||
<td><a href="#Xaxis" title="">xAxis</a>坐标轴数组的索引，指定该系列数据所用的横坐标轴 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> yAxisIndex </td>
|
||
<td> 0 </td>
|
||
<td> 折线图，柱状图，散点图，K线图 </td>
|
||
<td><a href="#Yaxis" title="">yAxis</a>坐标轴数组的索引，指定该系列数据所用的纵坐标轴 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string} </b>barGap </td>
|
||
<td> '30%' </td>
|
||
<td> 柱状图 </td>
|
||
<td> 柱间距离，默认为柱形宽度的30%，可设固定值 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string} </b>barCategoryGap </td>
|
||
<td> '20%' </td>
|
||
<td> 柱状图 </td>
|
||
<td> 类目间柱形距离，默认为类目间距的20%，可设固定值 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> barMinHeight </td>
|
||
<td> 0 </td>
|
||
<td> 柱状图 </td>
|
||
<td> 柱条最小高度，可用于防止某item的值过小而影响交互 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> barWidth </td>
|
||
<td> 自适应 </td>
|
||
<td> 柱状图 ，K线图</td>
|
||
<td> 柱条（K线蜡烛）宽度，不设时自适应 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> barMaxWidth </td>
|
||
<td> 自适应 </td>
|
||
<td> 柱状图 ，K线图</td>
|
||
<td> 柱条（K线蜡烛）最大宽度，不设时自适应 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> null </td>
|
||
<td> 折线图，散点图 </td>
|
||
<td> 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：<br/>
|
||
'circle' | 'rectangle' | 'triangle' | 'diamond' |<br/>
|
||
'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'
|
||
<br/>另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
|
||
<br/>自1.3.5起支持symbol为自定义图片，格式为'image://' + '图片路径'， 如'image://../asset/ico/favicon.png'
|
||
<br/>详见例子 <a href="./example/line.html" target="_blank">this 》</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Function | Array} </b>symbolSize </td>
|
||
<td> 2 | 4</td>
|
||
<td> 折线图 (2)，散点图(4) </td>
|
||
<td> 标志图形大小，可计算特性启用情况建议增大以提高交互体验。可以是单个值，如果在 symbol 为图片的时候想要分别设置宽高防止图片被拉伸，可以使用数组，其中数组第一个值是高，第二个值是宽。 实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组）。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> symbolRotate </td>
|
||
<td> null </td>
|
||
<td> 折线图 ，散点图 </td>
|
||
<td> 标志图形旋转角度[-180,180]</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showAllSymbol </td>
|
||
<td> false </td>
|
||
<td> 折线图 </td>
|
||
<td> 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略），如需全部显示可把showAllSymbol设为true</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> smooth </td>
|
||
<td> false </td>
|
||
<td> 折线图 </td>
|
||
<td> 平滑曲线显示，smooth为true时lineStyle不支持虚线</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> dataFilter </td>
|
||
<td> 'nearst' </td>
|
||
<td> 折线图 </td>
|
||
<td> ECharts 会在折线图的数据数量大于实际显示的像素宽度（高度）的时候会启用优化，对显示在一个像素宽度内的数据做筛选，该选项是指明数据筛选的策略。<br /><br />
|
||
可选 'nearest', 'min', 'max', 'average'。或者是使用自定义的筛选函数</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> large </td>
|
||
<td> false </td>
|
||
<td> 散点图 </td>
|
||
<td> 启动大规模散点图</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> largeThreshold </td>
|
||
<td> 2000 </td>
|
||
<td> 散点图 </td>
|
||
<td> 大规模散点图自动切换阀值，large为true下有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 折线图，柱状图，散点图 </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（饼图）<a name="SeriesPie"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> center </td>
|
||
<td> ['50%', '50%'] </td>
|
||
<td> 圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50% </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> radius </td>
|
||
<td> [0, '75%'] </td>
|
||
<td> 半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 传数组实现环形图，[内半径，外半径] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> startAngle </td>
|
||
<td> 90 </td>
|
||
<td> 开始角度, 饼图（90）、仪表盘（225），有效输入范围：[-360,360]</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> minAngle </td>
|
||
<td> 0 </td>
|
||
<td> 最小角度，可用于防止某item的值过小而影响交互 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clockWise </td>
|
||
<td> true </td>
|
||
<td> 显示是否顺时针 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> roseType </td>
|
||
<td> null </td>
|
||
<td> 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> selectedOffset </td>
|
||
<td> 10 </td>
|
||
<td> 选中是扇区偏移量 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> selectedMode </td>
|
||
<td> null </td>
|
||
<td> 选中模式，默认关闭，可选single，multiple </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（雷达图）<a name="SeriesRadar"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> polarIndex </td>
|
||
<td> 0 </td>
|
||
<td> 极坐标索引 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> null </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Function | Array} </b>symbolSize </td>
|
||
<td> 2 </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> symbolRotate </td>
|
||
<td> null </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（地图）<a name="SeriesMap"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> selectedMode </td>
|
||
<td> null </td>
|
||
<td> 选中模式，默认关闭，可选single，multiple </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> mapType </td>
|
||
<td> 'china' </td>
|
||
<td> 地图类型，支持world，china及全国34个省市自治区。省市自治区的mapType直接使用简体中文：
|
||
<br/>新疆， 西藏， 内蒙古， 青海， 四川， 黑龙江， 甘肃， 云南， 广西， 湖南， 陕西，
|
||
<br/>广东，吉林， 河北， 湖北， 贵州， 山东， 江西， 河南， 辽宁， 山西， 安徽， 福建，
|
||
<br/>浙江， 江苏，重庆， 宁夏， 海南， 台湾， 北京， 天津， 上海， 香港， 澳门'
|
||
<br/>支持子区域模式，通过主地图类型扩展出所包含的子区域地图，格式为'主地图类型|子区域名称'，如
|
||
<br/>'world|Brazil'，'china|广东'，详见例子 <a href="./example/map8.html" target="_blank">this 》</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> hoverable </td>
|
||
<td> true </td>
|
||
<td> 非数值显示（如仅用于显示标注标线时），可以通过hoverable:false关闭区域悬浮高亮 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> dataRangeHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用值域漫游组件（dataRange）hover时的联动响应（详情披露） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> mapLocation </td>
|
||
<td> {x:'center',y:'center'} </td>
|
||
<td> 地图位置设置，默认只适应上下左右居中可配x，y，width，height，任意参数为空都将根据其他参数自适应 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> mapValueCalculation </td>
|
||
<td> 'sum' </td>
|
||
<td> 地图数值计算方式，默认为加和，可选为：'sum'（总数） | 'average'（均值）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> mapValuePrecision </td>
|
||
<td> 0 </td>
|
||
<td> 地图数值计算结果小数精度，mapValueCalculation为average时有效，默认为取整，需要小数精度时设置大于0的整数</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showLegendSymbol </td>
|
||
<td> true </td>
|
||
<td> 显示图例颜色标识（系列标识的小圆点），存在legend时生效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> roam </td>
|
||
<td> false </td>
|
||
<td> 是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> scaleLimit </td>
|
||
<td> null </td>
|
||
<td> 滚轮缩放的极限控制，可指定{max:number, min:number}，其中max为放大系数，有效值应大于1，min为缩小系数，有效值应小于1</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> nameMap </td>
|
||
<td> null </td>
|
||
<td> 自定义地区的名称映射，如{'China' : '中国'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textFixed </td>
|
||
<td> null </td>
|
||
<td> 地区的名称文本位置修正，数值单位为px，正值为左下偏移，负值为右上偏移，如{'China' : [10, -10]}</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> geoCoord </td>
|
||
<td> null </td>
|
||
<td> 通过绝对经纬度指定地区的名称文本位置，如{'Islands':[113.95, 22.26]}，香港离岛区名称显示定位到东经113.95，北纬22.26上</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> heatmap </td>
|
||
<td> null </td>
|
||
<td> 叠加在地图上的热力图，数据位置为经纬度。配置同 <a href="#SeriesHeatmap">series（热力图）</a></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（热力图）<a name="SeriesHeatmap"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> blurSize </td>
|
||
<td> 30 </td>
|
||
<td> 一个热力图数据点的模糊范围，单位是像素</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> gradientColors </td>
|
||
<td> ['blue', 'cyan', 'lime', 'yellow', 'red'] </td>
|
||
<td> 可以是一个包含 offset 和 color 的 Object 的数组，如 [{ offset: 0.2, color: 'blue' }, { offset 0.8, color: 'cyan' }]；也可以是一个颜色字符串的数组如 ['blue', 'cyan', 'lime', 'yellow', 'red']，颜色将均匀分布。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> minAlpha </td>
|
||
<td> 0.05 </td>
|
||
<td> 当均一化后的数据点的值小于这个值时，将被设为该值。该值保证了数据值很小的数据也能在地图上展示。</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> valueScale </td>
|
||
<td> 1 </td>
|
||
<td> 所有数据点的值将乘以这个值再进行绘制。</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> opacity </td>
|
||
<td> 1 </td>
|
||
<td> 整个热力图的不透明度。</a></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（力导向布局图）<a name="SeriesForce"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> categories </td>
|
||
<td> null </td>
|
||
<td> 节点分类, 详见图数据结构表示中的<a href="#categories">categories</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> nodes(data) </td>
|
||
<td> [] </td>
|
||
<td> 力导向图的顶点数据, 详见图数据结构表示中的<a href="#nodes(data)">nodes(data)</a>, 力导向中独有的项：
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> {Array} initial </td>
|
||
<td></td>
|
||
<td> 强制指定节点的初始值，在不指定的时候会在某个范围内随机生成 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {boolean} fixX </td>
|
||
<td>false</td>
|
||
<td>是否固定节点在 X 轴上的值，配合 initial 使用</td>
|
||
</tr>
|
||
<tr>
|
||
<td> {boolean} fixY </td>
|
||
<td>false</td>
|
||
<td>是否固定节点在 Y 轴上的值，配合 initial 使用</td>
|
||
</tr>
|
||
<tr>
|
||
<td> {boolean} ignore </td>
|
||
<td>false</td>
|
||
<td>是否忽略该节点</td>
|
||
</tr>
|
||
<tr>
|
||
<td> {boolean} draggable </td>
|
||
<td></td>
|
||
<td> 节点是否能被拖拽 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number} category </td>
|
||
<td></td>
|
||
<td> 节点的 category index </td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> links </td>
|
||
<td> [] </td>
|
||
<td> 力导向图的边数据, 和matrix二选一 详见图数据结构表示中的<a href="#GraphLinks">links</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> matrix </td>
|
||
<td> [] </td>
|
||
<td> 力导向图的邻接矩阵, 和links二选一 详见图数据结构表示中的<a href="#GraphMatrix">matrix</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><b> {Array} center</b></td>
|
||
<td>['50%', '50%']</td>
|
||
<td>布局中心，可以是绝对值或者相对百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b> {number} size</b></td>
|
||
<td>100%</td>
|
||
<td>布局大小，可以是绝对值或者相对百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> minRadius </td>
|
||
<td> 10 </td>
|
||
<td> 顶点数据映射成圆半径后的最小半径 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> maxRadius </td>
|
||
<td> 20 </td>
|
||
<td> 顶点数据映射成圆半径后的最大半径 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number|Array}</b> symbolSize </td>
|
||
<td></td>
|
||
<td> 节点的大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> linkSymbol </td>
|
||
<td> 'none' </td>
|
||
<td> 力导向图的边两端图形样式，可指定为'arrow', 详见<a href="#SymbolList">symbolList</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> linkSymbolSize </td>
|
||
<td> [10, 15] </td>
|
||
<td> 力导向图的边两端图形大小</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> scaling </td>
|
||
<td> 1 </td>
|
||
<td> 布局缩放系数，并不完全精确, 效果跟布局大小类似 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> gravity </td>
|
||
<td> 1 </td>
|
||
<td> 向心力系数，系数越大则节点越往中心靠拢 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> draggable </td>
|
||
<td> true </td>
|
||
<td> 节点是否能被拖拽 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> large </td>
|
||
<td> false </td>
|
||
<td> 在 500+ 顶点的图上建议设置 large 为 true, 会使用 <a href="http://en.wikipedia.org/wiki/Barnes–Hut_simulation">Barnes-Hut simulation</a>, 同时开启 useWorker 并且把 steps 值调大 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> useWorker </td>
|
||
<td> false </td>
|
||
<td> 是否在浏览器支持 web worker 的时候把布局计算放入 web worker 中 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> steps </td>
|
||
<td> 1 </td>
|
||
<td> 每一帧布局计算的迭代次数，因为每一帧绘制的时间经常会比布局时间长很多，所以在使用 web worker 的时候可以把 steps 调大来平衡两者的时间从而达到效率最优化 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> roam </td>
|
||
<td> false </td>
|
||
<td> 是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（和弦图）<a name="SeriesChord"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> categories </td>
|
||
<td> null </td>
|
||
<td> 节点分类, 详见图数据结构表示中的<a href="#categories">categories</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> nodes(data) </td>
|
||
<td> [] </td>
|
||
<td> 和弦图的顶点数据, 详见图数据结构表示中的<a href="#nodes(data)">nodes(data)</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> links </td>
|
||
<td> [] </td>
|
||
<td> 和弦图的边数据, 和matrix二选一 详见图数据结构表示中的<a href="#GraphLinks">links</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> matrix </td>
|
||
<td> [] </td>
|
||
<td> 和弦图的邻接矩阵, 和links二选一 详见图数据结构表示中的<a href="#GraphMatrix">matrix</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> ribbonType </td>
|
||
<td>true</td>
|
||
<td>ribbonType的和弦图节点使用扇形绘制，边使用有大小端的ribbon绘制，可以表示出边的权重，图的节点边之间必须是双向边，非ribbonType的和弦图节点使用symbol绘制，边使用贝塞尔曲线，不能表示边的权重，但是可以使用单向边</td>
|
||
</tr>
|
||
<!-- ribbonType 为false时的配置项 -->
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a>, ribbonType为false时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number} symbolSize </td>
|
||
<td></td>
|
||
<td> 节点的大小, ribbonType为false时有效 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> minRadius </td>
|
||
<td> 10 </td>
|
||
<td> 顶点数据映射成symbol半径后的最小半径, ribbonType为false时有效 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> maxRadius </td>
|
||
<td> 20 </td>
|
||
<td> 顶点数据映射成symbol半径后的最大半径, ribbonType为false时有效 </td>
|
||
</tr>
|
||
<!-- ribbonType 为true时的配置项 -->
|
||
<tr>
|
||
<td> <b>{boolean}</b> showScale </td>
|
||
<td> false </td>
|
||
<td> 是否显示刻度, ribbonType为true时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> showScaleText </td>
|
||
<td> false </td>
|
||
<td> 是否显示刻度文字, ribbonType为true时有效 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> padding </td>
|
||
<td> 2 </td>
|
||
<td> 每个sector之间的间距(用角度表示) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> sort </td>
|
||
<td> 'none' </td>
|
||
<td> 数据排序， 可以取none, ascending, descending</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> sortSub </td>
|
||
<td> 'none' </td>
|
||
<td> 数据排序（弦）， 可以取none, ascending, descending</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clockWise </td>
|
||
<td> false </td>
|
||
<td> 显示是否顺时针 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（仪表盘）<a name="SeriesGauge"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> center </td>
|
||
<td> ['50%', '50%'] </td>
|
||
<td> 圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50% </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> radius </td>
|
||
<td> [0, '75%'] </td>
|
||
<td> 半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%，
|
||
<br/>传数组实现环形图，[内半径，外半径] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> startAngle </td>
|
||
<td> 225</td>
|
||
<td> 开始角度, 饼图（90）、仪表盘（225），有效输入范围：[-360,360]</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> endAngle </td>
|
||
<td> -45 </td>
|
||
<td> 结束角度,有效输入范围：[-360,360]，保证startAngle - endAngle为正值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> min </td>
|
||
<td> 0 </td>
|
||
<td> 指定的最小值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> max </td>
|
||
<td> 100 </td>
|
||
<td> 指定的最大值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> splitNumber </td>
|
||
<td> 10 </td>
|
||
<td> 分割段数，默认为10</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLine </td>
|
||
<td><pre>{
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.2, '#228b22'],
|
||
[0.8, '#48b'],
|
||
[1, '#ff4500']
|
||
],
|
||
width: 30
|
||
}
|
||
} </pre> </td>
|
||
<td> 坐标轴线，默认显示
|
||
<br/><br/>属性show控制显示与否，
|
||
<br/><br/>属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式，
|
||
<br/><br/>比较特殊的是这里的lineStyle.color是一个二维数组，用于把仪表盘轴线分成若干份，
|
||
<br/><br/>并且可以给每一份指定具体的颜色，格式为:[[百分比, 颜色值], [...]]
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisTick </td>
|
||
<td><pre>{
|
||
show: true,
|
||
splitNumber: 5,
|
||
length :8,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
} </pre> </td>
|
||
<td> 坐标轴小标记，默认显示
|
||
<br/><br/>属性show控制显示与否，
|
||
<br/><br/>属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式，
|
||
<br/><br/>属性splitNumber控制每份split细分多少段
|
||
<br/><br/>属性length控制线长
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> axisLabel </td>
|
||
<td><pre>{
|
||
show: true,
|
||
formatter: null,
|
||
textStyle: {
|
||
color: 'auto'
|
||
}
|
||
} </pre> </td>
|
||
<td> 坐标轴文本标签（详见<a href="#AxisAxislabel" title="">axis.axislabel</a>）
|
||
<br/><br/>属性formatter可以格式化文本标签，
|
||
<br/><br/>属性textStyle（详见<a href="#TextStyle" title="">textStyle</a>）控制文本样式
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> splitLine </td>
|
||
<td><pre>{
|
||
show: true,
|
||
length :30,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
width: 2,
|
||
type: 'solid'
|
||
}
|
||
} </pre> </td>
|
||
<td> 主分隔线，默认显示
|
||
<br/><br/>属性show控制显示与否，
|
||
<br/><br/>属性length控制线长
|
||
<br/><br/>属性lineStyle（详见<a href="#LineStyle" title="">lineStyle</a>）控制线条样式，
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> pointer </td>
|
||
<td><pre>{
|
||
length : '80%',
|
||
width : 8,
|
||
color : 'auto'
|
||
} </pre> </td>
|
||
<td> 指针样式
|
||
<br/>属性length控制线长，百分比相对的是仪表盘的外半径
|
||
<br/>属性width控制指针最宽处，
|
||
<br/>属性color控制指针颜色
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> title </td>
|
||
<td><pre>{
|
||
show : true,
|
||
offsetCenter: [0, '-40%'],
|
||
textStyle: {
|
||
color: '#333',
|
||
fontSize : 15
|
||
}
|
||
} </pre> </td>
|
||
<td> 仪表盘标题
|
||
<br/><br/>属性show控制显示与否，
|
||
<br/><br/>属性offsetCenter用于标题定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径），
|
||
<br/><br/>属性textStyle（详见<a href="#TextStyle" title="">textStyle</a>）控制文本样式
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> detail </td>
|
||
<td><pre>{
|
||
show : true,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
borderWidth: 0,
|
||
borderColor: '#ccc',
|
||
width: 100,
|
||
height: 40,
|
||
offsetCenter: [0, '40%'],
|
||
formatter: null,
|
||
textStyle: {
|
||
color: 'auto',
|
||
fontSize : 30
|
||
}
|
||
} </pre> </td>
|
||
<td> 仪表盘详情
|
||
<br/><br/>属性show控制显示与否，
|
||
<br/>属性backgroundColor控制边框颜色，
|
||
<br/>属性borderWidth控制边框线宽，
|
||
<br/>属性borderColor控制边框颜色，
|
||
<br/>属性width控制详情宽度，
|
||
<br/>属性height控制详情高度，
|
||
<br/>属性offsetCenter用于详情定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径），
|
||
<br/>属性formatter可以格式化文本，
|
||
<br/>属性textStyle（详见<a href="#TextStyle" title="">textStyle</a>）控制文本样式
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（漏斗图）<a name="SeriesFunnel"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x </td>
|
||
<td> 80 </td>
|
||
<td> 左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y </td>
|
||
<td> 60 </td>
|
||
<td> 左上角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> x2 </td>
|
||
<td> 80 </td>
|
||
<td> 右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> y2 </td>
|
||
<td> 60 </td>
|
||
<td> 右下角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> width </td>
|
||
<td> null </td>
|
||
<td> 总宽度，默认为绘图区总宽度 - x - x2，数值单位px，指定width后将忽略x2，支持百分比（字符串），如'50%'(显示区域一半的宽度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | string}</b> height </td>
|
||
<td> null </td>
|
||
<td> 总高度，默认为绘图区总高度 - y - y2，数值单位px，指定height后将忽略y2，支持百分比（字符串），如'50%'(显示区域一半的高度) </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> funnelAlign </td>
|
||
<td> 'center' </td>
|
||
<td> 水平方向对齐布局类型，默认居中对齐，可用选项还有：'left' | 'right' | 'center'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> min </td>
|
||
<td> 0 </td>
|
||
<td> 指定的最小值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> max </td>
|
||
<td> 100 </td>
|
||
<td> 指定的最大值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> minSize </td>
|
||
<td> '0%' </td>
|
||
<td> 最小值min映射到总宽度的比例，如果需要最小值的图形并不是尖端三角，可设置minSize实现</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> maxSize </td>
|
||
<td> '100%' </td>
|
||
<td> 最大值max映射到总宽度的比例</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> sort </td>
|
||
<td> 'descending' </td>
|
||
<td> 数据排序， 可以取ascending, descending</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> gap </td>
|
||
<td> 0 </td>
|
||
<td> 数据图形间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（事件河流图）<a name="SeriesEventRiver"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> xAxisIndex </td>
|
||
<td> 0 </td>
|
||
<td><a href="#Xaxis" title="">xAxis</a>坐标轴数组的索引，指定该系列数据所用的横坐标轴 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> weight </td>
|
||
<td> 1 </td>
|
||
<td> 该事件类别的权重 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 事件列表，每一个数组项为Object {}，内容如下：
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> null</td>
|
||
<td> 事件名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> weight </td>
|
||
<td> 1 </td>
|
||
<td> 事件权重 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> evolution </td>
|
||
<td> [] </td>
|
||
<td> 同一事件的的演化过程，每一个数组项为Object {}，内容如下
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Date}</b> time </td>
|
||
<td> 事件发生的时间，Javascript中的Date类型 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> value </td>
|
||
<td> 事件的热度值，如该事件涉及到的新闻报道数量 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {Object} detail </td>
|
||
<td> 事件的详细信息
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> link </td>
|
||
<td> 该事件报道的新闻链接 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> text </td>
|
||
<td> 该事件的文字描述 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> img </td>
|
||
<td> 该事件的图片链接</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> legendHoverLink </td>
|
||
<td> true </td>
|
||
<td> 是否启用图例（legend）hover时的联动响应（高亮显示） </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（矩形树图）<a name="SeriesTreemap"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> center </td>
|
||
<td> ['50%', '50%']</td>
|
||
<td> 中心坐标，支持绝对值（px）和百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> size </td>
|
||
<td> ['80%', '80%']</td>
|
||
<td> 大小，支持绝对值（px）和百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> root</td>
|
||
<td> ''</td>
|
||
<td> 当前显示的根节点的名字 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>参见<a href="#ItemStyle" title="">itemStyle</a>，以下是treemap独有属性
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> breadcrumb </td>
|
||
<td> <pre>
|
||
{
|
||
show: true,
|
||
textStyle: {}
|
||
} </pre>
|
||
</td>
|
||
<td> 面包屑
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 是否展示面包屑 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> null </td>
|
||
<td> 参见<a href="#TextStyle" title="">textStyle</a> </td>
|
||
</tr>
|
||
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> childBorderWidth </td>
|
||
<td> 1 </td>
|
||
<td> 二级边框宽度</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> childBorderColor </td>
|
||
<td> '' </td>
|
||
<td>
|
||
二级边框颜色
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 数据列表，每一个数组项为Object {}，内容如下：
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> null </td>
|
||
<td> 数据名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> value </td>
|
||
<td> null </td>
|
||
<td> 数据值 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {Array} children </td>
|
||
<td> []</td>
|
||
<td> 子节点，每项的属性和父节点相同 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>
|
||
参见
|
||
<a href="#ItemStyle" title="">
|
||
itemStyle
|
||
</a>
|
||
，权重最高
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（树图）<a name="SeriesTree"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> rootLocation </td>
|
||
<td>
|
||
各异
|
||
</td>
|
||
<td> 根节点坐标，支持绝对值（px）、字符和百分比
|
||
<pre>
|
||
{
|
||
x: 'center' | 'left' | 'right' | 'x%' | {number},
|
||
y: 'center' | 'top' | 'bottom' | 'y%' | {number}
|
||
}</pre>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> layerPadding </td>
|
||
<td> 100</td>
|
||
<td> 层间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> nodePadding </td>
|
||
<td> 30</td>
|
||
<td> 节点间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> orient </td>
|
||
<td> 'vertical'</td>
|
||
<td> 树的方向可选：'vertical' | 'horizontal' | 'radial'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> direction </td>
|
||
<td> ''</td>
|
||
<td> 方向反转，可选：'inverse'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean | string}</b> roam </td>
|
||
<td> false </td>
|
||
<td> 是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number|Array} symbolSize </td>
|
||
<td> 20</td>
|
||
<td> 所有该类目的节点的大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 只有一项的数组，为Object {}，内容如下：
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> null </td>
|
||
<td> 数据名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> value </td>
|
||
<td> null </td>
|
||
<td> 数据值 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number|Array} symbolSize </td>
|
||
<td> 20</td>
|
||
<td> 所有该类目的节点的大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {Array} children </td>
|
||
<td> []</td>
|
||
<td> 子节点，每项的属性和父节点相同 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>
|
||
参见
|
||
<a href="#ItemStyle" title="">
|
||
itemStyle
|
||
</a>
|
||
，权重最高
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（维恩图）<a name="SeriesVenn"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 数据列表，长度为3，前两项分别表示两个集合，第三项表示交集。每一个数组项为Object {}，内容如下：
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td> null </td>
|
||
<td> 数据名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Number}</b> value </td>
|
||
<td> null </td>
|
||
<td> 数据值 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>
|
||
参见
|
||
<a href="#ItemStyle" title="">
|
||
itemStyle
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series（字符云）<a name="SeriesWordCloud"> </a></h5>
|
||
<P> 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> center </td>
|
||
<td> <pre> ['50%', '50%'] </pre></td>
|
||
<td>字符云中心位置，支持绝对值（px）和百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> size </td>
|
||
<td> <pre> ['40%', '40%'] </pre></td>
|
||
<td>字符云大小，支持绝对值（px）和百分比</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> textRotation </td>
|
||
<td> <pre>[0, 90]</pre> </td>
|
||
<td>文字旋转角度可选列表，默认会随机从水平（0）和垂直（90）两个方向中选择，可以设置多个可选角度，例如 [0, -45, 45, 90] </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> autoSize </td>
|
||
<td>
|
||
<pre>{
|
||
enable: true,
|
||
minSize: 12
|
||
} </pre> </td>
|
||
<td> 字体大小自动计算配置，默认开启自动计算，程序会根据每个数据的 value 大小以及画布的大小控制字体大小以达到最佳的显示效果。minSize 可以强制最小字体。 关闭的时候字体大小取 itemStyle.normal.textStyle.fontSize，建议开启。</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {} </td>
|
||
<td>参见<a href="#ItemStyle" title="">itemStyle</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]，数组内依次为横值，纵值，大小(可选)
|
||
},
|
||
[12, 15, 1]
|
||
...
|
||
]
|
||
</pre>
|
||
</div>
|
||
<P> 当图表类型为K线图时，其数值设置比较特殊，他的数值内容为长度为4的数组，分别代表[开盘价，收盘价，最低值，最高值]</P>
|
||
<div class="code">
|
||
<pre>[
|
||
{
|
||
value : [2190.1, 2148.35, 2126.22, 2190.1] // // 开盘，收盘，最低，最高
|
||
},
|
||
[2242.26, 2210.9, 2205.07, 2250.63],
|
||
...
|
||
]
|
||
</pre>
|
||
</div>
|
||
<P> 当图表类型为饼图时，需要说明每部分数据的名称name，可设置选中状态，所以设置为：</P>
|
||
<div class="code">
|
||
<pre>[
|
||
{
|
||
value : 12，
|
||
name : 'apple' //每部分数据的名称
|
||
},
|
||
...
|
||
]
|
||
</pre>
|
||
</div>
|
||
<P> 当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态，所以设置为：</P>
|
||
<div class="code">
|
||
<pre>[
|
||
{
|
||
name: '北京',
|
||
value: 1234,
|
||
selected: true
|
||
},
|
||
{
|
||
name: '天津',
|
||
value: 321
|
||
},
|
||
...
|
||
]
|
||
</pre>
|
||
</div>
|
||
|
||
<h5>series.markPoint<a name="SeriesMarkPoint"> </a></h5>
|
||
<P> 系列中的数据标注内容</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clickable </td>
|
||
<td> true </td>
|
||
<td> 数据图形是否可点击，默认开启，如果没有click事件响应可以关闭 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'pin' </td>
|
||
<td> 标注类型，同series中的<a href="#Series">symbol</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array | Function} </b> symbolSize </td>
|
||
<td> 10 </td>
|
||
<td> 标注大小，同series中的<a href="#Series">symbolSize</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> symbolRotate </td>
|
||
<td> null </td>
|
||
<td> 标注图形旋转角度，同series中的<a href="#Series">symbolRotate</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> large </td>
|
||
<td> false </td>
|
||
<td> 是否启动大规模标注模式</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> effect </td>
|
||
<td><pre>{
|
||
show: false,
|
||
type: 'scale',
|
||
loop: true,
|
||
period: 15,
|
||
scaleSize : 2,
|
||
bounceDistance: 10,
|
||
color : null,
|
||
shadowColor : null,
|
||
shadowBlur : 0
|
||
} </pre></td>
|
||
<td> 标注图形炫光特效:
|
||
<br/>show 是否开启，默认关闭
|
||
<br/>type 特效类型，默认为'scale'（放大），可选还有'bounce'（跳动）
|
||
<br/>loop 循环动画，默认开启,
|
||
<br/>period 运动周期，无单位，值越大越慢，默认为15
|
||
<br/>scaleSize 放大倍数，以markPoint symbolSize为基准，type为scale时有效
|
||
<br/>bounceDistance 跳动距离，单位为px，type为bounce时有效
|
||
<br/>color 炫光颜色，默认跟随markPoint itemStyle定义颜色,
|
||
<br/>shadowColor 光影颜色，默认跟随color
|
||
<br/>shadowBlur 光影模糊度，默认为0
|
||
<br/><a href="./example/map11.html" target="_blank">百度迁徙（模拟） »</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {...} </td>
|
||
<td> 标注图形样式属性，同series中的<a href="#Series">itemStyle</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 标注图形数据，见下 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series.markPoint.data<a name="SeriesMarkPointData"> </a></h5>
|
||
<P> 标注的数据内容数组，最直接的数据项可直接指定标注位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:</P>
|
||
<div class="code">
|
||
<pre>data : [
|
||
{name: '标注1', value: 100, x: 50, y: 20},
|
||
{name: '标注2', value: 200, x: 150, y: 120},
|
||
...
|
||
]</pre>
|
||
</div>
|
||
<P> 在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：</P>
|
||
<div class="code">
|
||
<pre>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为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
|
||
...
|
||
]</pre>
|
||
</div>
|
||
<P> 更为实用的，在折线、柱形、散点图中，可以直接使用如下几个开箱即用的特殊点标注</P>
|
||
<div class="code">
|
||
<pre>data : [
|
||
{type : 'max', name: '自定义名字'}, // 最大值
|
||
{type : 'min', name: '自定义名字'} // 最小值
|
||
]</pre>
|
||
</div>
|
||
<P> 标注数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标注，并且能够随地图漫游缩放，需要为markPoint提供一份geoCoord，如下</P>
|
||
<div class="code">
|
||
<pre>data : [
|
||
{name: '北京', value: 100},
|
||
{name: '上海', value: 200},
|
||
...
|
||
],
|
||
geoCoord : {
|
||
"北京":[116.46,39.92], // 支持数组[经度，维度]
|
||
"上海": {x: 121.48, y: 31.22}, // 支持对象{x:经度,y:纬度}
|
||
...
|
||
}
|
||
</pre>
|
||
</div>
|
||
|
||
<h5>series.markLine<a name="SeriesMarkLine"> </a></h5>
|
||
<P> 系列中的数据标线内容</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> clickable </td>
|
||
<td> true </td>
|
||
<td> 数据图形是否可点击，默认开启，如果没有click事件响应可以关闭 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | string}</b> symbol </td>
|
||
<td> ['circle', 'arrow'] </td>
|
||
<td> 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string，同series中的<a href="#Series">symbol</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | number | Function}</b> symbolSize </td>
|
||
<td> [2, 4] </td>
|
||
<td> 标线起始和结束的symbol大小，半宽（半径）参数，如果都一样，可以直接传number或function，同series中的<a href="#Series">symbolSize</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array | number} </b>symbolRotate </td>
|
||
<td> null </td>
|
||
<td> 标线起始和结束的symbol旋转控制，同series中的<a href="#Series">symbolRotate</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>boolean</b> large</td>
|
||
<td> false </td>
|
||
<td>
|
||
是否启用大规模标线模式，默认关闭。
|
||
<br />大规模标线模式下会优化标线绘制，同个系列的的所有标线都会使用同一种样式，并且忽略标线两端 symbol 的绘制。
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> smooth </td>
|
||
<td> false </td>
|
||
<td> 平滑曲线显示，smooth为true时lineStyle不支持虚线</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> smoothness </td>
|
||
<td> 0.2 </td>
|
||
<td> 平滑曲线弧度，smooth为true时有效，指定平滑曲线弧度</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> precision </td>
|
||
<td> 2 </td>
|
||
<td> 小数精度，使用开箱即用的均线markLine时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> bundling </td>
|
||
<td>
|
||
<pre>{
|
||
enable: false,
|
||
maxTurningAngle: 45
|
||
}</pre>
|
||
</td>
|
||
<td>
|
||
边捆绑：
|
||
<br />enable 是否使用边捆绑，默认关闭
|
||
<br />maxTurningAngle 边捆绑算法参数，可选 [0, 90] 的角度，配置捆绑后的边最大拐角, 默认为 45 度
|
||
<br />
|
||
<br />注：捆绑算法使用 Multilevel Agglomerative Edge Bundling for Visualizing Large Graphs
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> effect </td>
|
||
<td><pre>{
|
||
show: false,
|
||
loop: true,
|
||
period: 15,
|
||
scaleSize : 2,
|
||
color : null,
|
||
shadowColor : null,
|
||
shadowBlur : null
|
||
} </pre></td>
|
||
<td> 标线图形炫光特效:
|
||
<br/>show 是否开启，默认关闭
|
||
<br/>loop 循环动画，默认开启,
|
||
<br/>period 运动周期，无单位，值越大越慢，默认为15
|
||
<br/>scaleSize 放大倍数，以markLine lineWidth为基准
|
||
<br/>color 炫光颜色，默认跟随markLine itemStyle定义颜色,
|
||
<br/>shadowColor 光影颜色，默认跟随color
|
||
<br/>shadowBlur 光影模糊度，默认根据scaleSize计算
|
||
<br/><a href="./example/map11.html" target="_blank">百度迁徙（模拟） »</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> itemStyle </td>
|
||
<td> {...} </td>
|
||
<td> 标线图形样式属性，同series中的<a href="#Series">itemStyle</a> </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Array}</b> data </td>
|
||
<td> [] </td>
|
||
<td> 标线图形数据，见下 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>series.markLine.data<a name="SeriesMarkLineData"> </a></h5>
|
||
<P> 标线的数据内容数组，最直接的数据项可直接指定标线起始和结束位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:</P>
|
||
<div class="code">
|
||
<pre>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}
|
||
],
|
||
...
|
||
]</pre>
|
||
</div>
|
||
<P> 在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标线基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：</P>
|
||
<div class="code">
|
||
<pre>data : [
|
||
[
|
||
{name: '标线1起点', value: 100, xAxis: 1, yAxis: 20}, // 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
|
||
{name: '标线1终点', xAxis: '周三', yAxis: 20}, // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
|
||
],
|
||
[
|
||
{name: '标线2起点', value: 200, xAxis: 10, yAxis: 20}, // 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
|
||
{name: '标线2终点', xAxis: 270, yAxis: 190}
|
||
],
|
||
...
|
||
]</pre>
|
||
</div>
|
||
<P> 更为实用的，在折线、柱形、散点图中，可以直接使用如下几个开箱即用的特殊点作为标线类型</P>
|
||
<div class="code">
|
||
<pre>data : [
|
||
{type : 'max', name: '自定义名字'}, // 最大值水平线或垂直线
|
||
{type : 'min', name: '自定义名字'}, // 最小值水平线或垂直线
|
||
{type : 'average', name: '自定义名字'},// 平均值水平线或垂直线
|
||
|
||
// 最小值指向最大值的连线
|
||
[
|
||
{type : 'min', name: '自定义名字'},
|
||
{type : 'max', name: '自定义名字'}
|
||
],
|
||
|
||
// 散点图中存在两个数值型坐标，默认用纵轴值计算特殊点，可以通过valueIndex:0指定为横轴特殊点
|
||
{type : 'max', name: '自定义名字', valueIndex:0}
|
||
]</pre>
|
||
<P> 标线数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标线，并且能够随地图漫游缩放，需要为markLine提供一份geoCoord，如下</P>
|
||
<div class="code">
|
||
<pre>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:纬度}
|
||
...
|
||
}
|
||
</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 full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 适用类型 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color | Function}</b> color </td>
|
||
<td> 图表各异 </td>
|
||
<td> 通用 </td>
|
||
<td> 颜色，主色 ，函数回调参数为<br/>{seriesIndex:x, series:xxx, dataIndex:y, data:yyy}</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> lineStyle </td>
|
||
<td> 图表各异 </td>
|
||
<td> 折线图，K线图，markLine</td>
|
||
<td> 线条样式，详见<a href="#LineStyle" title="">lineStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> areaStyle </td>
|
||
<td> 图表各异 </td>
|
||
<td> 堆积折线图，地图</td>
|
||
<td> 区域样式，详见<a href="#AreaStyle" title="">areaStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> chordStyle </td>
|
||
<td> 图表各异 </td>
|
||
<td> 和弦图</td>
|
||
<td> 弦样式，详见<a href="#ChordStyle" title="">chordStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> nodeStyle </td>
|
||
<td> 图表各异 </td>
|
||
<td> 力导向图</td>
|
||
<td> 节点样式，详见<a href="#NodeStyle" title="">nodeStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> linkStyle </td>
|
||
<td> 图表各异 </td>
|
||
<td> 力导向图</td>
|
||
<td> 边样式，详见<a href="#LinkStyle" title="">linkStyle</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor </td>
|
||
<td> 各异 </td>
|
||
<td> 折线图（symbol），散点图（symbole），饼图，地图，markPoint</td>
|
||
<td> 边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 各异 </td>
|
||
<td> 折线图（symbol），散点图（symbole），饼图，地图，markPoint</td>
|
||
<td> 边框线宽，单位px </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> barBorderColor </td>
|
||
<td> '#fff' </td>
|
||
<td> 柱形图</td>
|
||
<td> 边框颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number | Array}</b> barBorderRadius </td>
|
||
<td> 0 </td>
|
||
<td> 柱形图</td>
|
||
<td> 柱形边框圆角，单位px，默认为0，支持传入数组分别指定柱形4个圆角半径，如:[5, 5, 0, 0]（顺时针左上，右上，右下，左下） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> barBorderWidth </td>
|
||
<td> 0 </td>
|
||
<td> 柱形图</td>
|
||
<td> 柱形边框线宽，单位px，默认为0 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> label </td>
|
||
<td><pre>{
|
||
show: true,
|
||
position:'outer'
|
||
} </pre></td>
|
||
<td> 折线图，柱形图，K线图，散点图，饼图 ，地图，力导向，漏斗图，markPoint，markLine</td>
|
||
<td> 标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，
|
||
<br/>漏斗图默认显示在右侧，离图形距离由labelLine.length决定
|
||
<br/>地图标签不可指定位置，
|
||
<br/> 折线图，柱形图，K线图，散点图可指定position见下
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> labelLine </td>
|
||
<td> {show: true} </td>
|
||
<td> 饼图，漏斗图</td>
|
||
<td> 标签视觉引导线，默认显示 </td>
|
||
</tr>
|
||
</table>
|
||
<P> 其中标签label属性为对象，其包含：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 标签显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> position </td>
|
||
<td> 'outer' | null</td>
|
||
<td> 标签显示位置，地图标签不可指定位置
|
||
<br/>饼图可选为：'outer'（外部） | 'inner'（内部），
|
||
<br/>漏斗图可选为：'inner'（内部）| 'left' | 'right'（默认），
|
||
<br/>折线图，柱形图，K线图，散点图默认根据布局自适应为'top'或者'right'，可选的还有：'inside' | 'left' | 'bottom'
|
||
<br/>柱形图可选的还有，'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom'
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> rotate </td>
|
||
<td> false </td>
|
||
<td> 和弦图有效，文本标签自动旋转</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> distance </td>
|
||
<td> 10 </td>
|
||
<td> 和弦图: 文本标签旋转后于弦的间隔
|
||
<br/>饼图: 当label position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数，默认为0.5。
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> formatter </td>
|
||
<td> null </td>
|
||
<td> 标签文本格式器，通用，同<a href="#Tooltip" title="">Tooltip.formatter</a>，支持模板、方法回调，不支持异步回调</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> null </td>
|
||
<td> 标签的文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Number}</b> x </td>
|
||
<td> 各异 </td>
|
||
<td> 仅矩形树图使用，标签横坐标 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Number}</b> y </td>
|
||
<td> 各异 </td>
|
||
<td> 仅矩形树图使用，标签纵坐标 </td>
|
||
</tr>
|
||
</table>
|
||
<P> 其中标签视觉引导线labelLine属性为对象，其包含：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{boolean}</b> show </td>
|
||
<td> true </td>
|
||
<td> 饼图标签视觉引导线显示策略，可选为：true（显示） | false（隐藏） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> length </td>
|
||
<td> 40 </td>
|
||
<td> 线长 ，从图形外边缘起计算，可为负值。漏斗图支持'auto'</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> 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>
|
||
<p>
|
||
折线图 <a href="example/line.html" target="_blank">try this »</a>，
|
||
柱状图 <a href="example/bar.html" target="_blank">try this »</a>，
|
||
K线图 <a href="example/k.html" target="_blank">try this »</a>，
|
||
散点图<a href="example/scatter.html" target="_blank">try this »</a>，
|
||
饼图 <a href="example/pie.html" target="_blank">try this »</a>，
|
||
和弦图 <a href="example/chord.html" target="_blank">try this »</a>，
|
||
力导向布局 <a href="example/force1.html" target="_blank">try this »</a>，
|
||
地图 <a href="example/map.html" target="_blank">try this »</a>，
|
||
仪表盘 <a href="example/gauge.html" target="_blank">try this »</a>，
|
||
漏斗图 <a href="example/funnel.html" target="_blank">try this »</a>
|
||
</p>
|
||
|
||
<h4>lineStyle<a name="LineStyle"> </a></h4>
|
||
<P> 线条（线段）样式</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> color</td>
|
||
<td> 各异 </td>
|
||
<td> 颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type </td>
|
||
<td> 'solid' </td>
|
||
<td> 线条样式，可选为：'solid' | 'dotted' | 'dashed'，
|
||
树图还可以选：'curve' | 'broken'
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 各异 </td>
|
||
<td> 线宽 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color=}</b> shadowColor </td>
|
||
<td> rgba(0,0,0,0) </td>
|
||
<td> 折线主线(IE8+)有效，阴影色彩，支持rgba </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number=}</b> shadowBlur </td>
|
||
<td> 5 </td>
|
||
<td> 折线主线(IE8+)有效，阴影模糊度，大于0有效 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number=}</b> shadowOffsetX </td>
|
||
<td> 3 </td>
|
||
<td> 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number=}</b> shadowOffsetY </td>
|
||
<td> 3 </td>
|
||
<td> 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>areaStyle<a name="AreaStyle"> </a></h4>
|
||
<P> 区域填充样式</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> color</td>
|
||
<td> 各异 </td>
|
||
<td> 颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type </td>
|
||
<td> 'default' </td>
|
||
<td> 填充样式，目前仅支持'default'(实填充) </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>chordStyle<a name="ChordStyle"> </a></h4>
|
||
<P> 和弦图中的弦样式 </P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width</td>
|
||
<td>1</td>
|
||
<td>贝塞尔曲线的线宽, ribbonType是false时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> color</td>
|
||
<td>1</td>
|
||
<td>贝塞尔曲线的颜色, ribbonType是false时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderWidth</td>
|
||
<td>1</td>
|
||
<td>ribbon的描边线宽, ribbonType是true时有效</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> borderColor</td>
|
||
<td>1</td>
|
||
<td>ribbon的描边颜色, ribbonType是true时有效</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>nodeStyle<a name="NodeStyle"> </a></h4>
|
||
<P> 力导向图中的节点样式</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> color</td>
|
||
<td> '#f08c2e' </td>
|
||
<td> 填充颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> borderColor</td>
|
||
<td> '#5182ab' </td>
|
||
<td> 描边颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> borderWidth </td>
|
||
<td> 1 </td>
|
||
<td> 描边线宽 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>linkStyle<a name="LinkStyle"> </a></h4>
|
||
<P> 力导向图中的边样式 </P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> type</td>
|
||
<td> 'line' </td>
|
||
<td> 线条类型，可选为：'curve'（曲线） | 'line'（直线） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> color</td>
|
||
<td> '#5182ab' </td>
|
||
<td> 线条颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> width </td>
|
||
<td> 1 </td>
|
||
<td> 线宽 </td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>textStyle<a name="TextStyle"> </a></h4>
|
||
<P> 文字样式</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{color}</b> color</td>
|
||
<td> 各异 </td>
|
||
<td> 颜色 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> decoration </td>
|
||
<td> 'none' </td>
|
||
<td> 修饰，仅对tooltip.textStyle生效 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> align </td>
|
||
<td> 各异 </td>
|
||
<td> 水平对齐方式，可选为：'left' | 'right' | 'center' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> baseline </td>
|
||
<td> 各异 </td>
|
||
<td> 垂直对齐方式，可选为：'top' | 'bottom' | 'middle' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> fontFamily </td>
|
||
<td> 'Arial, Verdana, sans-serif'</td>
|
||
<td> 字体系列 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> fontSize </td>
|
||
<td> 12</td>
|
||
<td> 字号 ，单位px</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> fontStyle </td>
|
||
<td> 'normal'</td>
|
||
<td> 样式，可选为：'normal' | 'italic' | 'oblique' </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> 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 full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> text </td>
|
||
<td> '数据读取中...' </td>
|
||
<td> 显示话术 ，'\n'指定换行</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'center' </td>
|
||
<td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'center' </td>
|
||
<td> 垂直安放位置，默认为全图居中，可选为：'center' | 'bottom' | 'top' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> null </td>
|
||
<td> 显示话术的文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> effect </td>
|
||
<td> 'spin' </td>
|
||
<td> loading效果，可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'，支持外部装载</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> effectOption </td>
|
||
<td> null </td>
|
||
<td> loading效果选项，详见zrender</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> progress </td>
|
||
<td> null </td>
|
||
<td> 指定当前进度[0~1]，个别效果有效。</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>noDataLoadingOption<a name="NoDataLoadingOption"> </a></h4>
|
||
<P> 无数据提示，loading动画选项。</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> text </td>
|
||
<td> '暂无数据' </td>
|
||
<td> 显示话术 ，'\n'指定换行</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> x </td>
|
||
<td> 'center' </td>
|
||
<td> 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | <b>{number}</b>（x坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | number}</b> y </td>
|
||
<td> 'center' </td>
|
||
<td> 垂直安放位置，默认为全图居中，可选为：'center' | 'bottom' | 'top' | <b>{number}</b>（y坐标，单位px） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> textStyle </td>
|
||
<td> null </td>
|
||
<td> 显示话术的文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string | Function}</b> effect </td>
|
||
<td> 'bubble' </td>
|
||
<td> loading效果，可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'，支持外部装载</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Object}</b> effectOption </td>
|
||
<td> null </td>
|
||
<td> loading效果选项，详见zrender</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> progress </td>
|
||
<td> null </td>
|
||
<td> 指定当前进度[0~1]，个别效果有效。</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>backgroundColor<a name="BackgroundColor"> </a></h4>
|
||
<P>
|
||
<b>{color}</b> null，全图默认背景，默认为null，同'rgba(0,0,0,0)'
|
||
</P>
|
||
|
||
<h4>color<a name="Color"> </a></h4>
|
||
<P>
|
||
<b>{Array}</b> [
|
||
<br/> '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
|
||
<br/> '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
|
||
<br/> '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
|
||
<br/> '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
|
||
<br/>]，默认颜色序列，循环使用
|
||
</P>
|
||
|
||
<h4>symbolList<a name="SymbolList"> </a></h4>
|
||
<P>
|
||
<b>{Array}</b> [
|
||
<br/> 'circle', 'rectangle', 'triangle', 'diamond',
|
||
<br/> 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
|
||
<br/>]，默认标志图形类型列表，循环使用
|
||
</P>
|
||
|
||
<h4>renderAsImage<a name="RenderAsImage"> </a></h4>
|
||
<P> {boolean | string} false，非IE8-支持渲染为图片，可设为true或指定图片格式（png | jpeg），渲染为图片后实例依然可用（如setOption，resize等），但各种交互失效</P>
|
||
|
||
<h4>calculable<a name="Calculable"> </a></h4>
|
||
<P> <b>{boolean}</b> false，是否启用拖拽重计算特性，默认关闭</P>
|
||
|
||
<h4>calculableColor<a name="CalculableColor"> </a></h4>
|
||
<P> <b>{color}</b> 'rgba(255,165,0,0.6)'，拖拽重计算提示边框颜色</P>
|
||
|
||
<h4>calculableHolderColor<a name="CalculableHolderColor"> </a></h4>
|
||
<P> <b>{color}</b> '#ccc'，可计算占位提示颜色</P>
|
||
|
||
<h4>nameConnector<a name="NameConnector"> </a></h4>
|
||
<P> <b>{string}</b> ' & '，数据合并名字间连接符</P>
|
||
|
||
<h4>valueConnector<a name="ValueConnector"> </a></h4>
|
||
<P> <b>{string}</b> ' : '，数据合并名字与数值间连接符</P>
|
||
|
||
<h4>animation<a name="Animation"> </a></h4>
|
||
<P> <b>{boolean}</b> true，是否启用图表初始化动画，默认开启，建议IE8-关闭</P>
|
||
|
||
<h4>addDataAnimation<a name="AddDataAnimation"> </a></h4>
|
||
<P> <b>{boolean}</b> true，是否启用动态数据接口动画效果，默认开启，建议IE8-关闭</P>
|
||
|
||
<h4>animationThreshold<a name="AnimationThreshold"> </a></h4>
|
||
<P> <b>{number}</b> 2500，动画元素阀值，产生的图形原素超过2500不出动画，建议IE8-关闭</P>
|
||
|
||
<h4>animationDuration<a name="AnimationDuration"> </a></h4>
|
||
<P> <b>{number}</b> 2000，进入动画时长，单位ms</P>
|
||
|
||
<h4>animationDurationUpdate<a name="animationDurationUpdate"> </a></h4>
|
||
<P> <b>{number}</b> 500，更新动画时长，单位ms</P>
|
||
|
||
<h4>animationEasing<a name="AnimationEasing"> </a></h4>
|
||
<P> <b>{string}</b> '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>和弦图和力导向图等图的数据表示需要一个图的数据结构，Echarts中可以使用nodes或者data来表示节点数据，用links或者邻接矩阵matrix表示边, 对于每个节点可以通过一个额外的category配置节点的分类。</p>
|
||
|
||
<h5>categories<a name="categories"></a></h5>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td></td>
|
||
<td> 类目名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td> 'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number|Array} symbolSize </td>
|
||
<td></td>
|
||
<td> 所有该类目的节点的大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> itemStyle </td>
|
||
<td></td>
|
||
<td> 详见 <a href="#ItemStyle">itemStyle</a>，注意力导向图单个 category 的 itemStyle 中没有 nodeStyle 的配置项，而是直接使用 normal(emphasis) 下的 color, borderWidth 和 borderColor</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>nodes(data)<a name="nodes(data)"></a></h5>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> name </td>
|
||
<td></td>
|
||
<td> 节点名称 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> label </td>
|
||
<td></td>
|
||
<td> 节点标签名称，默认显示name作为标签 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> value </td>
|
||
<td> </td>
|
||
<td> 节点值，如果不设置会取所有边的权重(weight)和 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {boolean} ignore </td>
|
||
<td>false</td>
|
||
<td>是否忽略该节点</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b> symbol </td>
|
||
<td>'circle' </td>
|
||
<td> 同<a href="#SeriesCartesian" title="">series（直角系）</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number|Array} symbolSize </td>
|
||
<td></td>
|
||
<td> 强制指定节点的大小 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> {number} category </td>
|
||
<td>0</td>
|
||
<td> 节点的 category index </td>
|
||
</tr>
|
||
<tr>
|
||
<td> itemStyle </td>
|
||
<td></td>
|
||
<td> 详见 <a href="#ItemStyle">itemStyle</a>，注意力导向图单个节点的 itemStyle 中没有 nodeStyle 的配置项，而是直接使用 normal(emphasis) 下的 color, borderWidth 和 borderColor</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h5>links<a name="GraphLinks"></a></h5>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 名称 </th>
|
||
<th> 默认值 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string|number}</b> source </td>
|
||
<td></td>
|
||
<td> 源节点的index或者源节点的name </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string|number}</b> target </td>
|
||
<td></td>
|
||
<td> 目标节点的index或者目标节点的name </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{number}</b> weight </td>
|
||
<td> 1 </td>
|
||
<td> 边的权重 </td>
|
||
</tr>
|
||
<tr>
|
||
<td> itemStyle </td>
|
||
<td></td>
|
||
<td> see <a href="#LinkStyle">linkStyle</a> </td>
|
||
</tr>
|
||
</table>
|
||
<h5>matrix<a name="GraphMatrix"></a></h5>
|
||
<p>关系数据，用二维数组表示，项 [i][j] 的数值表示 i 到 j 的关系数据</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>支持百度地图作为地图源叠加echarts可视化功能，
|
||
<a href="../extension/BMap/doc/doc.html" target="_blank">文档</a>，
|
||
<a href="../extension/BMap/doc/BMap.html" target="_blank">例子1</a>，
|
||
<a href="../extension/BMap/doc/example.html" target="_blank">例子2</a>，
|
||
by <a href="http://weibo.com/wind108369" target="_blank">杨骥</a>
|
||
</p>
|
||
<p>支持标准<a href='http://www.oschina.net/translate/geojson-spec?cmp' target="_blank">GeoJson</a>动态扩展地图类型，try <a href="./example/map6.html" target="_blank">HK 》</a> <a href="./example/map7.html" target="_blank">USA 》</a></p>
|
||
<div class="code">
|
||
<pre>
|
||
// 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', // 自定义扩展图表类型
|
||
...
|
||
}
|
||
]
|
||
</pre>
|
||
</div>
|
||
<h3>附录：组件和图表的实例接口<a name="附录组件图表实例接口"> </a></h3>
|
||
<p>为了实现更高级的功能和需求定制，ECharts团队做了个艰难的决定，开放组件和图表实例接口。这些组件和图表实例都被挂载到init所得到的实例上（如myChart），分别存放在chart和component下，如可以通过myChart.chart.map得到当前地图实例并可以读取并调用里面的各种属性和方法。</p>
|
||
<p><b style="color:red">【重要】</b>请注意，ECharts接口基于数据驱动设计，这些实例并不为开放准备，虽然你可以无限制的访问，甚至动态的覆盖重写，但这可能会导致图表无法正常工作或随着版本升级无法得到兼容，所以我们仅列出如下部分方法和属性作为使用上的参考（或者说限制），我们会尽最大的努力去保证这些方法或属性的稳定和向下兼容，并且保证在出现无法兼容的更新时在changelog上通告。如果你使用了并不出现在下述文档中的方法或属性将得不到这份保证，请谅解。</p>
|
||
|
||
<h4>组件实例接口<a name="附录组件实例接口"> </a></h3>
|
||
<p>ECharts包含组件有：timeline、title、legend、dataRange、toolbox、tooltip、dataZoom、grid、xAxis、yAxis、polar</p>
|
||
|
||
<h4>timeline<a name="TimelineInterface"> </a></h4>
|
||
<P>时间轴，每个图表最多仅有一个时间轴。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_TIMELINE </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> play</td>
|
||
<td> 播放
|
||
<br/>参数：<b>{number=}</b> index， <b>{boolean=}</b> autoPlay，（见下）
|
||
<br/> 返回：<b>{number}</b> currendIndex，当前播放的options数组位置索引
|
||
<br/>index ：指定需要播放的options数组位置索引，不指定则从当前index开始播放
|
||
<br/>autoPlay ：是否自动播放，不指定则自动播放
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> stop</td>
|
||
<td> 暂停
|
||
<br/>参数：无
|
||
<br/> 返回：<b>{number}</b> currendIndex，当前播放的options数组位置索引
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> next</td>
|
||
<td> 下一个
|
||
<br/>参数：无
|
||
<br/> 返回：<b>{number}</b> currendIndex，当前播放的options数组位置索引
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> last</td>
|
||
<td> 上一个
|
||
<br/>参数：无
|
||
<br/> 返回：<b>{number}</b> currendIndex，当前播放的options数组位置索引
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>tooltip<a name="TooltipInterface"> </a></h4>
|
||
<P>提示框，鼠标悬浮交互时的信息提示，每个图表最多仅有一个提示框。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_LEGEND </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> showTip</td>
|
||
<td> 显示提示框。<br/>参数：<b>{Object}</b> param （见下）<br/> 返回：null
|
||
<br/>参数格式：{ seriesIndex: 0, seriesName:'', dataIndex:0 } // line、bar、scatter、k、radar，其中dataIndex必须，seriesIndex、seriesName指定一个即可
|
||
<br/>参数格式：{ seriesIndex: 0, seriesName:'', name:'' } // map、pie、chord，其中name必须，seriesIndex、seriesName指定一个即可
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> hideTip</td>
|
||
<td> 隐藏提示框。<br/>参数：无<br/> 返回：null</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>legend<a name="LegendInterface"> </a></h4>
|
||
<P>图例，每个图表最多仅有一个图例。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_LEGEND </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> isSelected</td>
|
||
<td> 图例开关相关，判断传入的名称当前是否处于开启状态。<br/>参数：<b>{string}</b> name （名称）<br/> 返回：<b>{boolean}</b> true为开启，false为关闭</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getSelectedMap</td>
|
||
<td> 图例开关相关，获取当前的全部图例开关状态图。<br/>参数：无<br/> 返回：<b>{Object}</b> {name:value}的键值表，name为名称，value为状态值，true为开启，false为关闭</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getColor</td>
|
||
<td> 图例颜色相关，获取传入的名称所对应的颜色，如果传入名称未出现在已有的图例数据项中，将生成一个新的颜色与传入名称匹配并返回该颜色<br/>参数：<b>{string}</b> name （名称）<br/> 返回：<b>{color}</b> 匹配颜色</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> setColor</td>
|
||
<td> 图例颜色相关，设置某一系列（数据）对应的颜色，改变颜色图表并不会自动刷新，如果需要更新调用实例的refresh方法
|
||
<br/>参数：<b>{string}</b> name （名称），<b>{color}</b> color 匹配颜色<br/> 返回：null</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> setSelected</td>
|
||
<td> 设置某一系列（数据）的选择状态
|
||
<br/>参数：<b>{string}</b> name （名称），<b>{boolean}</b> status 状态<br/> 返回：null</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>dataRange<a name="DataRangeInterface"> </a></h4>
|
||
<P>值域选择，每个图表最多仅有一个值域控件。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_DATARANGE </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getColor</td>
|
||
<td> 值域控件颜色相关，获取传入的值所对应的颜色<br/>参数：<b>{number}</b> value （值）<br/> 返回：<b>{color}</b> 匹配颜色</td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/dataRange.png" title="" alt="值域"/></P>
|
||
|
||
<h4>dataZoom<a name="DataZoomInterface"> </a></h4>
|
||
<P>数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_DATAZOOM </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> absoluteZoom</td>
|
||
<td> 数据区域缩放控制<br/>参数：<b>{Object}</b> {start : value, end : value, start2 : value, end2 : value} （缩放参数）<br/> 返回：无，作用：根据传入的value改变数据显示区域，value有效值为[0,100]，一般仅指定主区域控制start、end即可，在散点图中可以同时做两个维度的区域缩放，可通过额外指定start2、end2实现。</td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/dataZoom.png" title="" alt="数据区域缩放"/></P>
|
||
|
||
<h4>grid<a name="GridInterface"> </a></h4>
|
||
<P>直角坐标系内绘图网格。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_GRID </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getX</td>
|
||
<td> 网格左上角在图形显示中的横坐标，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getXend</td>
|
||
<td> 网格右下角在图形显示中的横坐标，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getY</td>
|
||
<td> 网格左上角在图形显示中的纵坐标，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getYend</td>
|
||
<td> 网格右上角在图形显示中的纵坐标，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getWidth</td>
|
||
<td> 网格在图形显示中的实际宽度，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 宽度值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getHeight</td>
|
||
<td> 网格在图形显示中的实际高度，单位px。<br/>参数：无 <br/> 返回：<b>{number}</b> 高度值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getArea</td>
|
||
<td> 网格实际区域数据，等同一次返回getX，getY，getWidth，getHeight。<br/>参数：无 <br/> 返回：<b>{Object}</b> {x : value, y : value, width : value, height : value}</td>
|
||
</tr>
|
||
</table>
|
||
<p><img src="./asset/img/doc/grid.jpg" title="" alt="绘图网格"/></P>
|
||
|
||
<h4>xAxis/yAxis<a name="AxisInterface"> </a></h4>
|
||
<P>横纵坐标轴。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getAxis</td>
|
||
<td> 获取传入index的坐标轴实例，存在最多上下左右4条坐标轴，坐标轴可以为类目轴或数值轴，获取坐标轴实例和可用的坐标轴方法见下节<br/>参数：<b>{number}</b> 0/1 （坐标轴index）<br/> 返回：{categoryAxis | valueAxis} 指定index的坐标轴实例，可以是类目轴或数值轴</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>categoryAxis<a name="CategoryAxisInterface"> </a></h4>
|
||
<P>类目轴。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_AXIS_CATEGORY </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getCoord</td>
|
||
<td> 根据类目名字值换算绘图位置，单位px<br/>参数：<b>{string}</b> name （名字）<br/> 返回：<b>{number}</b> 坐标值，重名类目值返回第一个匹配的</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getCoordByIndex</td>
|
||
<td> 根据类目轴数据索引换算绘图位置，单位px<br/>参数：<b>{number}</b> index （索引）<br/> 返回：<b>{number}</b> 坐标值，index小于0返回坐标起点，大于类目长度返回重点</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getNameByIndex</td>
|
||
<td> 根据类目轴数据索引换算类目轴名称<br/>参数：<b>{number}</b> index （索引）<br/> 返回：<b>{string}</b> 名字</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getIndexByName</td>
|
||
<td> 根据类目轴名称换算类目轴数据索引<br/>参数：<b>{string}</b> name （名字）<br/> 返回：<b>{number}</b> 索引，重名类目值返回第一个匹配的</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>valueAxis<a name="ValueAxisInterface"> </a></h4>
|
||
<P>数值轴。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_AXIS_VALUE </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getCoord</td>
|
||
<td> 根据数值换算绘图位置，单位px<br/>参数：<b>{number}</b> value （数值）<br/> 返回：<b>{number}</b> 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getExtremum</td>
|
||
<td> 返回当前坐标轴的极值<br/>参数：null，<br/> 返回：<b>{Object}</b> {min:{number}, max:{number}}</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>polar<a name="PolarInterface"> </a></h4>
|
||
<P>极坐标。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 组件类型，等于config.COMPONENT_TYPE_POLAR </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getVector</td>
|
||
<td> 获取每个指标上某个value对应的坐标，单位px<br/>参数：<b>{number}</b> polarIndex （极坐标索引）, <b>{number}</b> indicatorIndex （指标索引）, <b>{number}</b> value （数值）<br/> 返回：<b>{Array}</b> [x, y] 坐标值</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h4>图表实例接口<a name="附录图表实例接口"> </a></h3>
|
||
<p>ECharts支持的图表有：line、bar、scatter、k、pie、radar、chord、force、map</p>
|
||
|
||
<h4>map<a name="MapInterface"> </a></h4>
|
||
<P>地图。可使用的属性和方法有：</P>
|
||
<table cellspacing="0" class="ADoc_table full">
|
||
<tr>
|
||
<th> 类型 </th>
|
||
<th> 名称 </th>
|
||
<th> 描述 </th>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{string}</b></td>
|
||
<td> type </td>
|
||
<td> 图表类型，等于config.CHART_TYPE_MAP </td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getPosByGeo</td>
|
||
<td> 经纬度转平面坐标，单位px<br/>参数：<b>{string}</b> mapType （地图类型）, <b>{Array}</b> [ew,ns] （经纬度）<br/> 返回：<b>{Array}</b> [x, y] 坐标值</td>
|
||
</tr>
|
||
<tr>
|
||
<td> <b>{Function}</b></td>
|
||
<td> getGeoByPos</td>
|
||
<td> 平面坐标转经纬度，单位px<br/>参数：<b>{string}</b> mapType （地图类型）, <b>{Array}</b> [x, y] （坐标值 ）<br/> 返回：<b>{Array}</b> [ew,ns] 经纬度</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>附录：一个直观的事例<a name="附录一个直观的事例"> </a></h3>
|
||
<p>查看更多实例 <a href="example.html" target="_blank">example</a>，或者使用这个<a href="example/demo.html" target="_blank">demo</a> 或 <a href="example/www/index.html" target="_blank">ECharts单一文件引入</a>作为你的模板</p>
|
||
<div class="code" style="margin-bottom: 25px;">
|
||
<pre style="margin-bottom: 0;">// 图表实例化------------------
|
||
// srcipt标签式引入
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
// 过渡---------------------
|
||
myChart.showLoading({
|
||
text: '正在努力的读取数据中...', //loading话术
|
||
});
|
||
|
||
// ajax getting data...............
|
||
|
||
// ajax callback
|
||
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>
|
||
</div><!--/.fluid-container-->
|
||
|
||
<!-- FOOTER -->
|
||
<footer id="footer"></footer>
|
||
|
||
<script src="./asset/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
|
||
<script src="./asset/js/bootstrap.min.js"></script>
|
||
<script src="asset/js/echartsConfig.js"></script>
|
||
<script src="asset/js/echartsDoc.js"></script>
|
||
</body>
|
||
</html>
|