提交 631b2d81 编写于 作者: K kener

文档更新

上级 b41e33c2
doc/asset/img/example/bar2.png

34.9 KB | W: | H:

doc/asset/img/example/bar2.png

27.2 KB | W: | H:

doc/asset/img/example/bar2.png
doc/asset/img/example/bar2.png
doc/asset/img/example/bar2.png
doc/asset/img/example/bar2.png
  • 2-up
  • Swipe
  • Onion skin
doc/asset/img/example/line1.png

14.3 KB | W: | H:

doc/asset/img/example/line1.png

35.0 KB | W: | H:

doc/asset/img/example/line1.png
doc/asset/img/example/line1.png
doc/asset/img/example/line1.png
doc/asset/img/example/line1.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -116,12 +116,12 @@
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度,非标准参数
feature : {
//mark : true,
//dataZoom : true,
//dataView : {readOnly: false},
//magicType: ['line', 'bar'],
//restore : true,
//saveAsImage : true
mark : null,
dataZoom : null,
dataView : null,
magicType: null,
restore : null,
saveAsImage : null
},
showTitle : true,
featureTitle : {
......@@ -363,6 +363,7 @@
barCategoryGap : '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值
itemStyle: {
normal: {
color: null,
borderColor: '#fff', // 柱条边线
borderRadius: 0, // 柱条边线圆角,单位px,默认为0
borderWidth: 1, // 柱条边线线宽,单位px,默认为1
......@@ -375,6 +376,7 @@
}
},
emphasis: {
color: null,
borderColor: 'rgba(0,0,0,0)', // 柱条边线
borderRadius: 0, // 柱条边线圆角,单位px,默认为0
borderWidth: 1, // 柱条边线线宽,单位px,默认为1
......@@ -396,7 +398,7 @@
yAxisIndex: 0,
itemStyle: {
normal: {
// color: 各异,
color: null,
label: {
show: false,
formatter: '标签文本格式器,同Tooltip.formatter,不支持回调',
......@@ -414,6 +416,7 @@
}
},
emphasis: {
color: null,
label: {
show: false,
formatter: '标签文本格式器,同Tooltip.formatter,不支持回调',
......@@ -421,12 +424,12 @@
// 'inside'|'left'|'right'|'top'|'bottom'
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
// color: 各异,
}
},
smooth : false,
symbol: null, // 拐点图形类型,非标准参数
symbolSize: 2, // 可计算特性参数,空数据拖拽提示图形大小
symbolRotate : null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
},
......@@ -447,7 +450,8 @@
}
},
emphasis: {
// color: 各异,
color: null,
color0: null
}
}
},
......@@ -458,10 +462,12 @@
yAxisIndex: 0,
symbol: null, // 图形类型,非标准参数
symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolRotate : null, // 图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
color: null,
label: {
show: false,
formatter : function(a, b, c) {
......@@ -478,6 +484,7 @@
}
},
emphasis: {
color: null,
label: {
show: false,
formatter : function(a, b, c) {
......@@ -501,18 +508,25 @@
polarIndex: 0,
itemStyle: {
normal: {
// color: 各异,
color: null,
label: {
show: false
},
lineStyle: {
width: 2,
type: 'solid'
}
},
emphasis: {
// color: 各异,
color: null,
label: {
show: false
}
}
},
//symbol: null, // 拐点图形类型,非标准参数
symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小
symbol: null, // 拐点图形类型,非标准参数
symbolSize: 2, // 可计算特性参数,空数据拖拽提示图形大小
symbolRotate : null, // 图形旋转控制
},
// 饼图默认参数
......@@ -526,6 +540,7 @@
roseType : null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
itemStyle: {
normal: {
color: null,
label: {
show: true,
position: 'outer',
......@@ -536,13 +551,14 @@
show: true,
length: 30,
lineStyle: {
// color: 各异,
color: null,
width: 1,
type: 'solid'
}
}
},
emphasis: {
color: null,
label: {
show: false,
position: 'outer',
......@@ -551,9 +567,9 @@
},
labelLine: {
show: false,
length: 40,
length: 30,
lineStyle: {
// color: 各异,
color: null,
width: 1,
type: 'solid'
}
......@@ -572,9 +588,11 @@
},
mapValueCalculation: 'sum', // 数值合并方式,默认加和,可选为:'sum' | 'average'
selectedMode: false, // 选择模式,默认关闭,可选single,multiple
hoverable: true,
roam : false, // 是否开启缩放及漫游模式
itemStyle: {
normal: {
// color: 各异,
color: null,
lineStyle: {
width: 2,
color: '#fff'
......@@ -590,7 +608,7 @@
}
},
emphasis: { // 也是选中样式
// color: 各异,
color: null,
lineStyle: {
width: 2,
color: '#fff'
......@@ -624,7 +642,7 @@
categories : [],
itemStyle: {
normal: {
// color: 各异,
color: null,
label: {
show: false,
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
......@@ -639,7 +657,7 @@
}
},
emphasis: {
// color: 各异,
color: null,
label: {
show: false,
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
......@@ -713,6 +731,82 @@
calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
},
markPoint : {
symbol: 'pin', // 标注类型
symbolSize: 10, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolRotate : null,// 标注旋转控制
itemStyle: {
normal: {
color: null,
borderColor: null, // 标注边线颜色,优先于color
borderWidth: 2, // 标注边线线宽,单位px,默认为1
label: {
show: true,
// 标签文本格式器,同Tooltip.formatter,不支持回调
formatter : null,
position: 'inside', // 可选为'left'|'right'|'top'|'bottom'
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
},
emphasis: {
color: null,
label: {
show: true,
// 标签文本格式器,同Tooltip.formatter,不支持回调
formatter : null,
position: 'inside', // 'left'|'right'|'top'|'bottom'
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
}
}
},
markLine : {
// 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string
symbol: ['circle', 'arrow'],
// 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: [2, 4],
// 标线起始和结束的symbol旋转控制
symbolRotate : null,
itemStyle: {
normal: {
color: null, // 标线主色,线色,symbol主色
borderColor: null, // 标线symbol边框颜色,优先于color
borderWidth: 2, // 标线symbol边框线宽,单位px,默认为2
label: {
show: false,
// 标签文本格式器,同Tooltip.formatter,不支持回调
formatter : null,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'inside',
textStyle: { // 默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
lineStyle: {
color: null, // 主色,线色,优先级高于borderColor和color
width: null, // 优先于borderWidth
type: 'solid',
shadowColor : 'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
color: null,
label: {
show: false,
// 标签文本格式器,同Tooltip.formatter,不支持回调
formatter : null,
position: 'inside', // 'left'|'right'|'top'|'bottom'
textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle : {}
}
}
},
textStyle: {
decoration: 'none',
fontFamily: 'Arial, Verdana, sans-serif',
......@@ -721,39 +815,11 @@
fontWeight: 'normal'
},
// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
renderAsImage: false,
// 可计算特性配置,孤岛,提示颜色
calculable: false, // 默认开启可计算特性
calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色
calculableHolderColor: '#ccc', // 可计算占位提示颜色
nameConnector: ' & ',
valueConnector: ' : ',
animation: true,
animationDuration: 2000,
animationEasing: 'ExponentialOut',
// 图表类型
CHART_TYPE_LINE: 'line',
CHART_TYPE_BAR: 'bar',
CHART_TYPE_SCATTER: 'scatter',
CHART_TYPE_PIE: 'pie',
CHART_TYPE_RADAR: 'radar',
CHART_TYPE_MAP: 'map',
CHART_TYPE_K: 'k',
//CHART_TYPE_ISLAND: 'island',
CHART_TYPE_FORCE : 'force',
CHART_TYPE_CHORD : 'chord',
// 事件类型
EVENT: {
// -------全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
RESIZE: 'resize',
CLICK: 'click',
HOVER: 'hover',
MOUSEWHEEL: 'mousewheel',
......@@ -766,6 +832,7 @@
PIE_SELECTED: 'pieSelected',
MAGIC_TYPE_CHANGED: 'magicTypeChanged',
DATA_VIEW_CHANGED: 'dataViewChanged',
MAP_ROAM : 'mapRoam',
// -------内部通信
TOOLTIP_HOVER: 'tooltipHover'
}
......
......@@ -2211,6 +2211,19 @@ indicator : [
<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> data </td>
<td> {} </td>
<td> 通用 </td>
<td> 标线(详见<a href="#SeriesMarkLine" title="">series.markLine</a></td>
</tr>
</table>
<h5>series.data<a name="SeriesData"> </a></h5>
<P> 系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组<a href="#AxisData" title="">axis.data</a>的长度,并且他们间是一一对应的。数组项通常为数值,如:</P>
......
......@@ -470,6 +470,7 @@
</div>
<hr>
<h3>专题<a name="topic"></a></h3>
<p><small>专题页没做低版本IE兼容性处理,请用IE9+、chrome、safari、firefox或opear等现代浏览器。</small></p>
<ul>
<li><a href="example/topic/10-me-china/index.html" target="_blank">中国经济十年时空漫游(2002-2011)</a> by 于博(新华社) · 吴楚茵(南方都市报) · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>(百度)</li>
<li><a href="example/topic/24-population-china/index.html" target="_blank">中国人口流动大潮(1987-2011)</a> by 孟立昕(腾讯)· 王飞宇(证券时报) · 颜冬(视觉中国) · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>(百度)</li>
......
......@@ -100,20 +100,24 @@
<div class="container">
<div class="featurette">
<h2 class="featurette-heading">Architecture</h2>
<div class="span6 pull-right">
<div class="span7 pull-right" style="margin-top:0">
<img src="doc/asset/img/architecture.png" alt="ECharts Architecture"/>
</div>
<p class="lead">ECharts (Enterprise Charts 商业产品图表库)</p>
<p>提供商业产品常用图表库,底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图,同时支持任意维度的堆积和多图表混合展现。</p>
<div style="float:left;margin:10px 10px 30px 10px;"><img src="doc/asset/img/device.png" alt="Echarts device"/></div>
<p>提供商业产品常用图表,底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。</p>
<div style="float:left;margin:20px 10px 30px 10px;"><img src="doc/asset/img/device.png" alt="Echarts device"/></div>
<div>
<img src="doc/asset/img/explorer.png" alt="Echarts explorer"/>
<p>&nbsp;&nbsp;<i>(IE8- supported by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></p>
<div>
<small>&nbsp;&nbsp;支持IE6/7/8/9+,chrome、firefox、safari、opera <i>(IE8- power by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></small>
<p style="float:right;"><strong>———— 开源来自百度商业前端数据可视化团队</strong></p>
</div>
</div>
</div>
<h2 class="featurette-heading">特色</h2>
<p>我们诚挚邀请你翻阅这份在线文档 《 <a href="doc/slide/whyEcharts.html" target="_blank">Why ECharts ?</a> 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。<br/>
<small>*文档中展现的个别特性在IE8-中并没有得到支持,所以建议使用IE9+、chrome、safari、firefox或opear等高级浏览器阅读这份文档。</small>
<small>*文档中展现的个别特性在IE8-中并没有得到支持,所以建议使用IE9+、chrome、safari、firefox或opear等现代浏览器阅读这份文档。</small>
</p>
<hr class="featurette-divider">
<div class="featurette">
......@@ -234,9 +238,20 @@
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-right">
<img src="doc/asset/img/doc/multiControl.jpg" alt="Echarts 多级控制" style="height:145px"/>
<img src="doc/asset/img/example/line1.png" alt="Echarts 全系列图表支持标注、标线" style="height:150px"/>
</div>
<div class="pull-right">
<img src="doc/asset/img/example/map9.png" alt="Echarts 全系列图表支持标注、标线" style="height:150px"/>
</div>
<h2 class="featurette-heading">标注 &amp; 标线</h2>
<p>添加额为的标注内容是常用的功能,如地图上标注某些特定位置,折线图上标注极值点或者柱形图里标线出变化趋势,ECharts全系列图表支持标注标线功能,并且与生俱来的可以响应图例开关、值域漫游等组件的交互功能。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-left">
<img src="doc/asset/img/doc/multiControl.jpg" alt="Echarts 多级控制" style="height:145px"/>
</div>
<div class="pull-left">
<img src="doc/asset/img/custom.png" alt="Echarts 高度个性化"/>
</div>
<h2 class="featurette-heading">个性化定制</h2>
......@@ -245,7 +260,7 @@
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<div class="span6 pull-right">
<img src="doc/asset/img/example/mix3.png" alt="Echarts 事件交互"/>
</div>
<h2 class="featurette-heading">事件交互</h2>
......
......@@ -398,6 +398,7 @@ define(function() {
barCategoryGap : '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值
itemStyle: {
normal: {
// color: '各异',
borderColor: '#fff', // 柱条边线
borderRadius: 0, // 柱条边线圆角,单位px,默认为0
borderWidth: 1, // 柱条边线线宽,单位px,默认为1
......@@ -410,6 +411,7 @@ define(function() {
}
},
emphasis: {
// color: '各异',
borderColor: 'rgba(0,0,0,0)', // 柱条边线
borderRadius: 0, // 柱条边线圆角,单位px,默认为0
borderWidth: 1, // 柱条边线线宽,单位px,默认为1
......@@ -449,6 +451,7 @@ define(function() {
}
},
emphasis: {
// color: 各异,
label: {
show: false
// formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
......@@ -456,7 +459,6 @@ define(function() {
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
// color: 各异,
}
},
//smooth : false,
......@@ -484,6 +486,7 @@ define(function() {
},
emphasis: {
// color: 各异,
// color0: 各异
}
}
},
......@@ -494,7 +497,7 @@ define(function() {
yAxisIndex: 0,
//symbol: null, // 图形类型
symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 拐点图形旋转控制
//symbolRotate : null, // 图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
......@@ -517,6 +520,7 @@ define(function() {
}
},
emphasis: {
// color: '各异'
label: {
show: false,
// 标签文本格式器,同Tooltip.formatter,不支持回调
......@@ -551,14 +555,15 @@ define(function() {
}
},
emphasis: {
// color: 各异,
label: {
show: false
}
// color: 各异,
}
},
//symbol: null, // 拐点图形类型
symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小
//symbolRotate : null, // 图形旋转控制
},
// 饼图默认参数
......@@ -590,6 +595,7 @@ define(function() {
}
},
emphasis: {
// color: 各异,
label: {
show: false
// position: 'outer'
......@@ -781,6 +787,7 @@ define(function() {
}
},
emphasis: {
// color: 各异
label: {
show: true
// 标签文本格式器,同Tooltip.formatter,不支持回调
......@@ -825,6 +832,7 @@ define(function() {
}
},
emphasis: {
// color: 各异
label: {
show: false
// 标签文本格式器,同Tooltip.formatter,不支持回调
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册