页面单独测试目录

e71b787d · jones · 2b23f741 · e71b787d · e71b787d · e71b787d
53 changed file
--- a/webhqchart.demo/demo/content/css/change-color.css
+++ b/webhqchart.demo/demo/content/css/change-color.css
+/*tooltip的外层样式*/
+.jschart-tooltip{
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    padding:7px 20px 15px 13px;
+    box-sizing: border-box;
+    position:relative;
+    display: none;
+    z-index: 9;
+}
+
+/*tooltip的内层样式*/
+.tooltip-title{
+    color:#2b3645;
+    font-family: 微软雅黑;
+    font-size:12px;
+    text-align:center;
+    display: block;
+    line-height: 24px;
+}
+.tooltip-con{
+    color:#2b3645;
+    font-family: 微软雅黑;
+    font-size:12px;
+    line-height: 24px;
+}
+.tooltip-num{
+    font-family: 微软雅黑;
+    font-size:12px;
+    line-height: 24px;
+    text-align: right;
+    display:inline-block;
+    width:90px;
+}
+
+
+/*区间选择*/
+.jschart-selectrect{
+    border: dashed 1px #0f248de0;
+    display: none;
+}
+
+/*提示详情*/
+.jchart-klineinfo-tooltip{
+    position: absolute;
+    z-index: 10;
+    max-height: 270px;
+    line-height: 28px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    padding: 15px;
+    background: rgba(255,255,255,0.92);
+    box-sizing: border-box;
+    display: none;
+}
+.total-list{
+    color: #f39800;
+}
+.jchart-klineinfo-tooltip span{
+    display: inline-block;
+    width:100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.title-length{
+    max-height: 220px;
+    overflow: hidden;
+}
+.close-munite{
+    cursor: pointer;
+}
--- a/webhqchart.demo/demo/content/css/panel-set.css
+++ b/webhqchart.demo/demo/content/css/panel-set.css
+html,body{
+    height:100%;
+}
+
+/*参数设置面板*/
+.jchart-changeindex-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.01);
+}
+
+.jchart-modifyindex-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.01);
+}
+
+.jchart-kline-minute-box{
+    position: absolute;
+    display: none;
+    width:500px;
+    height:550px!important;
+    padding: 0 5px 20px 10px;
+    background-color: rgba(255,255,255,0.95);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    z-index: 999;
+}
+
+.parameter{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    padding: 3px;
+    box-sizing: border-box;
+    width: 520px;
+    height: 421px;
+    background-color: rgba(255, 255, 255, 0.96);
+    box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
+    border-radius: 2px;
+    z-index: 999;
+}
+.parameter-header{
+    position: relative;
+    width:100%;
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #c8d2db;
+}
+.parameter-header span{
+    font-family: 微软雅黑;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.parameter-header strong{
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+}
+.parameter-content{
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.row-line{
+    margin-right: 20px;
+    margin-top: 10px;
+    padding-left: 3px;
+    box-sizing: border-box;
+    width:100px;
+    height:24px;
+    line-height: 24px;
+    border:1px solid #cccccc;
+}
+#close{
+    cursor: pointer;
+}
+.parameter1{
+    cursor:pointer;
+}
+
+.parameter-footer{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.parameter-footer button{
+    margin-left: 15px;
+    width: 78px;
+    height: 28px;
+    border: none;
+    border-radius: 2px;
+    color: #ffffff;
+}
+.submit{
+    background-color: #0182d4;
+}
+.cancel{
+    background-color: #c8d2db;
+}
+
+/*指数设置面板*/
+.target-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    background-color: rgba(0,0,0,0.01);
+    z-index: 999;
+}
+.target-panel{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 800px;
+    height: 500px;
+    background-color: rgba(255, 255, 255, 0.96);
+    box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
+    border-radius: 3px;
+}
+.target-header{
+    position: relative;
+    width:100%;
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #c8d2db;
+}
+.target-header span{
+    font-family: 微软雅黑;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.target-header strong{
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+}
+#close-tar{
+    cursor:pointer;
+}
+.target-content{
+    height:100%;
+}
+.target-left{
+    float: left;
+    width:200px;
+    height:calc(100% - 43px);
+    border-right: 1px solid #c8d2db;
+}
+
+.target-left input{
+    margin-left: 10px;
+    height: 40px;
+    line-height: 40px;
+    border: none;
+    font-size: 14px;
+}
+.target-left ul{
+    border-top:1px solid #c8d2db;
+    list-style: none;
+    padding:10px;
+    box-sizing: border-box;
+}
+.target-left ul li{
+    font-size: 13px;
+    line-height: 30px;
+    color: #757d81;
+    cursor: pointer;
+}
+.active-list{
+    color: #1295d9!important;
+}
+
+.target-right{
+    float: left;
+    width: 595px;
+}
+.target-right ul{
+    width: 590px;
+    max-height: 100%;
+    overflow: auto;
+    padding-top: 10px;
+    padding-left: 20px;
+    box-sizing: border-box;
+}
+.target-right ul li{
+    display: inline-block;
+    margin-top: 5px;
+    margin-left: 10px;
+    list-style: none;
+    width: 175px;
+    line-height: 30px;
+    text-align: left;
+    float: left;
+    cursor: pointer;
+}
+
+/*分钟走势图*/
+.minute-dialog-title{
+    position: relative;
+    margin-bottom: 10px;
+    height: 36px;
+    line-height: 36px;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+}
+.minute-dialog-title span{
+    margin-left: 5px;
+}
+.minute-dialog-title strong{
+    position: absolute;
+    right: 5px;
+    top: 0;
+    font-weight: 300;
+    font-size: 12px;
+}
+.minute-dialog-title strong:hover,.parameter-header strong:hover{
+    color: #0182d4;
+}
\ No newline at end of file
--- a/webhqchart.demo/demo/content/css/phone12.tools.css
+++ b/webhqchart.demo/demo/content/css/phone12.tools.css
+.tools {
+    width:100%;
+}
+.tools .top {
+    margin-bottom:2px;
+}
+.tools .top .toolsButton {
+    height:32px;
+    padding:0 8px;
+    cursor:pointer;
+}
+.tools .top .toolsButton[disabled] {
+    cursor:not-allowed;
+}
+
+.tools .top span {
+    padding-left:2px;
+}
+.tools .top .input {
+    height:32px;
+    padding-left:5px;
+}
+.tools .top .changeIndex {
+    height:32px;
+    width:70px;
+}
+
+.tools .toolsTable {
+    width:19.5%;
+    float:left;
+}
+
+.tools .toolsTable table {
+    width:100%;
+    border-left: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    margin-left:1px;
+    height:257px;
+}
+
+.tools .toolsTable table tbody td,.tools .toolsTable table thead th {
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    height:32px;
+    padding:5px;
+    width:95px;
+}
+.tools .toolsTable table td input{
+    width:50px;
+}
+
+.tools .code {
+    float:left;
+    width:60.5%;
+}
+
+.tools .cache {
+    float:left;
+    width:19.8%;
+    border:1px solid #ccc;
+    height:257px;
+    margin-left:-3px;
+    overflow-y:auto;
+}
+.tools .cache li {
+    padding:5px;
+    height:32px;
+}
+.tools .cache li.active,.tools .cache li:hover{
+    background-color:#26B99A;
+    color:#fff;
+    cursor:pointer;
+}
+.tools .cache li span{
+    float:right;
+    margin-right:5px;
+}
+
+.fa-hover:hover {
+    background-color: #ccc;
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
+.fa-hover div.active {
+    background-color: #26B99A;
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.policySuccess .content{
+    overflow-y:auto;
+}
+
+.policySuccess .table tr:hover td, .policySuccess .table tr.active td{
+    background-color: #26B99A !important;
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
\ No newline at end of file
--- a/webhqchart.demo/demo/content/css/phone7.tools.css
+++ b/webhqchart.demo/demo/content/css/phone7.tools.css
+.tools {
+    width:100%;
+}
+.tools .top {
+    margin-bottom:2px;
+}
+.tools .top .toolsButton {
+    height:32px;
+    padding:0 8px;
+    cursor:pointer;
+}
+.tools .top span {
+    padding-left:2px;
+}
+.tools .top .input {
+    height:28px;
+    padding-left:5px;
+}
+.tools .top .changeIndex {
+    height:32px;
+    width:70px;
+}
+
+.tools .table {
+    width:19.5%;
+    float:left;
+}
+
+.tools .table table {
+    width:100%;
+    border-left: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    margin-left:1px;
+}
+
+.tools .table table tbody td,.tools .table table thead th {
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    height:32px;
+    padding:5px;
+    width:95px;
+}
+.tools .table table td input{
+    width:50px;
+}
+
+.tools .code {
+    float:left;
+    width:60.5%;
+}
+
+.tools .cache {
+    float:left;
+    width:19.8%;
+    border:1px solid #ccc;
+    height:257px;
+    margin-left:-1px;
+    overflow-y:auto;
+}
+.tools .cache li {
+    padding:5px;
+    height:18px;
+}
+.tools .cache li.active,.tools .cache li:hover{
+    background-color:#26B99A;
+    color:#fff;
+    cursor:pointer;
+}
+.tools .cache li span{
+    float:right;
+    margin-right:5px;
+}
\ No newline at end of file
--- a/webhqchart.demo/demo/content/css/tools.css
+++ b/webhqchart.demo/demo/content/css/tools.css
+html,body{
+    height:100%;
+}
+body {
+    margin:0px;
+    font-size:13px;
+}
+ul li,ol li{
+    list-style:none;
+}
+* {
+	padding: 0;
+	margin: 0;
+}
+a{
+	transition-duration:0.4s, 0.5s;
+	transition-property:background-color, color;
+	transition-timing-function:ease, ease;
+}
+i{
+    font-style: normal;
+}
+
+input,canvas{outline:0px;}
+
+.redColor{
+    color:#ee1515;
+}
+.greenColor{
+    color:#199e00;
+}
+
+
+::-webkit-scrollbar {
+    width:8px;
+    height: 8px;
+}
+::-webkit-scrollbar-button    {
+    display:none;
+}
+::-webkit-scrollbar-track     {
+    background:#F1F1F1;
+    border-radius:4px;
+}
+
+::-webkit-scrollbar-thumb{
+    background:#C1C1C1;
+    border-radius:4px;
+}
+
+/*右键菜单*/
+.context-menu-wrapper {
+    position: absolute;
+    z-index: 500;
+    overflow: auto;
+    border: 1px solid;
+    border-color: #b5b7b9;
+    background-color: #fff;
+    white-space: nowrap;
+}
+
+html.theme-dark .context-menu-wrapper {
+    background-color: #1c2030;
+    border-color: #363c4e;
+}
+
+.context-menu-wrapper .backlight {
+    background-color: #f2f3f5;
+}
+
+html.theme-dark .context-menu-wrapper .backlight {
+    background-color: #2f3241;
+}
+
+tr.context-menu.disabled {
+    color: #9d9d9d;
+}
+
+tr.context-menu.spinner > td {
+    background: url("/static/images/loading-small.0c15c93a2cb0.gif") 50% no-repeat;
+    cursor: default;
+}
+
+.submenu.center {
+    background-color: #fff;
+}
+
+.context-menu {
+    font-family: Tahoma,Arial,sans-serif;
+    font-size: 11px;
+    white-space: nowrap;
+}
+
+tr.context-menu {
+    cursor: pointer;
+    height: 29px;
+}
+
+tr.context-menu:hover {
+    background: #f2f3f5;
+}
+
+html.theme-dark tr.context-menu-hover {
+    background: #2f3241;
+}
+
+td.context-menu {
+    opacity: 1;
+    cursor: pointer;
+    padding-left: 4px;
+}
+
+.context-menu-item-separated {
+    border-bottom: 1px solid #cecece;
+}
+
+.context-menu .text {
+    min-width: 100px;
+}
+
+.context-menu .spacer {
+    width: 18px;
+}
+
+.context-menu .icon {
+    height: 27px;
+    width: 18px;
+}
+
+.context-menu .shortcut {
+    text-align: right;
+    color: #aaa;
+    padding: 0 2px 0 10px;
+}
+
+.submenu-arrow {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVR4AWOgExgFo6Cvr+8/1Q0EYaoaCMNUNBCBB68LqRvLIxiMAgAKDyqRblYs2AAAAABJRU5ErkJggg==);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    width: 20px;
+}
+
+.border td {
+    border-bottom:1px solid #b5b7b9;
+}
+/*右键菜单结束*/
+
+/*工具条*/
+.tools {
+    margin-bottom: 8px;
+    height: 38px;
+    color:#4c525e;
+    float:left;
+}
+
+.tools .txt {
+    height: 28px;
+    width: 80px;
+    border: none;
+    margin-top: 3px;
+    padding-left:5px;
+}
+
+.tools .item {
+    float: left;
+    margin-right: 1px;
+    padding: 0 5px;
+    cursor: pointer;
+    border: 1px solid #ECEFF2;
+    height: 36px;
+    line-height: 36px;
+}
+
+.button {
+	-moz-box-shadow:inset 0px 0px 0px 0px #edf0f2;
+	-webkit-box-shadow:inset 0px 0px 0px 0px #edf0f2;
+	box-shadow:inset 0px 0px 0px 0px #edf0f2;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fcfffa), color-stop(1, #ffffff));
+	background:-moz-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
+	background:-webkit-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
+	background:-o-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
+	background:-ms-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
+	background:linear-gradient(to bottom, #fcfffa 5%, #ffffff 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfffa', endColorstr='#ffffff',GradientType=0);
+	background-color:#fcfffa;
+	border:1px solid #eceff2;
+	display:inline-block;
+	cursor:pointer;
+	font-family:Arial;
+	font-size:13px;
+	text-decoration:none;
+}
+.button:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2f3f5), color-stop(1, #f2f3f5));
+	background:-moz-linear-gradient(top, #f2f3f5 5%,#f2f3f5 100%);
+	background:-webkit-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
+	background:-o-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
+	background:-ms-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
+	background:linear-gradient(to bottom, #f2f3f5 5%, #f2f3f5 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f3f5', endColorstr='#f2f3f5',GradientType=0);
+	background-color:#f2f3f5;
+}
+.button:active {
+	position:relative;
+	top:1px;
+}
+/*工具条结束*/
+
+/*工具条下拉菜单*/
+.dropdownList{
+    width:200px;
+    border:1px solid #ECEFF2;
+    position: absolute;
+    z-index: 500;
+    overflow: auto;
+    padding:5px 0;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
+    border-radius:3px;
+    display:none;
+    color:#4c525e;
+}
+
+.dropdownList .item{
+    padding:2px 8px;
+    height:28px;
+    line-height:28px;
+}
+
+.dropdownList .item:hover {
+    background-color:#EBF7FC;
+    cursor:pointer;
+}
+/*工具条下拉菜单结束*/
+
+/*拖拽切换*/
+.selected {
+	height: 38px;
+    overflow: hidden;
+    text-align: center;
+    float:left;
+}
+
+.selected ul li {
+	float: left;
+	margin: 0 5px;
+	list-style-type: none;
+}
+
+.selected ul a {
+	display: block;
+	background: #EBF7FC; 
+	height: 38px;
+	text-decoration: none;
+	color:#4c525e;
+	-webkit-transition: margin .4s ease-in-out;
+	-moz-transition: margin .4s ease-in-out;
+	-o-transition: margin .4s ease-in-out;
+	-ms-transition: margin .4s ease-in-out;
+	transition: margin .4s ease-in-out;
+    padding:0px 8px;
+    line-height:38px;
+}
+
+.selected ul a:nth-of-type(even) {
+	background: #fff2f4;
+	color: #4c525e;
+}
+/*拖拽切换结束*/
+
+/*画图工具*/
+.drawing {
+    height: 36px;
+    float:left;
+    border:1px solid #ECEFF2;   
+}
+
+.drawing .lable {
+    background:#ECEFF2;
+    height: 36px;
+    line-height:36px;
+    float:left;
+    margin-right:1px;
+    padding:0px 5px;
+}
+.drawing .item{
+    float:left;
+    margin: 1px 1px 1px 0px;
+    padding: 0 5px;
+    cursor: pointer;
+    border: 1px solid #ECEFF2;
+    height: 32px;
+    line-height: 32px;
+}
+
+.drawing .item.active{
+    background:#1592e6;
+    color:#fff;
+    border-color:#1592e6;
+}
+/*画图工具结束*/
+
+/*区间统计*/
+.interval {
+    position: absolute;
+    z-index: 520;
+    width:551px;
+    height:214px;
+    border: 1px solid #ECEFF2;
+    border-radius: 2px;
+    background:#fff;
+    display:none;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
+    font-family: 微软雅黑;
+}
+.interval .top {
+    padding-left: 10px;
+    box-sizing: border-box;
+    height:40px;
+    line-height:40px;
+    text-align:left;
+    border-bottom: solid 1px #e1ecf2;
+    font-size: 14px;
+    color: #757d81;
+}
+.interval .top .closeBtn {
+    float:right;
+    margin-right:15px;
+    cursor:pointer;
+    font-weight: 600;
+}
+.interval table{
+    width:100%;
+    height:170px;
+}
+
+.changColorR{
+    border-right-color: #1295d9 !important;
+}
+.changColorL{
+    border-left-color: #1295d9 !important;
+}
+.interval table .dateChange1 {
+    /*padding :0px 3px;*/
+    display: inline-block;
+    cursor:pointer;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right: 6px solid #c8d2db;
+}
+.interval table .dateChange2 {
+    /*padding :0px 3px;*/
+    display: inline-block;
+    cursor:pointer;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-left: 6px solid #c8d2db;
+}
+.interval table tr td:nth-child(2),.interval table tr td:nth-child(4),.interval table tr td:nth-child(6){
+    font-weight: bold;
+}
+.interval table td{
+    padding-left:10px;
+    border-bottom:1px solid #ECEFF2;
+}
+.interval table td.name {
+    text-align:right;
+}
+.interval table td:last-child {
+    padding-right:10px;
+}
+/*区间统计结束*/
+
+/*形态匹配*/
+.kLineMatch {
+    position: absolute;
+    z-index: 520;
+    width:300px;
+    height:600px;
+    border: 1px solid #ECEFF2;
+    background:#fff;
+    display:none;
+}
+.kLineMatch .top {
+    height:30px;
+    line-height:30px;
+    background:#ccc;
+    text-align:center;
+}
+.kLineMatch .top .closeBtn {
+    float:right;
+    margin-right:20px;
+    cursor:pointer;
+}
+.kLineMatch .title{
+   padding:5px;
+}
+.kLineMatch .title .name {
+    float:left;
+    width:70px;
+    border-right:1px solid #ccc;
+}
+.kLineMatch .title .time {
+    float:left;
+    width:140px;
+    padding-left:5px;
+    border-right:1px solid #ccc;
+}
+.kLineMatch .title .similar{
+    float:left;
+    padding-left:5px;
+}
+.kLineMatch .list{
+    overflow-y:auto;
+    height:544px;
+    width:290px;
+    padding:5px 5px 0px 5px;
+}
+
+.kLineMatch .list .item .name {
+    width:70px;
+    float:left;
+    padding-bottom:5px;
+}
+.kLineMatch .list .item .time{
+    padding:0px 0px 5px 5px;
+    float:left;
+    width:140px;
+}
+.kLineMatch .list .item .similar{
+    float:left;
+    padding-left:7px;
+    padding-bottom:5px;
+}
+/*形态匹配结束*/
+
+/*加载层*/
+.spinnerBg{
+    background:#ccc;
+    width:100%;
+    height:100%;
+    position:absolute;
+    opacity:0.5;
+    display:none;
+}
+.spinner {
+  width: 50px;
+  height: 60px;
+  font-size: 10px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  display:none;
+}
+ 
+.spinner > div {
+  background-color: #39adce;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+   
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+ 
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+ 
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+ 
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+ 
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+ 
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
+  20% { -webkit-transform: scaleY(1.0) }
+}
+ 
+@keyframes stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+/*加载层结束*/
+
+.kline-info{
+    position: absolute; 
+    /*opacity: 0.8;*/
+    width: 16px;
+    height: 16px;
+    background-color: #fff;
+    /*border: 2px solid #ff3232;*/
+    color: #ff3232;
+    text-align: center;
+    cursor: pointer;
+    font: bold 12px/1.4 arial;
+}
+
+.klineframe-toolbar {
+    position: absolute; 
+    text-align:right;
+    line-height: 24px;
+    padding-right: 5px;
+    box-sizing: border-box;
+}
+
+.klineframe-toolbar span:hover{
+    color: #0182d4;
+}
+.icon-active{
+    color: #0182d4;
+}
+
+.increase{
+    margin-left: 3px;
+    margin-right: 10px;
+}
+.rate-discount{
+    font-weight: normal;
+    margin-left: 90px;
+}
+.tipBoxTitle{
+    display: inline-block;
+    width: 130px;
+}
+.date-tipbox{
+    margin-right: 10px;
+}
+
+/*参数设置面板*/
+.jchart-changeindex-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.01);
+}
+
+.jchart-modifyindex-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.01);
+}
+
+.jchart-kline-minute-box{
+    position: absolute;
+    display: none;
+    width:500px;
+    height:550px!important;
+    padding: 0 5px 20px 10px;
+    background-color: rgba(255,255,255,0.95);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    z-index: 999;
+}
+
+.parameter{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    padding: 3px;
+    box-sizing: border-box;
+    width: 520px;
+    height: 421px;
+    background-color: rgba(255, 255, 255, 0.96);
+    box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
+    border-radius: 2px;
+    z-index: 999;
+}
+.parameter-header{
+    position: relative;
+    width:100%;
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #c8d2db;
+}
+.parameter-header span{
+    font-family: 微软雅黑;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.parameter-header strong{
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+}
+.parameter-content{
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.row-line{
+    margin-right: 20px;
+    margin-top: 10px;
+    padding-left: 3px;
+    box-sizing: border-box;
+    width:100px;
+    height:24px;
+    line-height: 24px;
+    border:1px solid #cccccc;
+}
+#close{
+    cursor: pointer;
+}
+.parameter1{
+    cursor:pointer;
+}
+
+.parameter-footer{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.parameter-footer button{
+    margin-left: 15px;
+    width: 78px;
+    height: 28px;
+    border: none;
+    border-radius: 2px;
+    color: #ffffff;
+}
+.submit{
+    background-color: #0182d4;
+}
+.cancel{
+    background-color: #c8d2db;
+}
+
+/*指数设置面板*/
+.target-box{
+    position: absolute;
+    display: none;
+    width:100%;
+    height:100%;
+    background-color: rgba(0,0,0,0.01);
+    z-index: 999;
+}
+.target-panel{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 800px;
+    height: 500px;
+    background-color: rgba(255, 255, 255, 0.96);
+    box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
+    border-radius: 3px;
+}
+.target-header{
+    position: relative;
+    width:100%;
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #c8d2db;
+}
+.target-header span{
+    font-family: 微软雅黑;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.target-header strong{
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+}
+#close-tar{
+    cursor:pointer;
+}
+.target-content{
+    height:100%;
+}
+.target-left{
+    float: left;
+    width:200px;
+    height:calc(100% - 43px);
+    border-right: 1px solid #c8d2db;
+}
+
+.target-left input{
+    margin-left: 10px;
+    height: 40px;
+    line-height: 40px;
+    border: none;
+    font-size: 14px;
+}
+.target-left ul{
+    border-top:1px solid #c8d2db;
+    list-style: none;
+    padding:10px;
+    box-sizing: border-box;
+}
+.target-left ul li{
+    font-size: 13px;
+    line-height: 30px;
+    color: #757d81;
+    cursor: pointer;
+}
+.active-list{
+    color: #1295d9!important;
+}
+
+.target-right{
+    float: left;
+    width: 595px;
+}
+.target-right ul{
+    width: 590px;
+    max-height: 100%;
+    overflow: auto;
+    padding-top: 10px;
+    padding-left: 20px;
+    box-sizing: border-box;
+}
+.target-right ul li{
+    display: inline-block;
+    margin-top: 5px;
+    margin-left: 10px;
+    list-style: none;
+    width: 175px;
+    line-height: 30px;
+    text-align: left;
+    float: left;
+    cursor: pointer;
+}
+
+/*分钟走势图*/
+.minute-dialog-title{
+    position: relative;
+    margin-bottom: 10px;
+    height: 36px;
+    line-height: 36px;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+}
+.minute-dialog-title span{
+    margin-left: 5px;
+}
+.minute-dialog-title strong{
+    position: absolute;
+    right: 5px;
+    top: 0;
+    font-weight: 300;
+    font-size: 12px;
+}
+.minute-dialog-title strong:hover,.parameter-header strong:hover{
+    color: #0182d4;
+}
+
+/*tooltip的外层样式*/
+.jschart-tooltip{
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    padding:7px 20px 15px 13px;
+    box-sizing: border-box;
+    position:relative;
+    display: none;
+    z-index: 9;
+}
+
+/*tooltip的内层样式*/
+.tooltip-title{
+    color:#2b3645;
+    font-family: 微软雅黑;
+    font-size:12px;
+    text-align:center;
+    display: block;
+    line-height: 24px;
+}
+.tooltip-con{
+    color:#2b3645;
+    font-family: 微软雅黑;
+    font-size:12px;
+    line-height: 24px;
+}
+.tooltip-num{
+    font-family: 微软雅黑;
+    font-size:12px;
+    line-height: 24px;
+    text-align: right;
+    display:inline-block;
+    width:90px;
+}
+
+
+/*区间选择*/
+.jschart-selectrect{
+    border: dashed 1px #0f248de0;
+    display: none;
+}
+
+/*提示详情*/
+.jchart-klineinfo-tooltip{
+    position: absolute;
+    z-index: 10;
+    max-height: 270px;
+    line-height: 28px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
+    border: solid 1px rgba(200, 210, 219, 0.92);
+    padding: 15px;
+    background: rgba(255,255,255,0.92);
+    box-sizing: border-box;
+    display: none;
+}
+.total-list{
+    color: #f39800;
+}
+.jchart-klineinfo-tooltip span{
+    display: inline-block;
+    width:100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+}
+
+.title-length{
+    max-height: 220px;
+    overflow: hidden;
+}
+.close-munite{
+    cursor: pointer;
+}
+
+
+/*龙虎榜*/
+.trade-detall{
+    margin-left: 80px;
+}
+.reason-list{
+    display: inline-block;
+    width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: bottom;
+}
+
+.trade-time{
+    vertical-align: top;
+}
+
+/*业绩预告*/
+.prorecast-week{
+    margin-left: 70px;
+}
+
--- a/webhqchart.demo/demo/content/font/demo.css
+++ b/webhqchart.demo/demo/content/font/demo.css
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+
--- a/webhqchart.demo/demo/content/font/demo_fontclass.html
+++ b/webhqchart.demo/demo/content/font/demo_fontclass.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-zhouqi"></i>
+                    <div class="name">时间</div>
+                    <div class="fontclass">.icon-zhouqi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-guanbi"></i>
+                    <div class="name">关闭</div>
+                    <div class="fontclass">.icon-guanbi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-canshushezhi"></i>
+                    <div class="name">参数设置</div>
+                    <div class="fontclass">.icon-canshushezhi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yidong"></i>
+                    <div class="name">移动</div>
+                    <div class="fontclass">.icon-yidong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shezhi-tianchong"></i>
+                    <div class="name">设置</div>
+                    <div class="fontclass">.icon-shezhi-tianchong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-sousuo"></i>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">.icon-sousuo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xingufahang"></i>
+                    <div class="name">xingufahang</div>
+                    <div class="fontclass">.icon-xingufahang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-susong"></i>
+                    <div class="name">susong</div>
+                    <div class="fontclass">.icon-susong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xianduan"></i>
+                    <div class="name">线段</div>
+                    <div class="fontclass">.icon-xianduan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shexian"></i>
+                    <div class="name">射线</div>
+                    <div class="fontclass">.icon-shexian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-juxing"></i>
+                    <div class="name">矩形</div>
+                    <div class="fontclass">.icon-juxing</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yuanhuxian"></i>
+                    <div class="name">圆弧线</div>
+                    <div class="fontclass">.icon-yuanhuxian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shujutuozhuai"></i>
+                    <div class="name">数据拖拽</div>
+                    <div class="fontclass">.icon-shujutuozhuai</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>
--- a/webhqchart.demo/demo/content/font/demo_symbol.html
+++ b/webhqchart.demo/demo/content/font/demo_symbol.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhouqi"></use>
+                    </svg>
+                    <div class="name">时间</div>
+                    <div class="fontclass">#icon-zhouqi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-guanbi"></use>
+                    </svg>
+                    <div class="name">关闭</div>
+                    <div class="fontclass">#icon-guanbi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-canshushezhi"></use>
+                    </svg>
+                    <div class="name">参数设置</div>
+                    <div class="fontclass">#icon-canshushezhi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yidong"></use>
+                    </svg>
+                    <div class="name">移动</div>
+                    <div class="fontclass">#icon-yidong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shezhi-tianchong"></use>
+                    </svg>
+                    <div class="name">设置</div>
+                    <div class="fontclass">#icon-shezhi-tianchong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-sousuo"></use>
+                    </svg>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">#icon-sousuo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xingufahang"></use>
+                    </svg>
+                    <div class="name">xingufahang</div>
+                    <div class="fontclass">#icon-xingufahang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-susong"></use>
+                    </svg>
+                    <div class="name">susong</div>
+                    <div class="fontclass">#icon-susong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xianduan"></use>
+                    </svg>
+                    <div class="name">线段</div>
+                    <div class="fontclass">#icon-xianduan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shexian"></use>
+                    </svg>
+                    <div class="name">射线</div>
+                    <div class="fontclass">#icon-shexian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-juxing"></use>
+                    </svg>
+                    <div class="name">矩形</div>
+                    <div class="fontclass">#icon-juxing</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yuanhuxian"></use>
+                    </svg>
+                    <div class="name">圆弧线</div>
+                    <div class="fontclass">#icon-yuanhuxian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shujutuozhuai"></use>
+                    </svg>
+                    <div class="name">数据拖拽</div>
+                    <div class="fontclass">#icon-shujutuozhuai</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>
--- a/webhqchart.demo/demo/content/font/demo_unicode.html
+++ b/webhqchart.demo/demo/content/font/demo_unicode.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe71e;</i>
+                    <div class="name">时间</div>
+                    <div class="code">&amp;#xe71e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe647;</i>
+                    <div class="name">关闭</div>
+                    <div class="code">&amp;#xe647;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60a;</i>
+                    <div class="name">参数设置</div>
+                    <div class="code">&amp;#xe60a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe648;</i>
+                    <div class="name">移动</div>
+                    <div class="code">&amp;#xe648;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe638;</i>
+                    <div class="name">设置</div>
+                    <div class="code">&amp;#xe638;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe78d;</i>
+                    <div class="name">搜索</div>
+                    <div class="code">&amp;#xe78d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe603;</i>
+                    <div class="name">xingufahang</div>
+                    <div class="code">&amp;#xe603;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">susong</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61b;</i>
+                    <div class="name">线段</div>
+                    <div class="code">&amp;#xe61b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61c;</i>
+                    <div class="name">射线</div>
+                    <div class="code">&amp;#xe61c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">矩形</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61e;</i>
+                    <div class="name">圆弧线</div>
+                    <div class="code">&amp;#xe61e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61f;</i>
+                    <div class="name">数据拖拽</div>
+                    <div class="code">&amp;#xe61f;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>
--- a/webhqchart.demo/demo/content/font/iconfont.css
+++ b/webhqchart.demo/demo/content/font/iconfont.css
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1523952947044'); /* IE9*/
+  src: url('iconfont.eot?t=1523952947044#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAycAAsAAAAAEvAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kl9Y21hcAAAAYAAAADEAAACZpsGO5VnbHlmAAACRAAAB+EAAAsk5UqY9mhlYWQAAAooAAAALwAAADYRFuB6aGhlYQAAClgAAAAcAAAAJAfeA5BobXR4AAAKdAAAABQAAAA8O+kAAGxvY2EAAAqIAAAAIAAAACAS7hZWbWF4cAAACqgAAAAfAAAAIAEfALluYW1lAAAKyAAAAUUAAAJtPlT+fXBvc3QAAAwQAAAAiQAAAMPEKbHseJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sc4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzvZW7438AQw9zA0AAUZgTJAQAv2Q0AeJzFksENgkAURGcFRRGNJN5AaMAC6ABK4mAL9uHJsxXNloGzfDDReNb/80h2NvlD/iyAJYBInEUMuDscQt2kulGPkI56jIvORxykxOgZMWXOmg07X/nrMOh2Vgup7Uv9LKcpc5fqSh3UteZu5LZFhh32WMlpiQUSXa6+zPlRuf9Zv1c2fh/TaS/6Cf0iI0NbBFMjJMrc0GbBwgiJsjS0bfBkBAdWhhIAayN4sTGUCtga4eWwM8JL8pWhzOCvBpInG7g4WnichVZrjBTHEe7qnvfszOzs7G7f7d7OvriZO+5YzD5PHHcnY3wPcxY+IQecFyEKiSXLCTIRkIigiwUEk/ghYjlx/AA5D/IwiZDyI7IIuQTLvyMiEpvIEgnhR0BRHvhHftwNqZ5lD+w/Wc3WVHV9XVNd1VXdRCbk9l/YedZHPDJENpAt5BFCQBmBik0LUA6bNToCmbKc4WmbhdWwrFYrNTYBvKKks/V2M+CKqjhggw+Ncr0d1mgIreYkHYd6tgDQn89tTw0OpNgLYPSF/tHoIfoGZIrVAWdyXTQ3OpWulzztQCKV6k+lvqUpsqxRKjk2PMmzuqwbSvQD2cllzheHaRES/WFu/jGrlE/tPt78YmGQ6wCLi+DlS/aZKTfn4nMol/VS/WrS0vpyVnVNGg78zezzEoXgGsEfw7X+lv2GTRGTcLIW12mD6gOfhE4NWA1CZFC0wQtbNagoqotStgjZSQgoubAsy8sXuvT1S5J06fWYOt/D9WQAUjqTv2/lHINNrcIuLC9f6uGQAnvsVjKTSUbLZlKW2GdVdWBA+AXo16/ZRfYAqRKiwySsh0BRdaiBA0oWl2kDOtHu6BjkKWgHIf06jLiydb89nIouR5dTw/b9luzCSHT5ziiMwEhvdHGVjS7/n2noi4K+vMw+YF/ACK0jD5KPk6fIcXTRbQYVJePakM5yV2S+5U5CM1Bt9DKsYcrb6Fk92/Ahk1bkGK120Rkf6u0JWEVXu4GexMVwH9IKxLEuwF3TnY+ajsGNODW05PpuWK+Hd166nbJ1x3WdpNplogNuwYVww4YQkBnasGFIdj3LsF0A15ZTniVA9HpP2QP3NM5dNNyC7WIkOmtM7JwworNCgO1CeFWmIINcdLy8rEuKUfCc4igtCcDK1Rh9TPDHeljFyNvpnBzP0vOFPG3f1RsrVwVPS3cN63lheHVeb48ssSW2iHkhEGbKbiNUG265pfJW2a3yTtUtZ9jS0m2yePr04m2ytAQxBwRi+hFNXAtvsn+wj5HPY4YPo80abppuanCHVcOqyCDWR5yDilpVq7bIF6YAOwBWvJIuYlLGoTuE27TBG9lOvdOtoWyj3ml0GpNisjDZqIv90QlC+Z4yY/eW31XGXak9B6CDbiTpIWrkuZ7Y6PsbE1ouZ9JFapsaKulsmzpcFr8PzzhIDTuXtjb5xfGE69sGmkj2ZkjxDKBylJvdTenu2S5tbwWYGxN0K1zN5JD3CuANJbZIhm4NUzrsmIY0Leqp4CEql6n4m/3KKjBIbJHBs0cpXed40nRiyOvi+njFrxT9G6vfmd2NsZ0bG5uDmIp8Uoz/efY2m8B8YtUP8mwaY1pZj2VQvSdEchycMA4Uu++Erq8z+o1jrUPT527I8o1z525KdG30zEvvSNI7L8X0pycQsE7XvxEOSzfPdVFbvnqqp0Yafxub4e+YRpJkGL9ddnvdTrTwZjAYZ0vGjuO1a6CobLCb8Sx7bfkmeGUPwEuyja7nrUw7pqdshLyZU96WJX9APxtdLyB2m2I+Sp9DhLsyg7ScO2WaP3xB1hLwQKLf0qzove84ysUkJ+L8+Sd7i42QafIwnj3bseMQYA50N0arGbJGFtsH9oNyqxmMxK2iHBQg3Wl8GMWqQpXOijVMQHsECxgj17Ah7PBBXuVdgZEXAeiumeldlB3faqpKIjolaVyTotOeN/dMrJv5NJNO/h32m4aegHxCh/TB6E+1zfp/9M2vfOkJ+NUTV57sSvTB6JqszO6idNcsqDLkQTVNQ4Mzmq5rZ2gS20X0V0mZ+cwqYOVdRU+piqq5Nh2KPgVjo6NjJ9/H37djloh4YG766CtYoSqeUw6ey2QQ8BCothpqo1VdfW+Cx/uj78LFo0f3TE9HvzxyBF9X4PFc9DI8ivzKjSN7ZuIzD8ko/QVJYLbTGFu1msGn0ergI4x18M9SV/bu2fvcJ77yx6g+PX15Zob+/M97P/fswU/iAJl5Fu1IsZ0k/WbsEyd59Eo0nlZDtKIMoMVhyGATajU48vS16OlwHxwOonYQwOHoxwHsCIMg+HIIX9sXRk8/Bf8KgugnQRCS3prz9CR6qxGLlPEeQoCrIR57ajgoiKdyCFWORYGNhXewPsIOVIKwEwLvZBUVdQp9y/f96Ed0wC/CSUHXLAxE7+YXFoprtg1vm64slBr0vlL0QWWzzwdgKM8DOswX0hvprngeyxeLXBD4Pc57b2BhodTH11YWig/9bGspmk95PA9DA3zq+Un+SKbUu09EbBN9nxwiL5I30edWEAYVFbehIq4NNgTrcQ92WqKnNupcnGTtOo+JDwUQY1nezoq2mlEy8YE31bOhZmyxQNzaXSmtVIKWe0fnCmkC7pVaEDTbdfxq3EeC5pToI832OAzisYxjDaR4rcM+I7pM0OzAcWpIhmyA7o4rzPGU8T4LgKcStmHylJW3zH5rIJHipmFb/WYib6U4gE+TaQMvht2ZYKUtMCVTMsD2bByMubRFdRl5wcGkanvqwyo+nq0GOw3LMnZGFRSUYIdpWeaOQEHAvKbBGDgMQHL2l3OZeS2VoNp8Yc3I/v6iKrM/9CGVc4YkqaW+E0w2cgrIarHvFmP7DV1OGvv+bcl4c7Tzhm0bE0lGKXMmBQ+aI4krZfRfIV13JPGJ6KjwA65p6NO8mtXm0UltUKxmJuastB2onoPjXCXkf0vq42AAAAB4nGNgZGBgAOKyL1fXx/PbfGXgZmEAgWu/zxkh6P8zWRiYG4BcDgYmkCgAcLoMagB4nGNgZGBgbvjfwBDDwgACQJKRARXwAwBHFQJ4eJxjYWBgYH7JwMDCQDoGADmTASUAAAAAAHYAwgEIAdQB/AK8AvoDQAPIA/AEFARCBJ4FknicY2BkYGDgZ1jLwMYAAkxAzAWEDAz/wXwGABtOAdkAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbYzNEoIwDIS7qAX5EV7Eh6qgTTi045TMFJ7edLi6p+yX3TWVOdWa/xpR4YIrbrCo0eCOFh16DHhgxGSQ7UFRvmy9uPDifnYhkSR6H8R25yUGP53uubELMymwKUqS2GUOXj6OXEGS9NNkzSy6VGun3HaVkmp3ZSSFDDq/yibxIHFszA/LhTFoAAAA') format('woff'),
+  url('iconfont.ttf?t=1523952947044') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1523952947044#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-zhouqi:before { content: "\e71e"; }
+
+.icon-guanbi:before { content: "\e647"; }
+
+.icon-canshushezhi:before { content: "\e60a"; }
+
+.icon-yidong:before { content: "\e648"; }
+
+.icon-shezhi-tianchong:before { content: "\e638"; }
+
+.icon-sousuo:before { content: "\e78d"; }
+
+.icon-xingufahang:before { content: "\e603"; }
+
+.icon-susong:before { content: "\e611"; }
+
+.icon-xianduan:before { content: "\e61b"; }
+
+.icon-shexian:before { content: "\e61c"; }
+
+.icon-juxing:before { content: "\e61d"; }
+
+.icon-yuanhuxian:before { content: "\e61e"; }
+
+.icon-shujutuozhuai:before { content: "\e61f"; }
+
--- a/webhqchart.demo/demo/content/font/iconfont.eot
+++ b/webhqchart.demo/demo/content/font/iconfont.eot
--- a/webhqchart.demo/demo/content/font/iconfont.js
+++ b/webhqchart.demo/demo/content/font/iconfont.js
+(function(window){var svgSprite='<svg><symbol id="icon-zhouqi" viewBox="0 0 1024 1024"><path d="M512 65.36266c-246.283196 0-446.63734 200.354144-446.63734 446.63734 0 246.283196 200.354144 446.63734 446.63734 446.63734 246.283196 0 446.63734-200.353121 446.63734-446.63734C958.636317 265.716804 758.283196 65.36266 512 65.36266zM512 884.19693c-205.230198 0-372.19693-166.968779-372.19693-372.19693 0-205.230198 166.967756-372.19693 372.19693-372.19693 205.229175 0 372.19693 166.967756 372.19693 372.19693C884.19693 717.229175 717.229175 884.19693 512 884.19693zM684.997076 621.463064 530.608823 532.172435 530.608823 288.681842c0-20.544919-16.675798-37.219693-37.219693-37.219693-20.544919 0-37.219693 16.674775-37.219693 37.219693l0 260.538875c0 13.808494 17.157775 25.384134 28.324092 31.784914 3.090385 4.65195 11.57564 8.859785 16.749476 11.837606l153.530722 93.049233c17.792225 10.272971 37.072337 4.168949 47.344285-13.623275C712.392006 654.475945 702.82614 631.736035 684.997076 621.463064z"  ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M641.447722 511.998977l299.029514-299.033607c22.477944-22.476921 26.320459-55.098899 8.580422-72.838935l-65.198931-65.197908c-17.740036-17.740036-50.316989-13.853519-72.838935 8.624425L512.011768 382.570185 212.975091 83.551928c-22.476921-22.499433-55.098899-26.365484-72.838935-8.601912l-65.197908 65.197908c-17.740036 17.718547-13.897521 50.339502 8.624425 72.817446l299.026444 299.031561L83.562673 811.031561c-22.477944 22.477944-26.365484 55.076386-8.624425 72.817446l65.197908 65.209164c17.740036 17.74106 50.362015 13.897521 72.838935-8.580422l299.04384-299.048957 298.999838 299.004955c22.521946 22.521946 55.098899 26.365484 72.838935 8.624425l65.198931-65.209164c17.740036-17.74106 13.897521-50.339502-8.580422-72.839959L641.447722 511.998977z"  ></path></symbol><symbol id="icon-canshushezhi" viewBox="0 0 1024 1024"><path d="M544 396.8V57.6c0-19.2-12.8-32-32-32s-32 12.8-32 32v339.2c-51.2 12.8-89.6 57.6-89.6 115.2s38.4 102.4 89.6 115.2v339.2c0 19.2 12.8 32 32 32s32-12.8 32-32V627.2c51.2-12.8 89.6-57.6 89.6-115.2s-38.4-102.4-89.6-115.2z m0 166.4c-12.8 6.4-19.2 6.4-32 6.4s-19.2-6.4-32-6.4C460.8 556.8 448 531.2 448 512c0-25.6 12.8-44.8 32-51.2 12.8-6.4 19.2-12.8 32-12.8s19.2 6.4 32 6.4c19.2 12.8 32 32 32 57.6 0 19.2-12.8 44.8-32 51.2z m-377.6 38.4V57.6c0-19.2-12.8-32-32-32s-32 12.8-32 32v544c-51.2 12.8-89.6 57.6-89.6 115.2s38.4 102.4 89.6 115.2v134.4c0 19.2 12.8 32 32 32s32-12.8 32-32V832c51.2-12.8 89.6-57.6 89.6-115.2s-38.4-102.4-89.6-115.2z m0 166.4c-6.4 6.4-19.2 6.4-32 6.4s-19.2-6.4-32-6.4c-19.2-12.8-32-32-32-51.2 0-25.6 12.8-44.8 32-51.2 6.4-6.4 19.2-6.4 32-6.4s19.2 6.4 32 6.4c19.2 12.8 32 32 32 51.2 0 19.2-12.8 38.4-32 51.2z m755.2-576V57.6c0-19.2-12.8-32-32-32s-32 12.8-32 32V192c-51.2 12.8-89.6 57.6-89.6 115.2s38.4 102.4 89.6 115.2v544c0 19.2 12.8 32 32 32s32-12.8 32-32V422.4c51.2-12.8 89.6-57.6 89.6-115.2s-38.4-102.4-89.6-115.2z m0 166.4c-6.4 6.4-19.2 6.4-32 6.4s-19.2-6.4-32-6.4c-19.2-12.8-32-32-32-51.2 0-25.6 12.8-44.8 32-51.2 6.4-6.4 19.2-6.4 32-6.4s19.2 6.4 32 6.4c19.2 12.8 32 32 32 51.2 0 25.6-12.8 44.8-32 51.2z" fill="" ></path></symbol><symbol id="icon-yidong" viewBox="0 0 1024 1024"><path d="M960 480L768 320v128H512V192h128L480 0 320 192h128v256H192V320L0 480l192 160V512h256v256H320l160 192 160-192H512V512h256v128l192-160z"  ></path></symbol><symbol id="icon-shezhi-tianchong" viewBox="0 0 1024 1024"><path d="M992 416c-4.266667-27.733333-21.333333-46.933333-42.666667-46.933333h-4.266666c-70.4 0-128-57.6-128-130.133334 0-23.466667 10.666667-49.066667 10.666666-49.066666 12.8-23.466667 4.266667-55.466667-17.066666-70.4h-2.133334l-123.733333-68.266667H682.666667c-6.4-2.133333-14.933333-4.266667-23.466667-4.266667-17.066667 0-34.133333 6.4-44.8 19.2-14.933333 14.933333-61.866667 55.466667-100.266667 55.466667-38.4 0-85.333333-40.533333-100.266666-57.6-10.666667-14.933333-29.866667-21.333333-46.933334-21.333333-8.533333 0-17.066667 2.133333-23.466666 4.266666H341.333333l-128 70.4h-2.133333c-19.2 17.066667-27.733333 49.066667-17.066667 72.533334 0 0 10.666667 25.6 10.666667 49.066666 0 70.4-57.6 130.133333-128 130.133334h-2.133333c-19.2 0-36.266667 19.2-42.666667 46.933333 0 2.133333-10.666667 55.466667-10.666667 96 0 42.666667 10.666667 96 10.666667 98.133333 4.266667 27.733333 21.333333 46.933333 42.666667 46.933334h4.266666c70.4 0 128 57.6 128 130.133333 0 23.466667-10.666667 49.066667-10.666666 49.066667-12.8 23.466667-4.266667 53.333333 17.066666 68.266666h2.133334l119.466666 68.266667h2.133334c6.4 4.266667 14.933333 4.266667 23.466666 4.266667 17.066667 0 34.133333-6.4 46.933334-19.2 14.933333-14.933333 64-59.733333 102.4-59.733334 40.533333 0 87.466667 44.8 102.4 61.866667 10.666667 12.8 27.733333 19.2 46.933333 19.2 8.533333 0 17.066667-2.133333 23.466667-4.266667h2.133333l123.733333-70.4h2.133334c21.333333-14.933333 29.866667-46.933333 19.2-70.4 0 0-10.666667-25.6-10.666667-49.066666 0-70.4 57.6-130.133333 128-130.133334h4.266667c19.2 0 36.266667-17.066667 42.666666-46.933333 0-2.133333 10.666667-55.466667 10.666667-98.133333-2.133333-38.4-12.8-91.733333-12.8-93.866667zM512 682.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z" fill="#666767" ></path><path d="M512 381.866667c-70.4 0-130.133333 57.6-130.133333 130.133333 0 72.533333 57.6 130.133333 130.133333 130.133333 70.4 0 130.133333-57.6 130.133333-130.133333 0-72.533333-59.733333-130.133333-130.133333-130.133333z" fill="#666767" ></path></symbol><symbol id="icon-sousuo" viewBox="0 0 1024 1024"><path d="M816 726.4l137.6 137.6c12.8 12.8 12.8 32 0 44.8l-44.8 44.8c-12.8 12.8-32 12.8-44.8 0l-134.4-134.4c-70.4 51.2-153.6 80-246.4 80-230.4 0-416-185.6-416-416s185.6-416 416-416 416 185.6 416 416c-3.2 89.6-32 172.8-83.2 243.2z m-336 105.6c195.2 0 352-156.8 352-352s-156.8-352-352-352-352 156.8-352 352 156.8 352 352 352z"  ></path></symbol><symbol id="icon-xingufahang" viewBox="0 0 1024 1024"><path d="M925.2 811.3H135.7V156.6c0-21.6-14.4-35.9-36.2-35.9-21.7 0-36.2 14.3-36.2 35.9v697.8c0 21.5 14.5 36 36.2 36H925c21.8 0 36.2-14.4 36.2-36 0.1-21.6-14.3-43.1-36-43.1zM244.4 653h14.5c14.5 0 28.9-7.2 36.2-21.6L353 466l282.5 143.9c14.5 7.2 36.2 0 43.4-14.4l195.6-323.7c7.2-14.3 7.2-36-14.5-43.1-18-9.4-40.3-3.1-50.7 14.3L635.5 537.9 353 386.8h-28.9c-7.3 0-21.8 14.4-21.8 21.6l-79.7 194.3c-7.1 21.5 0.1 35.9 21.8 50.3z"  ></path></symbol><symbol id="icon-susong" viewBox="0 0 1024 1024"><path d="M767.6 315.5L620.4 599.7c-0.1 0.3-0.3 0.6-0.4 0.9-0.1 0.4-0.3 0.7-0.4 1-0.5 1.2-0.9 2.4-1.1 3.7 0 0.2 0 0.3-0.1 0.4-0.2 1.2-0.3 2.5-0.4 3.7v1.5c0.5 93.1 75.5 168.8 167.6 168.8 92 0 167-75.6 167.6-168.6 0-0.4 0.1-0.8 0.1-1.2 0-4.3-1.2-8.3-3.2-11.7l-136-282.7h75.3c13.9 0 17.5-2.3 17.5-17.4v-11.4c0-13.5-1.6-17.1-17.5-17.1H535.5V103.1c0-10.3 0-17.4-11.3-17.4H501c-11.2 0-12 7.4-12 17.2v166.6H136.5c-12.2 0-18.9 3.2-18.9 14.6v16.7c0 10.3 6.5 14.6 19.1 14.6h73.7L73.7 599.7c-0.2 0.3-0.3 0.6-0.4 0.9-0.1 0.3-0.3 0.6-0.4 0.9-0.5 1.2-0.9 2.4-1.1 3.7 0 0.2 0 0.3-0.1 0.4-0.2 1.2-0.4 2.5-0.4 3.7v1.5c0.5 93.1 75.5 168.8 167.6 168.8 92 0 167-75.6 167.6-168.6 0-0.4 0.1-0.8 0.1-1.2 0-4.3-1.2-8.3-3.2-11.7L256.9 315.5h233l-0.9 551.3H371.1c-14.8 0-21.4 2.8-21.4 14.9v17.9c0 10.3 5.5 13.1 21.4 13.1h282.6c16.3 0 21.1-4.5 21.1-14.3v-17.3c0-9.2-4.4-14.3-19-14.3H535.5V315.5h232.1M238.8 734.4c-60.1 0-110.3-44-120.9-101.8h241.8c-10.5 57.8-60.7 101.8-120.9 101.8M130 587.3l110.8-221 107.4 221H130m657.6-221l107.4 221H676.8l110.8-221m-2 368.1c-60.2 0-110.4-44-120.9-101.8h241.8c-10.5 57.8-60.7 101.8-120.9 101.8"  ></path></symbol><symbol id="icon-xianduan" viewBox="0 0 1024 1024"><path d="M315.904 678.4L675.84 318.464l25.088 25.088-359.936 359.936-25.088-25.088z"  ></path><path d="M791.552 361.984h-132.096V229.888h132.096v132.096z m-100.864-30.72h70.656V260.608h-70.656v70.656zM358.912 794.624H226.816v-132.096h132.096v132.096z m-101.376-30.72h70.656v-70.656H257.536v70.656z"  ></path></symbol><symbol id="icon-shexian" viewBox="0 0 1024 1024"><path d="M786.432 209.92l-218.624 218.624H455.68v112.128l-100.352 100.352H243.2v141.312h141.312v-120.832L476.16 570.368h120.832V449.024l214.016-214.016-24.576-25.088zM349.184 747.008H278.528v-70.656h70.656v70.656z m212.48-211.968H491.008V463.872H562.176v71.168z"  ></path></symbol><symbol id="icon-juxing" viewBox="0 0 1024 1024"><path d="M668.672 779.776v-38.4H286.72V359.936h-38.4V245.248h114.688v38.4h381.952V665.6h38.4v114.688h-114.688zM325.12 283.648H286.72v38.4h38.4v-38.4z m381.44 37.888H363.008v38.4h-38.4v343.552h343.552v-38.4h38.4V321.536z m38.4 381.952H706.56v38.4h38.4v-38.4z"  ></path></symbol><symbol id="icon-yuanhuxian" viewBox="0 0 1024 1024"><path d="M697.856 288.768l30.208 30.208-0.512 0.512-29.696 29.696-2.56-2.56-25.088-25.088-2.56-2.56 30.208-30.208m-376.32 376.32l2.56 2.56 25.088 25.088 2.56 2.56-3.072 3.072-20.48 20.48-6.656 6.656-30.208-30.208 30.208-30.208m371.2 7.168l2.56 2.56 21.504 21.504 6.144 6.144-30.208 30.208-2.048-2.048-28.672-28.672 30.72-29.696m5.12-434.176l-80.896 80.896 27.648 27.648-295.424 295.424-27.648-27.648L240.64 695.296l80.896 80.896 31.744-31.744c47.104 31.232 101.376 46.592 156.16 46.592 51.712 0 102.912-13.824 148.48-41.984l34.304 34.304 80.896-80.896-31.744-31.744c67.072-95.232 69.12-222.72 5.12-320l31.744-31.744-80.384-80.896z m-187.904 517.12c-45.056 0-90.624-12.288-130.048-36.864l23.04-23.04-27.648-27.648L670.72 372.224l27.648 27.648 23.04-23.04c50.688 81.92 49.152 187.392-5.12 268.288l-23.552-23.552-80.896 80.896 20.48 20.48c-37.888 21.504-80.384 32.256-122.368 32.256z"  ></path></symbol><symbol id="icon-shujutuozhuai" viewBox="0 0 1024 1024"><path d="M391.68 584.192v-1.024c-0.512-10.24-5.12-15.36-11.264-17.92-2.56-1.024-6.144-1.536-9.216-1.536-3.584 0-6.656 0.512-9.728 1.536-6.144 2.56-10.752 8.192-10.752 18.944v118.272c0 46.08 1.536 48.64 25.6 79.36l6.656 8.704 51.712 67.072c8.192 10.24 6.144 24.576-3.584 32.768-10.752 8.192-25.088 6.144-33.28-4.096L345.6 819.2l-6.656-8.704c-33.792-43.52-35.84-46.592-35.84-108.544V583.68c0-32.256 18.432-53.248 41.472-62.464 8.192-3.584 17.408-5.12 26.624-5.12 6.656 0 13.824 1.024 20.48 2.56V308.224c0-32.256 17.92-53.248 41.472-61.952 8.192-3.584 17.92-5.632 27.136-5.632 8.192 0 17.408 1.536 25.6 5.12 6.656-17.408 19.968-29.184 35.84-35.328 8.704-3.072 17.92-4.608 27.136-4.608 9.216 0 17.92 1.536 26.624 4.608 23.04 9.216 40.96 30.72 40.96 62.976v137.216c7.168-2.048 13.824-2.56 20.48-2.56 9.728 0 18.432 1.536 27.136 4.608 15.872 6.656 29.184 18.432 35.84 35.84 8.192-3.584 16.896-5.12 25.6-5.12 8.704 0 18.432 2.048 26.624 5.632 23.04 8.704 41.472 29.696 41.472 61.952v243.2c0 2.048-0.512 4.096-1.024 5.632l-29.184 118.272c-2.56 12.8-15.36 20.48-28.672 16.896-12.8-3.072-20.48-15.872-17.408-28.672l28.672-115.2v-240.64c0-9.216-5.12-15.36-11.264-18.432-2.56-1.024-5.632-1.536-9.216-1.536s-6.144 0.512-9.728 1.536c-5.632 2.56-10.752 8.704-11.264 17.92v27.136c0 13.312-10.752 24.064-23.552 24.064-13.312 0-23.552-10.752-23.552-24.064v-61.44c0-10.24-4.608-16.896-11.264-18.944-3.072-1.024-5.632-1.536-9.728-1.536-3.584 0-6.656 0.512-9.216 1.536-6.144 2.048-11.264 8.192-11.264 17.92v62.464c0 13.312-10.752 24.064-23.552 24.064-12.8 0-23.552-10.752-23.552-24.064V272.896c0-10.24-4.608-16.384-11.264-18.944-2.56-1.024-5.632-1.536-9.216-1.536-3.072 0-6.656 0.512-9.216 1.536-6.656 2.56-11.264 8.704-11.264 18.944v264.192c0 13.312-10.752 24.064-23.552 24.064s-23.552-10.752-23.552-24.064V307.712c-0.512-10.24-5.12-15.872-11.264-18.432-2.56-1.024-6.144-1.536-9.216-1.536-3.584 0-6.656 0.512-9.728 1.536-6.656 2.56-11.264 8.704-11.264 18.432v378.88c0 13.312-10.752 24.064-24.576 24.064-12.8 0-23.04-10.752-23.04-24.064v-102.4z m318.464-380.416c-9.216-9.216-9.216-24.576-0.512-33.792 9.728-8.704 24.064-9.216 33.28 0l76.8 76.288c4.608 4.096 8.192 10.752 8.192 17.92s-3.584 13.312-8.192 18.432l-76.8 76.288c-9.216 9.728-23.552 9.728-33.28 0-9.216-9.216-9.216-24.064 0.512-33.792l37.376-37.376h-87.552c-12.8 0-23.552-10.752-23.552-24.064 0-12.8 10.752-23.04 23.552-23.04H747.52l-37.376-36.864z m-440.32-33.792c9.216-9.216 24.576-8.704 33.792 0 9.216 9.216 8.704 24.576 0 33.792l-37.888 37.376H353.28c13.312 0 24.064 10.24 24.064 23.04 0 13.312-10.752 24.064-24.064 24.064H265.728l37.888 37.376c8.704 9.728 9.216 24.576 0 33.792-9.216 9.728-24.576 9.728-33.792 0l-76.288-76.8c-4.608-4.608-8.192-10.752-8.192-18.432 0-7.168 3.584-13.824 8.192-17.92l76.288-76.288z"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
\ No newline at end of file
--- a/webhqchart.demo/demo/content/font/iconfont.svg
+++ b/webhqchart.demo/demo/content/font/iconfont.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="zhouqi" unicode="&#59166;" d="M512 830.63734c-246.283196 0-446.63734-200.354144-446.63734-446.63734 0-246.283196 200.354144-446.63734 446.63734-446.63734 246.283196 0 446.63734 200.353121 446.63734 446.63734C958.636317 630.283196 758.283196 830.63734 512 830.63734zM512 11.803070000000048c-205.230198 0-372.19693 166.968779-372.19693 372.19693 0 205.230198 166.967756 372.19693 372.19693 372.19693 205.229175 0 372.19693-166.967756 372.19693-372.19693C884.19693 178.77082499999995 717.229175 11.803070000000048 512 11.803070000000048zM684.997076 274.53693599999997L530.608823 363.82756500000005 530.608823 607.318158c0 20.544919-16.675798 37.219693-37.219693 37.219693-20.544919 0-37.219693-16.674775-37.219693-37.219693l0-260.538875c0-13.808494 17.157775-25.384134 28.324092-31.784914 3.090385-4.65195 11.57564-8.859785 16.749476-11.837606l153.530722-93.049233c17.792225-10.272971 37.072337-4.168949 47.344285 13.623275C712.392006 241.52405499999998 702.82614 264.263965 684.997076 274.53693599999997z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guanbi" unicode="&#58951;" d="M641.447722 384.001023l299.029514 299.033607c22.477944 22.476921 26.320459 55.098899 8.580422 72.838935l-65.198931 65.197908c-17.740036 17.740036-50.316989 13.853519-72.838935-8.624425L512.011768 513.429815 212.975091 812.448072c-22.476921 22.499433-55.098899 26.365484-72.838935 8.601912l-65.197908-65.197908c-17.740036-17.718547-13.897521-50.339502 8.624425-72.817446l299.026444-299.031561L83.562673 84.968439c-22.477944-22.477944-26.365484-55.076386-8.624425-72.817446l65.197908-65.209164c17.740036-17.74106 50.362015-13.897521 72.838935 8.580422l299.04384 299.048957 298.999838-299.004955c22.521946-22.521946 55.098899-26.365484 72.838935-8.624425l65.198931 65.209164c17.740036 17.74106 13.897521 50.339502-8.580422 72.839959L641.447722 384.001023z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="canshushezhi" unicode="&#58890;" d="M544 499.2V838.4c0 19.2-12.8 32-32 32s-32-12.8-32-32v-339.2c-51.2-12.8-89.6-57.6-89.6-115.2s38.4-102.4 89.6-115.2v-339.2c0-19.2 12.8-32 32-32s32 12.8 32 32V268.8c51.2 12.8 89.6 57.6 89.6 115.2s-38.4 102.4-89.6 115.2z m0-166.4c-12.8-6.4-19.2-6.4-32-6.4s-19.2 6.4-32 6.4C460.8 339.2 448 364.8 448 384c0 25.6 12.8 44.8 32 51.2 12.8 6.4 19.2 12.8 32 12.8s19.2-6.4 32-6.4c19.2-12.8 32-32 32-57.6 0-19.2-12.8-44.8-32-51.2z m-377.6-38.4V838.4c0 19.2-12.8 32-32 32s-32-12.8-32-32v-544c-51.2-12.8-89.6-57.6-89.6-115.2s38.4-102.4 89.6-115.2v-134.4c0-19.2 12.8-32 32-32s32 12.8 32 32V64c51.2 12.8 89.6 57.6 89.6 115.2s-38.4 102.4-89.6 115.2z m0-166.4c-6.4-6.4-19.2-6.4-32-6.4s-19.2 6.4-32 6.4c-19.2 12.8-32 32-32 51.2 0 25.6 12.8 44.8 32 51.2 6.4 6.4 19.2 6.4 32 6.4s19.2-6.4 32-6.4c19.2-12.8 32-32 32-51.2 0-19.2-12.8-38.4-32-51.2z m755.2 576V838.4c0 19.2-12.8 32-32 32s-32-12.8-32-32V704c-51.2-12.8-89.6-57.6-89.6-115.2s38.4-102.4 89.6-115.2v-544c0-19.2 12.8-32 32-32s32 12.8 32 32V473.6c51.2 12.8 89.6 57.6 89.6 115.2s-38.4 102.4-89.6 115.2z m0-166.4c-6.4-6.4-19.2-6.4-32-6.4s-19.2 6.4-32 6.4c-19.2 12.8-32 32-32 51.2 0 25.6 12.8 44.8 32 51.2 6.4 6.4 19.2 6.4 32 6.4s19.2-6.4 32-6.4c19.2-12.8 32-32 32-51.2 0-25.6-12.8-44.8-32-51.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yidong" unicode="&#58952;" d="M960 416L768 576v-128H512V704h128L480 896 320 704h128v-256H192V576L0 416l192-160V384h256v-256H320l160-192 160 192H512V384h256v-128l192 160z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shezhi-tianchong" unicode="&#58936;" d="M992 480c-4.266667 27.733333-21.333333 46.933333-42.666667 46.933333h-4.266666c-70.4 0-128 57.6-128 130.133334 0 23.466667 10.666667 49.066667 10.666666 49.066666 12.8 23.466667 4.266667 55.466667-17.066666 70.4h-2.133334l-123.733333 68.266667H682.666667c-6.4 2.133333-14.933333 4.266667-23.466667 4.266667-17.066667 0-34.133333-6.4-44.8-19.2-14.933333-14.933333-61.866667-55.466667-100.266667-55.466667-38.4 0-85.333333 40.533333-100.266666 57.6-10.666667 14.933333-29.866667 21.333333-46.933334 21.333333-8.533333 0-17.066667-2.133333-23.466666-4.266666H341.333333l-128-70.4h-2.133333c-19.2-17.066667-27.733333-49.066667-17.066667-72.533334 0 0 10.666667-25.6 10.666667-49.066666 0-70.4-57.6-130.133333-128-130.133334h-2.133333c-19.2 0-36.266667-19.2-42.666667-46.933333 0-2.133333-10.666667-55.466667-10.666667-96 0-42.666667 10.666667-96 10.666667-98.133333 4.266667-27.733333 21.333333-46.933333 42.666667-46.933334h4.266666c70.4 0 128-57.6 128-130.133333 0-23.466667-10.666667-49.066667-10.666666-49.066667-12.8-23.466667-4.266667-53.333333 17.066666-68.266666h2.133334l119.466666-68.266667h2.133334c6.4-4.266667 14.933333-4.266667 23.466666-4.266667 17.066667 0 34.133333 6.4 46.933334 19.2 14.933333 14.933333 64 59.733333 102.4 59.733334 40.533333 0 87.466667-44.8 102.4-61.866667 10.666667-12.8 27.733333-19.2 46.933333-19.2 8.533333 0 17.066667 2.133333 23.466667 4.266667h2.133333l123.733333 70.4h2.133334c21.333333 14.933333 29.866667 46.933333 19.2 70.4 0 0-10.666667 25.6-10.666667 49.066666 0 70.4 57.6 130.133333 128 130.133334h4.266667c19.2 0 36.266667 17.066667 42.666666 46.933333 0 2.133333 10.666667 55.466667 10.666667 98.133333-2.133333 38.4-12.8 91.733333-12.8 93.866667zM512 213.33333300000004c-93.866667 0-170.666667 76.8-170.666667 170.666667s76.8 170.666667 170.666667 170.666667 170.666667-76.8 170.666667-170.666667-76.8-170.666667-170.666667-170.666667zM512 514.133333c-70.4 0-130.133333-57.6-130.133333-130.133333 0-72.533333 57.6-130.133333 130.133333-130.133333 70.4 0 130.133333 57.6 130.133333 130.133333 0 72.533333-59.733333 130.133333-130.133333 130.133333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sousuo" unicode="&#59277;" d="M816 169.6l137.6-137.6c12.8-12.8 12.8-32 0-44.8l-44.8-44.8c-12.8-12.8-32-12.8-44.8 0l-134.4 134.4c-70.4-51.2-153.6-80-246.4-80-230.4 0-416 185.6-416 416s185.6 416 416 416 416-185.6 416-416c-3.2-89.6-32-172.8-83.2-243.2z m-336-105.6c195.2 0 352 156.8 352 352s-156.8 352-352 352-352-156.8-352-352 156.8-352 352-352z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xingufahang" unicode="&#58883;" d="M925.2 84.7H135.7V739.4c0 21.6-14.4 35.9-36.2 35.9-21.7 0-36.2-14.3-36.2-35.9v-697.8c0-21.5 14.5-36 36.2-36H925c21.8 0 36.2 14.4 36.2 36 0.1 21.6-14.3 43.1-36 43.1zM244.4 243h14.5c14.5 0 28.9 7.2 36.2 21.6L353 430l282.5-143.9c14.5-7.2 36.2 0 43.4 14.4l195.6 323.7c7.2 14.3 7.2 36-14.5 43.1-18 9.4-40.3 3.1-50.7-14.3L635.5 358.1 353 509.2h-28.9c-7.3 0-21.8-14.4-21.8-21.6l-79.7-194.3c-7.1-21.5 0.1-35.9 21.8-50.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="susong" unicode="&#58897;" d="M767.6 580.5L620.4 296.3c-0.1-0.3-0.3-0.6-0.4-0.9-0.1-0.4-0.3-0.7-0.4-1-0.5-1.2-0.9-2.4-1.1-3.7 0-0.2 0-0.3-0.1-0.4-0.2-1.2-0.3-2.5-0.4-3.7v-1.5c0.5-93.1 75.5-168.8 167.6-168.8 92 0 167 75.6 167.6 168.6 0 0.4 0.1 0.8 0.1 1.2 0 4.3-1.2 8.3-3.2 11.7l-136 282.7h75.3c13.9 0 17.5 2.3 17.5 17.4v11.4c0 13.5-1.6 17.1-17.5 17.1H535.5V792.9c0 10.3 0 17.4-11.3 17.4H501c-11.2 0-12-7.4-12-17.2v-166.6H136.5c-12.2 0-18.9-3.2-18.9-14.6v-16.7c0-10.3 6.5-14.6 19.1-14.6h73.7L73.7 296.3c-0.2-0.3-0.3-0.6-0.4-0.9-0.1-0.3-0.3-0.6-0.4-0.9-0.5-1.2-0.9-2.4-1.1-3.7 0-0.2 0-0.3-0.1-0.4-0.2-1.2-0.4-2.5-0.4-3.7v-1.5c0.5-93.1 75.5-168.8 167.6-168.8 92 0 167 75.6 167.6 168.6 0 0.4 0.1 0.8 0.1 1.2 0 4.3-1.2 8.3-3.2 11.7L256.9 580.5h233l-0.9-551.3H371.1c-14.8 0-21.4-2.8-21.4-14.9v-17.9c0-10.3 5.5-13.1 21.4-13.1h282.6c16.3 0 21.1 4.5 21.1 14.3v17.3c0 9.2-4.4 14.3-19 14.3H535.5V580.5h232.1M238.8 161.6c-60.1 0-110.3 44-120.9 101.8h241.8c-10.5-57.8-60.7-101.8-120.9-101.8M130 308.7l110.8 221 107.4-221H130m657.6 221l107.4-221H676.8l110.8 221m-2-368.1c-60.2 0-110.4 44-120.9 101.8h241.8c-10.5-57.8-60.7-101.8-120.9-101.8"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xianduan" unicode="&#58907;" d="M315.904 217.6L675.84 577.536l25.088-25.088-359.936-359.936-25.088 25.088zM791.552 534.016h-132.096V666.112h132.096v-132.096z m-100.864 30.72h70.656V635.392h-70.656v-70.656zM358.912 101.376H226.816v132.096h132.096v-132.096z m-101.376 30.72h70.656v70.656H257.536v-70.656z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shexian" unicode="&#58908;" d="M786.432 686.08l-218.624-218.624H455.68v-112.128l-100.352-100.352H243.2v-141.312h141.312v120.832L476.16 325.632h120.832V446.976l214.016 214.016-24.576 25.088zM349.184 148.992H278.528v70.656h70.656v-70.656z m212.48 211.968H491.008V432.128H562.176v-71.168z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="juxing" unicode="&#58909;" d="M668.672 116.224v38.4H286.72V536.064h-38.4V650.752h114.688v-38.4h381.952V230.4h38.4v-114.688h-114.688zM325.12 612.352H286.72v-38.4h38.4v38.4z m381.44-37.888H363.008v-38.4h-38.4v-343.552h343.552v38.4h38.4V574.464z m38.4-381.952H706.56v-38.4h38.4v38.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yuanhuxian" unicode="&#58910;" d="M697.856 607.232l30.208-30.208-0.512-0.512-29.696-29.696-2.56 2.56-25.088 25.088-2.56 2.56 30.208 30.208m-376.32-376.32l2.56-2.56 25.088-25.088 2.56-2.56-3.072-3.072-20.48-20.48-6.656-6.656-30.208 30.208 30.208 30.208m371.2-7.168l2.56-2.56 21.504-21.504 6.144-6.144-30.208-30.208-2.048 2.048-28.672 28.672 30.72 29.696m5.12 434.176l-80.896-80.896 27.648-27.648-295.424-295.424-27.648 27.648L240.64 200.704l80.896-80.896 31.744 31.744c47.104-31.232 101.376-46.592 156.16-46.592 51.712 0 102.912 13.824 148.48 41.984l34.304-34.304 80.896 80.896-31.744 31.744c67.072 95.232 69.12 222.72 5.12 320l31.744 31.744-80.384 80.896z m-187.904-517.12c-45.056 0-90.624 12.288-130.048 36.864l23.04 23.04-27.648 27.648L670.72 523.776l27.648-27.648 23.04 23.04c50.688-81.92 49.152-187.392-5.12-268.288l-23.552 23.552-80.896-80.896 20.48-20.48c-37.888-21.504-80.384-32.256-122.368-32.256z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shujutuozhuai" unicode="&#58911;" d="M391.68 311.808v1.024c-0.512 10.24-5.12 15.36-11.264 17.92-2.56 1.024-6.144 1.536-9.216 1.536-3.584 0-6.656-0.512-9.728-1.536-6.144-2.56-10.752-8.192-10.752-18.944v-118.272c0-46.08 1.536-48.64 25.6-79.36l6.656-8.704 51.712-67.072c8.192-10.24 6.144-24.576-3.584-32.768-10.752-8.192-25.088-6.144-33.28 4.096L345.6 76.8l-6.656 8.704c-33.792 43.52-35.84 46.592-35.84 108.544V312.32c0 32.256 18.432 53.248 41.472 62.464 8.192 3.584 17.408 5.12 26.624 5.12 6.656 0 13.824-1.024 20.48-2.56V587.776c0 32.256 17.92 53.248 41.472 61.952 8.192 3.584 17.92 5.632 27.136 5.632 8.192 0 17.408-1.536 25.6-5.12 6.656 17.408 19.968 29.184 35.84 35.328 8.704 3.072 17.92 4.608 27.136 4.608 9.216 0 17.92-1.536 26.624-4.608 23.04-9.216 40.96-30.72 40.96-62.976v-137.216c7.168 2.048 13.824 2.56 20.48 2.56 9.728 0 18.432-1.536 27.136-4.608 15.872-6.656 29.184-18.432 35.84-35.84 8.192 3.584 16.896 5.12 25.6 5.12 8.704 0 18.432-2.048 26.624-5.632 23.04-8.704 41.472-29.696 41.472-61.952v-243.2c0-2.048-0.512-4.096-1.024-5.632l-29.184-118.272c-2.56-12.8-15.36-20.48-28.672-16.896-12.8 3.072-20.48 15.872-17.408 28.672l28.672 115.2v240.64c0 9.216-5.12 15.36-11.264 18.432-2.56 1.024-5.632 1.536-9.216 1.536s-6.144-0.512-9.728-1.536c-5.632-2.56-10.752-8.704-11.264-17.92v-27.136c0-13.312-10.752-24.064-23.552-24.064-13.312 0-23.552 10.752-23.552 24.064v61.44c0 10.24-4.608 16.896-11.264 18.944-3.072 1.024-5.632 1.536-9.728 1.536-3.584 0-6.656-0.512-9.216-1.536-6.144-2.048-11.264-8.192-11.264-17.92v-62.464c0-13.312-10.752-24.064-23.552-24.064-12.8 0-23.552 10.752-23.552 24.064V623.104c0 10.24-4.608 16.384-11.264 18.944-2.56 1.024-5.632 1.536-9.216 1.536-3.072 0-6.656-0.512-9.216-1.536-6.656-2.56-11.264-8.704-11.264-18.944v-264.192c0-13.312-10.752-24.064-23.552-24.064s-23.552 10.752-23.552 24.064V588.288c-0.512 10.24-5.12 15.872-11.264 18.432-2.56 1.024-6.144 1.536-9.216 1.536-3.584 0-6.656-0.512-9.728-1.536-6.656-2.56-11.264-8.704-11.264-18.432v-378.88c0-13.312-10.752-24.064-24.576-24.064-12.8 0-23.04 10.752-23.04 24.064v102.4z m318.464 380.416c-9.216 9.216-9.216 24.576-0.512 33.792 9.728 8.704 24.064 9.216 33.28 0l76.8-76.288c4.608-4.096 8.192-10.752 8.192-17.92s-3.584-13.312-8.192-18.432l-76.8-76.288c-9.216-9.728-23.552-9.728-33.28 0-9.216 9.216-9.216 24.064 0.512 33.792l37.376 37.376h-87.552c-12.8 0-23.552 10.752-23.552 24.064 0 12.8 10.752 23.04 23.552 23.04H747.52l-37.376 36.864z m-440.32 33.792c9.216 9.216 24.576 8.704 33.792 0 9.216-9.216 8.704-24.576 0-33.792l-37.888-37.376H353.28c13.312 0 24.064-10.24 24.064-23.04 0-13.312-10.752-24.064-24.064-24.064H265.728l37.888-37.376c8.704-9.728 9.216-24.576 0-33.792-9.216-9.728-24.576-9.728-33.792 0l-76.288 76.8c-4.608 4.608-8.192 10.752-8.192 18.432 0 7.168 3.584 13.824 8.192 17.92l76.288 76.288z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/webhqchart.demo/demo/content/font/iconfont.ttf
+++ b/webhqchart.demo/demo/content/font/iconfont.ttf
--- a/webhqchart.demo/demo/content/font/iconfont.woff
+++ b/webhqchart.demo/demo/content/font/iconfont.woff
--- a/webhqchart.demo/demo/content/js/Tween.js
+++ b/webhqchart.demo/demo/content/js/Tween.js
+/**
+ * Tween.js - Licensed under the MIT license
+ * https://github.com/tweenjs/tween.js
+ * ----------------------------------------------
+ *
+ * See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
+ * Thank you all, you're awesome!
+ */
+
+var TWEEN = TWEEN || (function () {
+
+    var _tweens = [];
+
+    return {
+
+        getAll: function () {
+
+            return _tweens;
+
+        },
+
+        removeAll: function () {
+
+            _tweens = [];
+
+        },
+
+        add: function (tween) {
+
+            _tweens.push(tween);
+
+        },
+
+        remove: function (tween) {
+
+            var i = _tweens.indexOf(tween);
+
+            if (i !== -1) {
+                _tweens.splice(i, 1);
+            }
+
+        },
+
+        update: function (time, preserve) {
+
+            if (_tweens.length === 0) {
+                return false;
+            }
+
+            var i = 0;
+
+            time = time !== undefined ? time : TWEEN.now();
+
+            while (i < _tweens.length) {
+
+                if (_tweens[i].update(time) || preserve) {
+                    i++;
+                } else {
+                    _tweens.splice(i, 1);
+                }
+
+            }
+
+            return true;
+
+        }
+    };
+
+})();
+
+
+// Include a performance.now polyfill.
+// In node.js, use process.hrtime.
+if (typeof (window) === 'undefined' && typeof (process) !== 'undefined') {
+    TWEEN.now = function () {
+        var time = process.hrtime();
+
+        // Convert [seconds, nanoseconds] to milliseconds.
+        return time[0] * 1000 + time[1] / 1000000;
+    };
+}
+    // In a browser, use window.performance.now if it is available.
+else if (typeof (window) !== 'undefined' &&
+         window.performance !== undefined &&
+		 window.performance.now !== undefined) {
+    // This must be bound, because directly assigning this function
+    // leads to an invocation exception in Chrome.
+    TWEEN.now = window.performance.now.bind(window.performance);
+}
+    // Use Date.now if it is available.
+else if (Date.now !== undefined) {
+    TWEEN.now = Date.now;
+}
+    // Otherwise, use 'new Date().getTime()'.
+else {
+    TWEEN.now = function () {
+        return new Date().getTime();
+    };
+}
+
+
+TWEEN.Tween = function (object) {
+
+    var _object = object;
+    var _valuesStart = {};
+    var _valuesEnd = {};
+    var _valuesStartRepeat = {};
+    var _duration = 1000;
+    var _repeat = 0;
+    var _repeatDelayTime;
+    var _yoyo = false;
+    var _isPlaying = false;
+    var _reversed = false;
+    var _delayTime = 0;
+    var _startTime = null;
+    var _easingFunction = TWEEN.Easing.Linear.None;
+    var _interpolationFunction = TWEEN.Interpolation.Linear;
+    var _chainedTweens = [];
+    var _onStartCallback = null;
+    var _onStartCallbackFired = false;
+    var _onUpdateCallback = null;
+    var _onCompleteCallback = null;
+    var _onStopCallback = null;
+
+    this.to = function (properties, duration) {
+
+        _valuesEnd = properties;
+
+        if (duration !== undefined) {
+            _duration = duration;
+        }
+
+        return this;
+
+    };
+
+    this.start = function (time) {
+
+        TWEEN.add(this);
+
+        _isPlaying = true;
+
+        _onStartCallbackFired = false;
+
+        _startTime = time !== undefined ? time : TWEEN.now();
+        _startTime += _delayTime;
+
+        for (var property in _valuesEnd) {
+
+            // Check if an Array was provided as property value
+            if (_valuesEnd[property] instanceof Array) {
+
+                if (_valuesEnd[property].length === 0) {
+                    continue;
+                }
+
+                // Create a local copy of the Array with the start value at the front
+                _valuesEnd[property] = [_object[property]].concat(_valuesEnd[property]);
+
+            }
+
+            // If `to()` specifies a property that doesn't exist in the source object,
+            // we should not set that property in the object
+            if (_object[property] === undefined) {
+                continue;
+            }
+
+            // Save the starting value.
+            _valuesStart[property] = _object[property];
+
+            if ((_valuesStart[property] instanceof Array) === false) {
+                _valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
+            }
+
+            _valuesStartRepeat[property] = _valuesStart[property] || 0;
+
+        }
+
+        return this;
+
+    };
+
+    this.stop = function () {
+
+        if (!_isPlaying) {
+            return this;
+        }
+
+        TWEEN.remove(this);
+        _isPlaying = false;
+
+        if (_onStopCallback !== null) {
+            _onStopCallback.call(_object, _object);
+        }
+
+        this.stopChainedTweens();
+        return this;
+
+    };
+
+    this.end = function () {
+
+        this.update(_startTime + _duration);
+        return this;
+
+    };
+
+    this.stopChainedTweens = function () {
+
+        for (var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++) {
+            _chainedTweens[i].stop();
+        }
+
+    };
+
+    this.delay = function (amount) {
+
+        _delayTime = amount;
+        return this;
+
+    };
+
+    this.repeat = function (times) {
+
+        _repeat = times;
+        return this;
+
+    };
+
+    this.repeatDelay = function (amount) {
+
+        _repeatDelayTime = amount;
+        return this;
+
+    };
+
+    this.yoyo = function (yoyo) {
+
+        _yoyo = yoyo;
+        return this;
+
+    };
+
+
+    this.easing = function (easing) {
+
+        _easingFunction = easing;
+        return this;
+
+    };
+
+    this.interpolation = function (interpolation) {
+
+        _interpolationFunction = interpolation;
+        return this;
+
+    };
+
+    this.chain = function () {
+
+        _chainedTweens = arguments;
+        return this;
+
+    };
+
+    this.onStart = function (callback) {
+
+        _onStartCallback = callback;
+        return this;
+
+    };
+
+    this.onUpdate = function (callback) {
+
+        _onUpdateCallback = callback;
+        return this;
+
+    };
+
+    this.onComplete = function (callback) {
+
+        _onCompleteCallback = callback;
+        return this;
+
+    };
+
+    this.onStop = function (callback) {
+
+        _onStopCallback = callback;
+        return this;
+
+    };
+
+    this.update = function (time) {
+
+        var property;
+        var elapsed;
+        var value;
+
+        if (time < _startTime) {
+            return true;
+        }
+
+        if (_onStartCallbackFired === false) {
+
+            if (_onStartCallback !== null) {
+                _onStartCallback.call(_object, _object);
+            }
+
+            _onStartCallbackFired = true;
+        }
+
+        elapsed = (time - _startTime) / _duration;
+        elapsed = elapsed > 1 ? 1 : elapsed;
+
+        value = _easingFunction(elapsed);
+
+        for (property in _valuesEnd) {
+
+            // Don't update properties that do not exist in the source object
+            if (_valuesStart[property] === undefined) {
+                continue;
+            }
+
+            var start = _valuesStart[property] || 0;
+            var end = _valuesEnd[property];
+
+            if (end instanceof Array) {
+
+                _object[property] = _interpolationFunction(end, value);
+
+            } else {
+
+                // Parses relative end values with start as base (e.g.: +10, -3)
+                if (typeof (end) === 'string') {
+
+                    if (end.charAt(0) === '+' || end.charAt(0) === '-') {
+                        end = start + parseFloat(end);
+                    } else {
+                        end = parseFloat(end);
+                    }
+                }
+
+                // Protect against non numeric properties.
+                if (typeof (end) === 'number') {
+                    _object[property] = start + (end - start) * value;
+                }
+
+            }
+
+        }
+
+        if (_onUpdateCallback !== null) {
+            _onUpdateCallback.call(_object, value);
+        }
+
+        if (elapsed === 1) {
+
+            if (_repeat > 0) {
+
+                if (isFinite(_repeat)) {
+                    _repeat--;
+                }
+
+                // Reassign starting values, restart by making startTime = now
+                for (property in _valuesStartRepeat) {
+
+                    if (typeof (_valuesEnd[property]) === 'string') {
+                        _valuesStartRepeat[property] = _valuesStartRepeat[property] + parseFloat(_valuesEnd[property]);
+                    }
+
+                    if (_yoyo) {
+                        var tmp = _valuesStartRepeat[property];
+
+                        _valuesStartRepeat[property] = _valuesEnd[property];
+                        _valuesEnd[property] = tmp;
+                    }
+
+                    _valuesStart[property] = _valuesStartRepeat[property];
+
+                }
+
+                if (_yoyo) {
+                    _reversed = !_reversed;
+                }
+
+                if (_repeatDelayTime !== undefined) {
+                    _startTime = time + _repeatDelayTime;
+                } else {
+                    _startTime = time + _delayTime;
+                }
+
+                return true;
+
+            } else {
+
+                if (_onCompleteCallback !== null) {
+
+                    _onCompleteCallback.call(_object, _object);
+                }
+
+                for (var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++) {
+                    // Make the chained tweens start exactly at the time they should,
+                    // even if the `update()` method was called way past the duration of the tween
+                    _chainedTweens[i].start(_startTime + _duration);
+                }
+
+                return false;
+
+            }
+
+        }
+
+        return true;
+
+    };
+
+};
+
+
+TWEEN.Easing = {
+
+    Linear: {
+
+        None: function (k) {
+
+            return k;
+
+        }
+
+    },
+
+    Quadratic: {
+
+        In: function (k) {
+
+            return k * k;
+
+        },
+
+        Out: function (k) {
+
+            return k * (2 - k);
+
+        },
+
+        InOut: function (k) {
+
+            if ((k *= 2) < 1) {
+                return 0.5 * k * k;
+            }
+
+            return -0.5 * (--k * (k - 2) - 1);
+
+        }
+
+    },
+
+    Cubic: {
+
+        In: function (k) {
+
+            return k * k * k;
+
+        },
+
+        Out: function (k) {
+
+            return --k * k * k + 1;
+
+        },
+
+        InOut: function (k) {
+
+            if ((k *= 2) < 1) {
+                return 0.5 * k * k * k;
+            }
+
+            return 0.5 * ((k -= 2) * k * k + 2);
+
+        }
+
+    },
+
+    Quartic: {
+
+        In: function (k) {
+
+            return k * k * k * k;
+
+        },
+
+        Out: function (k) {
+
+            return 1 - (--k * k * k * k);
+
+        },
+
+        InOut: function (k) {
+
+            if ((k *= 2) < 1) {
+                return 0.5 * k * k * k * k;
+            }
+
+            return -0.5 * ((k -= 2) * k * k * k - 2);
+
+        }
+
+    },
+
+    Quintic: {
+
+        In: function (k) {
+
+            return k * k * k * k * k;
+
+        },
+
+        Out: function (k) {
+
+            return --k * k * k * k * k + 1;
+
+        },
+
+        InOut: function (k) {
+
+            if ((k *= 2) < 1) {
+                return 0.5 * k * k * k * k * k;
+            }
+
+            return 0.5 * ((k -= 2) * k * k * k * k + 2);
+
+        }
+
+    },
+
+    Sinusoidal: {
+
+        In: function (k) {
+
+            return 1 - Math.cos(k * Math.PI / 2);
+
+        },
+
+        Out: function (k) {
+
+            return Math.sin(k * Math.PI / 2);
+
+        },
+
+        InOut: function (k) {
+
+            return 0.5 * (1 - Math.cos(Math.PI * k));
+
+        }
+
+    },
+
+    Exponential: {
+
+        In: function (k) {
+
+            return k === 0 ? 0 : Math.pow(1024, k - 1);
+
+        },
+
+        Out: function (k) {
+
+            return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
+
+        },
+
+        InOut: function (k) {
+
+            if (k === 0) {
+                return 0;
+            }
+
+            if (k === 1) {
+                return 1;
+            }
+
+            if ((k *= 2) < 1) {
+                return 0.5 * Math.pow(1024, k - 1);
+            }
+
+            return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
+
+        }
+
+    },
+
+    Circular: {
+
+        In: function (k) {
+
+            return 1 - Math.sqrt(1 - k * k);
+
+        },
+
+        Out: function (k) {
+
+            return Math.sqrt(1 - (--k * k));
+
+        },
+
+        InOut: function (k) {
+
+            if ((k *= 2) < 1) {
+                return -0.5 * (Math.sqrt(1 - k * k) - 1);
+            }
+
+            return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
+
+        }
+
+    },
+
+    Elastic: {
+
+        In: function (k) {
+
+            if (k === 0) {
+                return 0;
+            }
+
+            if (k === 1) {
+                return 1;
+            }
+
+            return -Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
+
+        },
+
+        Out: function (k) {
+
+            if (k === 0) {
+                return 0;
+            }
+
+            if (k === 1) {
+                return 1;
+            }
+
+            return Math.pow(2, -10 * k) * Math.sin((k - 0.1) * 5 * Math.PI) + 1;
+
+        },
+
+        InOut: function (k) {
+
+            if (k === 0) {
+                return 0;
+            }
+
+            if (k === 1) {
+                return 1;
+            }
+
+            k *= 2;
+
+            if (k < 1) {
+                return -0.5 * Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
+            }
+
+            return 0.5 * Math.pow(2, -10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI) + 1;
+
+        }
+
+    },
+
+    Back: {
+
+        In: function (k) {
+
+            var s = 1.70158;
+
+            return k * k * ((s + 1) * k - s);
+
+        },
+
+        Out: function (k) {
+
+            var s = 1.70158;
+
+            return --k * k * ((s + 1) * k + s) + 1;
+
+        },
+
+        InOut: function (k) {
+
+            var s = 1.70158 * 1.525;
+
+            if ((k *= 2) < 1) {
+                return 0.5 * (k * k * ((s + 1) * k - s));
+            }
+
+            return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
+
+        }
+
+    },
+
+    Bounce: {
+
+        In: function (k) {
+
+            return 1 - TWEEN.Easing.Bounce.Out(1 - k);
+
+        },
+
+        Out: function (k) {
+
+            if (k < (1 / 2.75)) {
+                return 7.5625 * k * k;
+            } else if (k < (2 / 2.75)) {
+                return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
+            } else if (k < (2.5 / 2.75)) {
+                return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
+            } else {
+                return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
+            }
+
+        },
+
+        InOut: function (k) {
+
+            if (k < 0.5) {
+                return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
+            }
+
+            return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;
+
+        }
+
+    }
+
+};
+
+TWEEN.Interpolation = {
+
+    Linear: function (v, k) {
+
+        var m = v.length - 1;
+        var f = m * k;
+        var i = Math.floor(f);
+        var fn = TWEEN.Interpolation.Utils.Linear;
+
+        if (k < 0) {
+            return fn(v[0], v[1], f);
+        }
+
+        if (k > 1) {
+            return fn(v[m], v[m - 1], m - f);
+        }
+
+        return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
+
+    },
+
+    Bezier: function (v, k) {
+
+        var b = 0;
+        var n = v.length - 1;
+        var pw = Math.pow;
+        var bn = TWEEN.Interpolation.Utils.Bernstein;
+
+        for (var i = 0; i <= n; i++) {
+            b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
+        }
+
+        return b;
+
+    },
+
+    CatmullRom: function (v, k) {
+
+        var m = v.length - 1;
+        var f = m * k;
+        var i = Math.floor(f);
+        var fn = TWEEN.Interpolation.Utils.CatmullRom;
+
+        if (v[0] === v[m]) {
+
+            if (k < 0) {
+                i = Math.floor(f = m * (1 + k));
+            }
+
+            return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
+
+        } else {
+
+            if (k < 0) {
+                return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
+            }
+
+            if (k > 1) {
+                return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
+            }
+
+            return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
+
+        }
+
+    },
+
+    Utils: {
+
+        Linear: function (p0, p1, t) {
+
+            return (p1 - p0) * t + p0;
+
+        },
+
+        Bernstein: function (n, i) {
+
+            var fc = TWEEN.Interpolation.Utils.Factorial;
+
+            return fc(n) / fc(i) / fc(n - i);
+
+        },
+
+        Factorial: (function () {
+
+            var a = [1];
+
+            return function (n) {
+
+                var s = 1;
+
+                if (a[n]) {
+                    return a[n];
+                }
+
+                for (var i = n; i > 1; i--) {
+                    s *= i;
+                }
+
+                a[n] = s;
+                return s;
+
+            };
+
+        })(),
+
+        CatmullRom: function (p0, p1, p2, p3, t) {
+
+            var v0 = (p2 - p0) * 0.5;
+            var v1 = (p3 - p1) * 0.5;
+            var t2 = t * t;
+            var t3 = t * t2;
+
+            return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+
+        }
+
+    }
+
+};
+
+// UMD (Universal Module Definition)
+(function (root) {
+
+    if (typeof define === 'function' && define.amd) {
+
+        // AMD
+        define([], function () {
+            return TWEEN;
+        });
+
+    } else if (typeof module !== 'undefined' && typeof exports === 'object') {
+
+        // Node.js
+        module.exports = TWEEN;
+
+    } else if (root !== undefined) {
+
+        // Global variable
+        root.TWEEN = TWEEN;
+
+    }
+
+})(this);
\ No newline at end of file
--- a/webhqchart.demo/demo/content/js/jquery.min.js
+++ b/webhqchart.demo/demo/content/js/jquery.min.js
--- a/webhqchart.demo/demo/content/js/phone11.tools.js
+++ b/webhqchart.demo/demo/content/js/phone11.tools.js
+var jsEditor;
+var Root = {};
+
+var Tools = {
+    init: function (defalutData) {
+        var _this = this;
+
+        _this.bindModular();
+        _this.setDefault(defalutData);
+    },
+    setDefault: function (defalutData) {
+        $('#tools_code').val(defalutData.script);
+        jsEditor = CodeMirror.fromTextArea($('#tools_code').get(0), {
+            mode: "javascript",
+            gutter: true,
+            lineNumbers: true
+        })
+        jsEditor.setSize('99.8%', 257);
+        jsEditor.gutter = true;
+
+        Root.top.indexName = defalutData.indexName;
+        Root.top.symbol = defalutData.symbol;
+
+        for (let i in defalutData.args) {
+            Root.table.list[i].name.value = defalutData.args[i].Name;
+            Root.table.list[i].min.value = 1;
+            Root.table.list[i].max.value = 100;
+            Root.table.list[i].value.value = defalutData.args[i].Value;
+        }
+
+        setTimeout(function () {
+            var $tradeDate = $("#txt_tradeDate");
+            if ($tradeDate.length > 0) {
+                $tradeDate.datepicker({
+                    language: 'zh-CN',
+                    autoclose: true,
+                    todayHighlight: true,
+                    format: "yyyy-mm-dd"
+                }).on('changeDate', function (el) {
+                    if (el.date != undefined) {
+                        Root.top.date = el.date.Format("yyyyMMdd");
+                    }
+                });
+
+                Root.top.date = Common.formatDate(defalutData.tradeDate);
+                $tradeDate.datepicker("setDate", Common.formatDate(defalutData.tradeDate));
+            }
+        }, 200);
+    },
+    bindModular: function () {
+        var _this = this;
+
+        Root.top = _this.getTop();
+        Root.table = _this.getTable();
+        Root.cache = _this.getCache();
+    },
+    getTop: function () {
+        return new Vue({
+            el: '#tools_top',
+            data: {
+                indexName: "",
+                symbol: "",
+                date: "",
+                changeIndex: 1,
+                isDebug: JS_EXECUTE_DEBUG_LOG
+            },
+            methods: {
+                execute: function () {
+                    var _this = this;
+
+                    jsChart.ChangeScriptIndex(parseInt(_this.changeIndex), { Name: _this.indexName, Script: jsEditor.doc.getValue(), Args: Root.table.getArgs(), "Modify": false, "Change": false });
+                },
+                change: function () {
+                    jsChart.ChangeSymbol(this.symbol);
+                },
+                changeDebug: function () {
+                    var _this = this;
+                    _this.isDebug = !_this.isDebug;
+
+                    JS_EXECUTE_DEBUG_LOG = _this.isDebug;
+                },
+                save: function () {
+                    var _this = this;
+
+                    var cacheValue = Root.cache.getValue();
+
+                    var hasIndex = -1;
+
+                    for (var i = 0; i < cacheValue.length; i++) {
+                        if (cacheValue[i].name == _this.indexName) {
+                            hasIndex = i;
+                            break;
+                        }
+                    }
+
+                    var data = {
+                        indexName: Root.top.indexName,
+                        code: jsEditor.doc.getValue(),
+                        args: Root.table.getValue()
+                    };
+
+                    if (hasIndex > -1 && confirm("【" + _this.indexName + "】已存在，是否覆盖？")) {
+                        cacheValue[hasIndex].value = data;
+                    } else {
+                        cacheValue.push({
+                            name: _this.indexName,
+                            value: data
+                        });
+                    }
+
+                    Root.cache.setValue(cacheValue);
+                },
+                rawDataDown: function () {
+                    var _this = this;
+
+                    window.open("https://opensourcecache.zealink.com/cache/minuteday/day/" + _this.date + "/" + _this.symbol + ".json");
+                }
+            },
+            watch: {
+                date: function (newValue, oldValue) {
+                    if (oldValue) {
+                        jsChart.ChangeTradeDate(parseInt(newValue));
+                    }
+                }
+            }
+        });
+    },
+    getTable: function () {
+        return new Vue({
+            el: '#tools_table',
+            data: {
+                list:[]
+            },
+            methods: {
+                initList: function () {
+                    var _this = this;
+                    var delfaultLength = 5;
+
+                    for (var i = 0; i < delfaultLength; i++) {
+                        _this.list.push({
+                            name: { value: "", isEdit: false },
+                            min: { value: "", isEdit: false },
+                            max: { value: "", isEdit: false },
+                            value: { value: "", isEdit: false },
+                        });
+                    }
+                },
+                openEdit: function (index, type) {
+                    var _this = this;
+
+                    _this.list[index][type].isEdit = true;
+                },
+                closeEdit: function (index, type) {
+                    var _this = this;
+
+                    if (_this.list[index][type].value == "") {
+                        _this.list[index][type].isEdit = true;
+                    }
+                    else {
+                        _this.list[index][type].isEdit = false;
+                    }
+                },
+                getArgs: function () {
+                    var _this =this;
+
+                    var args = [];
+
+                    for (var i = 0; i < _this.list.length; i++) {
+                        var name = _this.list[i].name.value,
+                            value = _this.list[i].value.value;
+
+                        if (!name || !value)
+                            continue;
+
+                        value = parseInt(value);
+
+                        args.push({
+                            Name: name,
+                            Value: value
+                        });
+                    }
+
+                    return args;
+                },
+                getValue: function () {
+                    return this.list;
+                },
+                setValue: function (list) {
+                    for (var i = 0; i < list.length; i++) {
+                        list[i].name.isEdit = false;
+                        list[i].min.isEdit = false;
+                        list[i].max.isEdit = false;
+                        list[i].value.isEdit = false;
+                    }
+
+                    this.list = list;
+                },
+                clear: function () {
+                    var _this = this;
+
+                    for (var i = 0; i < _this.list.length; i++) {
+                        if (!_this.list[i].name.value && !_this.list[i].value.value)
+                            continue;
+
+                        _this.list[i].name.value = "";
+                        _this.list[i].name.isEdit = true;
+
+                        _this.list[i].value.value = "";
+                        _this.list[i].value.isEdit = true;
+                    }
+                }
+            },
+            created: function () {
+                this.initList();
+            }
+        });
+    },
+    getCache: function () {
+        return new Vue({
+            el: '#tools_cache',
+            data: {
+                list: [],
+
+                activeIndex: -1,
+
+                cacheKye: "i_s_c"
+            },
+            methods: {
+                getList: function () {
+                    var _this = this;
+
+                    _this.list = _this.getValue();
+                },
+                getValue: function () {
+                    var _this = this;
+
+                    var cacheValue = localStorage[_this.cacheKye] || [];
+                    cacheValue = typeof cacheValue == "string" ? JSON.parse(cacheValue) : cacheValue;
+
+                    return cacheValue;
+                },
+                setValue: function (val) {
+                    var _this = this;
+
+                    localStorage[_this.cacheKye] = JSON.stringify(val);
+
+                    _this.getList();
+                },
+                select: function (index) {
+                    var _this = this;
+
+                    _this.activeIndex = index;
+
+                    var data = _this.getValue()[index].value;
+
+                    Root.top.indexName = data.indexName;
+                    jsEditor.setValue(data.code);
+                    Root.table.setValue(data.args);
+                },
+                _delete: function (index) {
+                    var _this = this;
+
+                    var list = _this.getValue();
+
+                    if (confirm("是否删除【" + list[index].name + "】")) {
+                        list.splice(index, 1);
+
+                        _this.setValue(list);
+                    }
+                }
+            },
+            created: function () {
+                this.getList();
+            }
+        });
+    }
+}
+
+var Common = {
+    formatDate: function (date) {
+        if (!date) return "";
+
+        date = date + "";
+        if (date.length != 8)
+            return date;
+
+        return new Date(date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8));
+    }
+}
+
+Date.prototype.Format = function (fmt) { //author: meizz 
+    var o = {
+        "M+": this.getMonth() + 1, //月份 
+        "d+": this.getDate(), //日 
+        "h+": this.getHours(), //小时 
+        "m+": this.getMinutes(), //分 
+        "s+": this.getSeconds(), //秒 
+        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
+        "S": this.getMilliseconds() //毫秒 
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}
\ No newline at end of file
--- a/webhqchart.demo/demo/content/js/phone12.tools.js
+++ b/webhqchart.demo/demo/content/js/phone12.tools.js
--- a/webhqchart.demo/demo/content/js/phone7.tools.js
+++ b/webhqchart.demo/demo/content/js/phone7.tools.js
+var jsEditor;
+var Root = {};
+
+var Tools = {
+    init: function (defalutData) {
+        var _this = this;
+
+        _this.bindEvent();
+        _this.bindModular();
+        _this.setDefault(defalutData);
+    },
+    setDefault: function (defalutData) {
+        $('#tools_code').val(defalutData.script);
+        jsEditor = CodeMirror.fromTextArea($('#tools_code').get(0), {
+            mode: "javascript",
+            gutter: true,
+            lineNumbers: true
+        })
+        jsEditor.setSize('99.8%', 257);
+        jsEditor.gutter = true;
+
+        Root.top.indexName = defalutData.indexName;
+        Root.top.symbol = defalutData.symbol;
+
+        for (let i in defalutData.args) {
+            Root.table.list[i].name.value = defalutData.args[i].Name;
+            Root.table.list[i].min.value = 1;
+            Root.table.list[i].max.value = 100;
+            Root.table.list[i].value.value = defalutData.args[i].Value;
+        }
+
+        setTimeout(function () {
+            var $tradeDate = $("#txt_tradeDate");
+            if ($tradeDate.length > 0) {
+                $tradeDate.datepicker({
+                    language: 'zh-CN',
+                    autoclose: true,
+                    todayHighlight: true,
+                    format: "yyyy-mm-dd"
+                }).on('changeDate', function (el) {
+                    if (el.date != undefined) {
+                        jsChart.ChangeTradeDate(parseInt(el.date.Format("yyyyMMdd")));
+                    }
+                });
+
+                $tradeDate.datepicker("setDate", Common.formatDate(defalutData.tradeDate));
+            }
+        }, 200);
+    },
+    bindEvent: function () {
+        
+    },
+    bindModular: function () {
+        var _this = this;
+
+        Root.top = _this.getTop();
+        Root.table = _this.getTable();
+        Root.cache = _this.getCache();
+    },
+    getTop: function () {
+        return new Vue({
+            el: '#tools_top',
+            data: {
+                indexName: "",
+                symbol: "",
+                changeIndex: 1,
+                isDebug: JS_EXECUTE_DEBUG_LOG
+            },
+            methods: {
+                execute: function () {
+                    var _this = this;
+
+                    jsChart.ChangeScriptIndex(parseInt(_this.changeIndex), { Name: _this.indexName, Script: jsEditor.doc.getValue(), Args: Root.table.getArgs(), "Modify": false, "Change": false });
+                },
+                change: function () {
+                    jsChart.ChangeSymbol(this.symbol);
+                },
+                changeDebug: function () {
+                    var _this = this;
+                    _this.isDebug = !_this.isDebug;
+
+                    JS_EXECUTE_DEBUG_LOG = _this.isDebug;
+                },
+                save: function () {
+                    var _this = this;
+
+                    var cacheValue = Root.cache.getValue();
+
+                    var hasIndex = -1;
+
+                    for (var i = 0; i < cacheValue.length; i++) {
+                        if (cacheValue[i].name == _this.indexName) {
+                            hasIndex = i;
+                            break;
+                        }
+                    }
+
+                    var data = {
+                        indexName: Root.top.indexName,
+                        code: jsEditor.doc.getValue(),
+                        args: Root.table.getValue()
+                    };
+
+                    if (hasIndex > -1 && confirm("【" + _this.indexName + "】已存在，是否覆盖？")) {
+                        cacheValue[hasIndex].value = data;
+                    } else {
+                        cacheValue.push({
+                            name: _this.indexName,
+                            value: data
+                        });
+                    }
+
+                    Root.cache.setValue(cacheValue);
+                }
+            }
+        });
+    },
+    getTable: function () {
+        return new Vue({
+            el: '#tools_table',
+            data: {
+                list:[]
+            },
+            methods: {
+                initList: function () {
+                    var _this = this;
+                    var delfaultLength = 5;
+
+                    for (var i = 0; i < delfaultLength; i++) {
+                        _this.list.push({
+                            name: { value: "", isEdit: false },
+                            min: { value: "", isEdit: false },
+                            max: { value: "", isEdit: false },
+                            value: { value: "", isEdit: false },
+                        });
+                    }
+                },
+                openEdit: function (index, type) {
+                    var _this = this;
+
+                    _this.list[index][type].isEdit = true;
+                },
+                closeEdit: function (index, type) {
+                    var _this = this;
+
+                    if (_this.list[index][type].value == "") {
+                        _this.list[index][type].isEdit = true;
+                    }
+                    else {
+                        _this.list[index][type].isEdit = false;
+                    }
+                },
+                getArgs: function () {
+                    var _this =this;
+
+                    var args = [];
+
+                    for (var i = 0; i < _this.list.length; i++) {
+                        var name = _this.list[i].name.value,
+                            value = _this.list[i].value.value;
+
+                        if (!name || !value)
+                            continue;
+
+                        value = parseInt(value);
+
+                        args.push({
+                            Name: name,
+                            Value: value
+                        });
+                    }
+
+                    return args;
+                },
+                getValue: function () {
+                    return this.list;
+                },
+                setValue: function (list) {
+                    for (var i = 0; i < list.length; i++) {
+                        list[i].name.isEdit = false;
+                        list[i].min.isEdit = false;
+                        list[i].max.isEdit = false;
+                        list[i].value.isEdit = false;
+                    }
+
+                    this.list = list;
+                },
+                clear: function () {
+                    var _this = this;
+
+                    for (var i = 0; i < _this.list.length; i++) {
+                        if (!_this.list[i].name.value && !_this.list[i].value.value)
+                            continue;
+
+                        _this.list[i].name.value = "";
+                        _this.list[i].name.isEdit = true;
+
+                        _this.list[i].value.value = "";
+                        _this.list[i].value.isEdit = true;
+                    }
+                }
+            },
+            created: function () {
+                this.initList();
+            }
+        });
+    },
+    getCache: function () {
+        return new Vue({
+            el: '#tools_cache',
+            data: {
+                list: [],
+
+                activeIndex: -1,
+
+                cacheKye: "i_s_c"
+            },
+            methods: {
+                getList: function () {
+                    var _this = this;
+
+                    _this.list = _this.getValue();
+                },
+                getValue: function () {
+                    var _this = this;
+
+                    var cacheValue = localStorage[_this.cacheKye] || [];
+                    cacheValue = typeof cacheValue == "string" ? JSON.parse(cacheValue) : cacheValue;
+
+                    return cacheValue;
+                },
+                setValue: function (val) {
+                    var _this = this;
+
+                    localStorage[_this.cacheKye] = JSON.stringify(val);
+
+                    _this.getList();
+                },
+                select: function (index) {
+                    var _this = this;
+
+                    _this.activeIndex = index;
+
+                    var data = _this.getValue()[index].value;
+
+                    Root.top.indexName = data.indexName;
+                    jsEditor.setValue(data.code);
+                    Root.table.setValue(data.args);
+                },
+                _delete: function (index) {
+                    var _this = this;
+
+                    var list = _this.getValue();
+
+                    if (confirm("是否删除【" + list[index].name + "】")) {
+                        list.splice(index, 1);
+
+                        _this.setValue(list);
+                    }
+                }
+            },
+            created: function () {
+                this.getList();
+            }
+        });
+    }
+}
+
+var Common = {
+    formatDate: function (date) {
+        if (!date) return "";
+
+        date = date + "";
+        if (date.length != 8)
+            return date;
+
+        return new Date(date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8));
+    }
+}
+
+Date.prototype.Format = function (fmt) { //author: meizz 
+    var o = {
+        "M+": this.getMonth() + 1, //月份 
+        "d+": this.getDate(), //日 
+        "h+": this.getHours(), //小时 
+        "m+": this.getMinutes(), //分 
+        "s+": this.getSeconds(), //秒 
+        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
+        "S": this.getMilliseconds() //毫秒 
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}
\ No newline at end of file
--- a/webhqchart.demo/demo/content/js/tools.js
+++ b/webhqchart.demo/demo/content/js/tools.js
--- a/webhqchart.demo/demo/content/js/vue-resource.js
+++ b/webhqchart.demo/demo/content/js/vue-resource.js
--- a/webhqchart.demo/demo/content/js/vue.js
+++ b/webhqchart.demo/demo/content/js/vue.js
--- a/webhqchart.demo/demo/phone.html
+++ b/webhqchart.demo/demo/phone.html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">  
+<head>  
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
+<title>手机H5行情</title>  
+    <link rel="stylesheet" href="content/css/tools.css" />
+    <link rel="stylesheet" href="content/font/iconfont.css" />
+</head>  
+<body>
+
+    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>
+
+    <script type="text/javascript" src="../jscommon/umychart.js"></script>
+    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
+    <script>
+        function getURLParams(name) 
+        {
+        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        	var r = window.location.search.substr(1).match(reg);
+        	if (r != null) return decodeURI(r[2]);
+        	return null;
+        }
+        
+        
+        $(window).resize(resizeCanvas);
+        
+        function resizeCanvas()
+        {
+            var height= $(window).height();
+            var width = $(window).width();
+            var divKline=document.getElementById('kline');
+            divKline.style.width=width+'px';
+            divKline.style.height=height+'px';
+            divKline.JSChart.OnSize();
+        }
+        
+        
+        $(function ()
+        {
+            var symbol=getURLParams('symbol');
+            if (symbol==null) symbol='600000.sh';
+        
+            var index=getURLParams('index');        //指标1
+            if (index==null) index='飞龙四式';
+        
+            var index2=getURLParams('index2');      //指标2
+            //if (index2==null) index2='指数热度';
+            if (index2==null) index2='VOL';
+        
+            var index3=getURLParams('index3');      //指标3
+        
+            var aryIndex=new Array();
+            aryIndex.push({"Index":index,"Modify":false,"Change":false});
+            aryIndex.push({"Index":index2,"Modify":false,"Change":false});
+            if (index3) aryIndex.push({"Index":index3,"Modify":false,"Change":false});
+        
+            // 创建股票K线图
+            var jsChart=JSChart.Init(document.getElementById('kline'));
+        
+            var option=
+                {
+                    Type:'历史K线图',
+                    Windows:aryIndex, //窗口指标
+                    Symbol:symbol,
+                    IsAutoUpate:true,       //是自动更新数据
+        
+                    Tool:                   //工具条
+                        [
+                            {Name:"周期"},
+                            {Name:"复权"}
+                        ],
+        
+                    IsShowRightMenu:true,          //右键菜单
+                    IsShowCorssCursorInfo:false,    //是否显示十字光标的刻度信息
+        
+                    KLine:
+                        {
+                            DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
+                            Right:1,                    //复权 0 不复权 1 前复权 2 后复权
+                            Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
+                            MaxReqeustDataCount:1000,   //数据个数
+                            PageSize:50,               //一屏显示多少数据
+                            IndexTreeApiUrl:"https://opensourcecache.zealink.com/cache/hqh5/index/commonindextree.json",        //指标树下载地址
+                            //Info:["业绩预告","公告","互动易","调研","大宗交易"],       //信息地雷
+                            //Info:["业绩预告","公告"],          //信息地雷
+                            KLineDoubleClick:true,              //双击分钟走势图
+                            IsShowTooltip:true                 //是否显示K线提示信息
+                        },
+        
+                    KLineTitle: //标题设置
+                        {
+                            IsShowName:false,       //不显示股票名称
+                            IsShowSettingInfo:false //不显示周期/复权
+                        },
+        
+                    Border: //边框
+                        {
+                            Left:1,    //左边间距
+                            Right:1     //右边间距
+                        },
+                    
+                    Frame:  //子框架设置
+                    [
+                        {SplitCount:3,StringFormat:1},
+                        {SplitCount:3,StringFormat:1}
+                    ]
+                }
+        
+            jsChart.SetOption(option);
+            //jsChart.LockIndex('飞龙四式',unlockIndex);
+        
+            resizeCanvas();
+        
+            //setTimeout(() => { jsChart.ChangeSymbol("000001.sz");}, 20000);
+        
+        })
+        
+        function unlockIndex(indexName)
+        {
+            console.log(indexName);
+        }
+    </script>  
+</body>  
+</html>
\ No newline at end of file
--- a/webhqchart.demo/demo/phone10.html
+++ b/webhqchart.demo/demo/phone10.html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">  
+<head>  
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
+<title>通达信脚本网页版(走势图横屏)</title>  
+    <link rel="stylesheet" href="content/css/tools.css" />
+    <link rel="stylesheet" href="content/font/iconfont.css" />
+    <link rel="stylesheet" href="plugins/code_color/codemirror.css" />
+    <link rel="stylesheet" href="content/css/phone7.tools.css" />
+</head>  
+<body>
+
+    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>
+    <div class="tools">
+        <div id="tools_top" class="top">
+            <span>指标名称：</span>
+            <input class="input" v-model="indexName" />
+            <select class="changeIndex" v-model="changeIndex">
+                <option value="1">副图</option>
+                <option value="0">主图</option>
+            </select>
+            <button class="toolsButton" v-on:click="execute()">执行</button>
+            <button class="toolsButton" onclick="Root.table.clear()">清空参数</button>
+
+            <span>股票代码：</span>
+            <input class="input" v-model="symbol" />
+            <button class="toolsButton" v-on:click="change()">切换股票</button>
+
+            <label v-on:click="changeDebug()">
+                <input type="checkbox" v-model="isDebug" />
+                <span style="margin-top:-2px;">输出调试信息</span>
+            </label>
+
+            <button class="toolsButton" v-on:click="save()">保存</button>
+        </div>
+        <div class="table" id="tools_table">
+            <table cellpadding="0" cellspacing="0">
+                <thead>
+                    <tr>
+                        <th align="left">参数</th>
+                        <th align="left">最小</th>
+                        <th align="left">最大</th>
+                        <th align="left">缺省</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item, index) in list">
+                        <td v-on:click="closeEdit(index,'name')">
+                            <input v-if="item.name.isEdit" v-model="item.name.value" v-on:click.stop="" />
+                            <span v-else=v-else v-on:click.stop="openEdit(index,'name')">{{item.name.value}}</span>
+                        </td>
+                        <td v-on:click="closeEdit(index,'min')">
+                            <input v-if="item.min.isEdit" v-model="item.min.value" v-on:click.stop="" />
+                            <span v-else=v-else v-on:click.stop="openEdit(index,'min')">{{item.min.value}}</span>
+                        </td>
+                        <td v-on:click="closeEdit(index,'max')">
+                            <input v-if="item.max.isEdit" v-model="item.max.value" v-on:click.stop="" />
+                            <span v-else=v-else v-on:click.stop="openEdit(index,'max')">{{item.max.value}}</span>
+                        </td>
+                        <td v-on:click="closeEdit(index,'value')">
+                            <input v-if="item.value.isEdit" v-model="item.value.value" v-on:click.stop="" />
+                            <span v-else=v-else v-on:click.stop="openEdit(index,'value')">{{item.value.value}}</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="code">
+            <textarea id="tools_code"></textarea>
+        </div>
+        <div class="cache" id="tools_cache">
+            <ul>
+                <li v-bind:class="{ active: index == activeIndex }" v-for="(item, index) in list" v-on:click="select(index)">
+                    {{item.name}}
+                    <span v-on:click.stop="_delete(index)">删除</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+
+    <script type="text/javascript" src="../jscommon/umychart.js"></script>
+    <script type="text/javascript" src="../jscommon/umychart.complier.js"></script>
+    <script type="text/javascript" src="../jscommon/umychart.index.data.js"></script>
+    
+    
+    <script type="text/javascript" src="plugins/code_color/codemirror.js"></script>
+    <script type="text/javascript" src="plugins/code_color/javascript.js"></script>
+    
+    <script type="text/javascript" src="content/js/vue.js"></script>
+    <script type="text/javascript" src="content/js/phone7.tools.js"></script>
+    
+    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
+    <script>
+    
+        var jsChart;
+        JS_EXECUTE_DEBUG_LOG=false;
+    
+        function getURLParams(name) 
+        {
+        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        	var r = window.location.search.substr(1).match(reg);
+        	if (r != null) return decodeURI(r[2]);
+        	return null;
+        }
+        
+        $(window).resize(resizeCanvas);
+        
+        function resizeCanvas()
+        {
+            var height= $(window).height()-300; //300高度给指标编辑器
+            var width = $(window).width();
+            var divKline=document.getElementById('kline');
+            divKline.style.width=500+'px';
+            divKline.style.height=height+'px';
+            divKline.JSChart.OnSize();
+        }
+        
+        $(function ()
+        {
+            var symbol=getURLParams('symbol');
+            if (symbol==null) symbol='600984.sh';
+        
+            var aryIndex=new Array();
+        
+            var index=getURLParams('index');        //指标1
+            if (index==null) index='MA';
+            aryIndex.push({"Index":index,"Modify":true,"Change":true});
+            aryIndex.push({"Index":"MACD","Modify":true,"Change":true});
+        
+        /*
+            var index2=getURLParams('index2');      //指标2
+            //if (index2==null) index2='指数热度';
+            if (index2==null) index2='能图-资金分析';
+        */
+            let code='VAR1:MA(CLOSE,25),COLORYELLOW;VAR2:MA(CLOSE,40);'
+            let code2='MTR:=EXPMEMA(MAX(MAX(HIGH-LOW,ABS(HIGH-REF(CLOSE,1))),ABS(REF(CLOSE,1)-LOW)),N);\n\
+        HD :=HIGH-REF(HIGH,1);\n\
+        LD :=REF(LOW,1)-LOW;\n\
+        DMP:=EXPMEMA(IF(HD>0&&HD>LD,HD,0),N);\n\
+        DMM:=EXPMEMA(IF(LD>0&&LD>HD,LD,0),N);\n\
+        PDI: DMP*100/MTR;\n\
+        MDI: DMM*100/MTR,COLORCYAN;\n\
+        ADX: EXPMEMA(ABS(MDI-PDI)/(MDI+PDI)*100,MM),COLORFFB5C5;\n\
+        ADXR:EXPMEMA(ADX,MM),COLORYELLOW,LINETHICK2;';
+        
+            var jsIndexData=new JSIndexScript();
+            let testIndex=jsIndexData.Get('UOS');
+            console.log(testIndex);
+        
+            //指标3
+            let scriptIndex={Name:testIndex.Name, Script:testIndex.Script, Args:testIndex.Args, "Modify":true,"Change":true};
+            //aryIndex.push(scriptIndex);
+        
+            // 创建股票K线图
+            jsChart = JSChart.Init(document.getElementById('kline'));
+        
+            var option=
+            {
+                Type:'分钟走势图横屏',
+                Windows:  aryIndex,     //窗口指标
+                Symbol:symbol,          //股票代码
+                IsAutoUpate:true,       //是自动更新数据
+        
+                IsShowRightMenu:true,   //右键菜单
+                IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
+        
+                Border: //边框
+                    {
+                        Left:45,    //左边间距
+                        Right:50,     //右边间距
+                        Top:80,
+                        Bottom:80
+                    },
+                Frame:  //子框架设置
+                    [
+                        {SplitCount:5,StringFormat:1},
+                        {SplitCount:3,StringFormat:1}
+                    ]
+            }
+        
+            jsChart.SetOption(option);
+            //jsChart.LockIndex('飞龙四式',unlockIndex);
+        
+            resizeCanvas();
+        
+           
+            Tools.init({
+                script: scriptIndex.Script,
+                indexName: scriptIndex.Name,
+                args: scriptIndex.Args,
+                symbol: option.Symbol
+            });
+        })
+        
+        function unlockIndex(indexName)
+        {
+            console.log(indexName);
+        }
+        
+        function ComplierError(error)
+        {
+            alert(error);
+            console.log('[ComplierError]', error);
+        }
+    </script>  
+</body>  
+</html>
\ No newline at end of file
--- a/webhqchart.demo/demo/phone11.html
+++ b/webhqchart.demo/demo/phone11.html
--- a/webhqchart.demo/demo/phone12.html
+++ b/webhqchart.demo/demo/phone12.html
--- a/webhqchart.demo/demo/phone13.html
+++ b/webhqchart.demo/demo/phone13.html
--- a/webhqchart.demo/demo/phone2.html
+++ b/webhqchart.demo/demo/phone2.html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">  
+<head>  
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
+<title>手机H5行情</title>  
+    <link rel="stylesheet" href="content/css/tools.css" />
+    <link rel="stylesheet" href="content/font/iconfont.css" />
+</head>  
+<body>
+
+    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>
+
+    <script type="text/javascript" src="../jscommon/umychart.js"></script>
+    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
+    <script>
+        function getURLParams(name) 
+        {
+        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        	var r = window.location.search.substr(1).match(reg);
+        	if (r != null) return decodeURI(r[2]);
+        	return null;
+        }
+
+        $(window).resize(resizeCanvas);
+        
+        function resizeCanvas()
+        {
+            var height= $(window).height();
+            var width = $(window).width();
+            var divKline=document.getElementById('kline');
+            divKline.style.width=width+'px';
+            divKline.style.height=height+'px';
+            divKline.JSChart.OnSize();
+        }
+        
+        
+        $(function ()
+        {
+            var symbol=getURLParams('symbol');
+            if (symbol==null) symbol='600000.sh';
+        
+            var index=getURLParams('index');        //指标3
+            var aryIndex=new Array();
+            if (index) aryIndex.push({"Index":index});
+        
+            // 创建股票K线图
+            var jsChart=JSChart.Init(document.getElementById('kline'));
+        
+            var option=
+                {
+                    Type:'分钟走势图',
+                    Windows:  aryIndex,     //窗口指标
+                    Symbol:symbol,          //股票代码
+                    IsAutoUpate:true,       //是自动更新数据
+        
+                    IsShowRightMenu:true,   //右键菜单
+                    IsShowCorssCursorInfo:false,    //是否显示十字光标的刻度信息
+        
+                    Border: //边框
+                        {
+                            Left:45,    //左边间距
+                            Right:50,     //右边间距
+                            Top:20
+                        },
+                    Frame:  //子框架设置
+                        [
+                            {SplitCount:5,StringFormat:1},
+                            {SplitCount:3,StringFormat:1}
+                        ]
+                }
+        
+            jsChart.SetOption(option);
+        
+            resizeCanvas();
+        })
+    </script>  
+</body>  
+</html>
\ No newline at end of file
--- a/webhqchart.demo/demo/phone3.html
+++ b/webhqchart.demo/demo/phone3.html
--- a/webhqchart.demo/demo/phone4.html
+++ b/webhqchart.demo/demo/phone4.html
--- a/webhqchart.demo/demo/phone5.html
+++ b/webhqchart.demo/demo/phone5.html
--- a/webhqchart.demo/demo/phone7.html
+++ b/webhqchart.demo/demo/phone7.html
--- a/webhqchart.demo/demo/phone8.html
+++ b/webhqchart.demo/demo/phone8.html
--- a/webhqchart.demo/demo/phone9.html
+++ b/webhqchart.demo/demo/phone9.html
--- a/webhqchart.demo/demo/plugins/bootstrap/bootstrap.min.css
+++ b/webhqchart.demo/demo/plugins/bootstrap/bootstrap.min.css
--- a/webhqchart.demo/demo/plugins/bootstrap/bootstrap.min.js
+++ b/webhqchart.demo/demo/plugins/bootstrap/bootstrap.min.js
--- a/webhqchart.demo/demo/plugins/bootstrap/custom.min.css
+++ b/webhqchart.demo/demo/plugins/bootstrap/custom.min.css
--- a/webhqchart.demo/demo/plugins/code_color/codemirror.css
+++ b/webhqchart.demo/demo/plugins/code_color/codemirror.css
--- a/webhqchart.demo/demo/plugins/code_color/codemirror.js
+++ b/webhqchart.demo/demo/plugins/code_color/codemirror.js
--- a/webhqchart.demo/demo/plugins/code_color/javascript.js
+++ b/webhqchart.demo/demo/plugins/code_color/javascript.js
--- a/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker.js
+++ b/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker.js
--- a/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker.zh-CN.js
+++ b/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker.zh-CN.js
+/**
+ * Simplified Chinese translation for bootstrap-datepicker
+ * Yuan Cheung <advanimal@gmail.com>
+ */
+;(function($){
+	$.fn.datepicker.dates['zh-CN'] = {
+		days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+		daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+		daysMin:  ["日", "一", "二", "三", "四", "五", "六"],
+		months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
+		monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+		today: "今日",
+		clear: "清除",
+		format: "yyyy年mm月dd日",
+		titleFormat: "yyyy年mm月",
+		weekStart: 1
+	};
+}(jQuery));
--- a/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker3.min.css
+++ b/webhqchart.demo/demo/plugins/datepicker/bootstrap-datepicker3.min.css
--- a/webhqchart.demo/demo/plugins/layer3.0/layer.js
+++ b/webhqchart.demo/demo/plugins/layer3.0/layer.js
--- a/webhqchart.demo/demo/plugins/layer3.0/mobile/layer.js
+++ b/webhqchart.demo/demo/plugins/layer3.0/mobile/layer.js
+/*! layer mobile-v2.0.0 Web弹层组件 MIT License  http://layer.layui.com/mobile  By 贤心 */
+ ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
\ No newline at end of file
--- a/webhqchart.demo/demo/plugins/layer3.0/mobile/need/layer.css
+++ b/webhqchart.demo/demo/plugins/layer3.0/mobile/need/layer.css
+.layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px}
\ No newline at end of file
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/icon-ext.png
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/icon-ext.png
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/icon.png
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/icon.png
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/layer.css
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/layer.css
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-0.gif
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-0.gif
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-1.gif
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-1.gif
--- a/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-2.gif
+++ b/webhqchart.demo/demo/plugins/layer3.0/skin/default/loading-2.gif