在线演示http://demo.jb51.net/js/jquery_baobiao/index.html
打包下载 http://xiazai.jb51.net/201101/yuanma/jquery_baobiao.rar
复制代码 代码如下:
CSS样式
复制代码 代码如下:
body
{
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
}
a
{
text-decoration: none;
font-weight: bold;
color: #555;
}
a:hover
{
color: #000;
}
div.easyui-tabs
{
margin: auto;
text-align: left;
width: 720px;
}
div.clean
{
border: 1px solid #850000;
}
.clean td, .clean th
{
border: 2px solid #bbb;
background: #ddd;
padding: 5px 10px;
text-align: center;
border-radius: 2px;
}
.clean table
{
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
}
.clean caption
{
font-weight: bold;
}
.gvChart, .clean
{
border: 2px solid #850000;
border-radius: 5px;
-moz-border-radius: 10px;
width: 720px;
margin: auto;
margin-top: 20px;
}
pre
{
background: #eee;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
}
Html
复制代码 代码如下:
区域报表
| | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
LineChart
| | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
BarChart
| | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
ColumnChart
| | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
PieChart
| | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2010 | 125 | 185 | 327 | 359 | 376 | 398 | 0 | 0 | 0 | 0 | 0 | 0 |
加入样式和框架库
复制代码 代码如下:
以后我会和大家分享更多的好的东西，谢谢大家的支持。
文中代码打包下载
