Skip to content

Commit

Permalink
添加图表标题支持
Browse files Browse the repository at this point in the history
  • Loading branch information
@kener
kener committed Jul 25, 2013
1 parent dbbea14 commit bb30cb4
Show file tree
Hide file tree
Showing 22 changed files with 868 additions and 399 deletions.
Binary file added doc/asset/img/doc/title.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 28 additions & 1 deletion doc/asset/js/echartsConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,34 @@
//define(function() {
// 请原谅我这样写，这显然可以直接返回个对象，但那样的话outline就显示不出来了~~
var echartsConfig = {
// 图例
// 图表标题
title: {
text: '',
subtext: '',
x: 'left', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},

// 图例
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
Expand Down
80 changes: 80 additions & 0 deletions doc/doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
<li><a href="#选项">选项</a></li>
<ul>
<li><a href="#Option">option</a></li>
<li><a href="#Title">title</a></li>
<li><a href="#Legend">legend</a></li>
<li><a href="#DataRange">dataRange</a></li>
<li><a href="#Toolbox">toolbox</a></li>
Expand Down Expand Up @@ -434,6 +435,10 @@ <h4>option<a name="Option"> </a></h4>
<tr>
<td> {Array} color </td>
<td> 数值系列的颜色列表，默认为null则采用内置颜色，可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取 </td>
</tr>
<tr>
<td> {Object} title </td>
<td> 标题（详见<a href="#Title" title="">title</a>），每个图表最多仅有一个标题控件 </td>
</tr>
<tr>
<td> {Object} legend </td>
Expand Down Expand Up @@ -472,6 +477,81 @@ <h4>option<a name="Option"> </a></h4>
<td> 驱动图表生成的数据内容（详见<a href="#Series" title="">series</a>），数组中每一项代表一个系列的特殊选项及数据 </td>
</tr>
</table>

<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> {string} text </td>
<td> '' </td>
<td> 主标题文本 </td>
</tr>
<tr>
<td> {string} subtext </td>
<td> '' </td>
<td> 副标题文本 </td>
</tr>
<tr>
<td> {string | number} x </td>
<td> 'left' </td>
<td> 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） </td>
</tr>
<tr>
<td> {string | number} y </td>
<td> 'top' </td>
<td> 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） </td>
</tr>
<tr>
<td> {string} textAlign </td>
<td> null </td>
<td> 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center</td>
</tr>

<tr>
<td> {color} backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> 标题背景颜色，默认透明 </td>
</tr>
<tr>
<td> {string} borderColor </td>
<td> '#ccc' </td>
<td> 标题边框颜色 </td>
</tr>
<tr>
<td> {number} borderWidth </td>
<td> 0 </td>
<td> 标题边框线宽，单位px，默认为0（无边框） </td>
</tr>
<tr>
<td> {number | Array} padding </td>
<td> 5 </td>
<td> 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图 </td>
</tr>
<tr>
<td> {number} itemGap </td>
<td> 10 </td>
<td> 主副标题纵向间隔，单位px，默认为10</td>
</tr>

<tr>
<td> {Object} textStyle </td>
<td> {<br/>fontSize: 18, <br/>fontWeight: 'bolder', <br/>color: '#333'<br/>} </td>
<td> 主标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
</tr>
<tr>
<td> {Object} subtextStyle </td>
<td> {color: '#aaa'} </td>
<td> 副标题文本样式（详见<a href="#TextStyle" title="">textStyle</a>） </td>
</tr>

</table>
<p><img src="./asset/img/doc/title.png" title="" alt="标题"/></P>


<h4>legend<a name="Legend"> </a></h4>
<P> 图例，每个图表最多仅有一个图例。<a href="example/legend.html" target="_blank">try this »</a></P>
Expand Down
2 changes: 0 additions & 2 deletions doc/example/axis.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@
formatter: '{value}月',
textStyle: {
color: 'blue',
decoration: 'none',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'italic',
Expand Down Expand Up @@ -188,7 +187,6 @@
formatter: '{value} ml', // Template formatter!
textStyle: {
color: '#1e90ff',
decoration: 'none',
fontFamily: 'verdana',
fontSize: 10,
fontStyle: 'normal',
Expand Down
Loading

0 comments on commit bb30cb4

Please sign in to comment.