Accueil Explorer Aide
Connexion
other
/
onepage
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: 315e30d8b2
Branches Tags
onepage
/
kissy
/
public
/
echarts
/
doc
/
example
/
themeDesigner.html

themeDesigner.html 41 KB
Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <meta name="description" content="ECharts">
    8. 

  8.     <meta name="author" content="kener.linfeng@gmail.com">
    9. 

  9.     <title>ECharts · Example</title>
    10. 

  10. 

  11.     <link rel="shortcut icon" href="../asset/ico/favicon.png">
    12. 

  12. 

  13.     <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
    14. 

  14.     <link href="../asset/css/bootstrap.css" rel="stylesheet">
    15. 

  15.     <link href="../asset/css/carousel.css" rel="stylesheet">
    16. 

  16.     <link href="../asset/css/echartsHome.css" rel="stylesheet">
    17. 

  17.     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    18. 

  18.     <!--[if lt IE 9]>
    19. 

  19.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    20. 

  20.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    21. 

  21.     <![endif]-->
    22. 

  22. 

  23.     <script src="./www/js/echarts.js"></script>
    24. 

  24.     <script src="../asset/js/codemirror.js"></script>
    25. 

  25.     <script src="../asset/js/javascript.js"></script>
    26. 

  26. 

  27.     <link href="../asset/css/codemirror.css" rel="stylesheet">
    28. 

  28.     <link href="../asset/css/monokai.css" rel="stylesheet">
    29. 

  29.     <style type="text/css">
    30. 

  30.         .doc-image {
    31. 

  31.             float:left;
    32. 

  32.         }
    33. 

  33.         .doc-image h3 {
    34. 

  34.             text-align:center;
    35. 

  35.             background-color:#eee;
    36. 

  36.         }
    37. 

  37.         #doc-continer {
    38. 

  38.             text-align:center;
    39. 

  39.             margin-top:-10px;
    40. 

  40.             transition: height 1s;
    41. 

  41.             -moz-transition: height 1s; /* Firefox 4 */
    42. 

  42.             -webkit-transition: height 1s; /* Safari and Chrome */
    43. 

  43.             -o-transition: height 1s; /* Opera */
    44. 

  44.             overflow:hidden;
    45. 

  45.         }
    46. 

  46.         #doc-switch {
    47. 

  47.             font-weight:bolder;
    48. 

  48.         }
    49. 

  49.         .CodeMirror {
    50. 

  50.             height: 2270px;
    51. 

  51.         }
    52. 

  52.         .main-graphic {
    53. 

  53.             height: 1800px;
    54. 

  54.             overflow: hidden;
    55. 

  55.             padding : 10px;
    56. 

  56.             margin-bottom: 10px;
    57. 

  57.             border: 1px solid #e3e3e3;
    58. 

  58.             -webkit-border-radius: 4px;
    59. 

  59.                -moz-border-radius: 4px;
    60. 

  60.                     border-radius: 4px;
    61. 

  61.             -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    62. 

  62.                -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    63. 

  63.                     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    64. 

  64.         }
    65. 

  65.         .chart {
    66. 

  66.             height: 300px;
    67. 

  67.             margin-bottom:10px;
    68. 

  68.         }
    69. 

  69.         #sidebar-code .btn-primary {
    70. 

  70.             width:60%;
    71. 

  71.         }
    72. 

  72.         #sidebar-code .btn-info {
    73. 

  73.             width:38%;
    74. 

  74.             float:right;
    75. 

  75.         }
    76. 

  76.     </style>
    77. 

  77. </head>
    78. 

  78. 

  79. <body>
    80. 

  80.     <!-- Fixed navbar -->
    81. 

  81.     <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
    82. 

  82. 

  83. 

  84.     <div class="container-fluid">
    85. 

  85.         <div id="doc-continer" class="doc-open" style="margin-top:20px;">
    86. 

  86.             <a href='#' onclick="docSwitch()" id="doc-switch">- 文档图示</a>
    87. 

  87.             <div class="row-fluid">
    88. 

  88.                 <div class='doc-image col-md-4'>
    89. 

  89.                     <h3><a href="../doc.html#Title" target="_blank">title（标题）</a></h3>
    90. 

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

  91.                 </div>
    92. 

  92.                 <div class='doc-image col-md-4'>
    93. 

  93.                     <h3><a href="../doc.html#Toolbox" target="_blank">toolbox（工具箱）</a></h3>
    94. 

  94.                     <p><img src="../asset/img/doc/toolbox.png" title="" alt="工具箱"/></P>
    95. 

  95.                 </div>
    96. 

  96.                 <div class='doc-image col-md-4'>
    97. 

  97.                     <h3><a href="../doc.html#Tooltip" target="_blank">tooltip（提示）</a></h3>
    98. 

  98.                     <td><img src="../asset/img/doc/tooltip2.jpg" title="" alt="提示"/></td>
    99. 

  99.                 </div>
    100. 

  100.             </div>
    101. 

  101.             <div class="row-fluid">
    102. 

  102.                 <div class='doc-image col-md-6'>
    103. 

  103.                     <h3><a href="../doc.html#Legend" target="_blank">legend（图例）</a></h3>
    104. 

  104.                     <p><img src="../asset/img/doc/legend.png" title="" alt="图例"/></p>
    105. 

  105.                 </div>
    106. 

  106.                 <div class='doc-image col-md-6'>
    107. 

  107.                     <h3><a href="../doc.html#DataZoom" target="_blank">dataZoom（数据区域缩放）</a></h3>
    108. 

  108.                     <p><img src="../asset/img/doc/dataZoom.png" title="" alt="数据区域缩放"/></P>
    109. 

  109.                 </div>
    110. 

  110.             </div>
    111. 

  111.             <div class="row-fluid">
    112. 

  112.                 <div class='doc-image col-md-4'>
    113. 

  113.                     <h3><a href="../doc.html#DataRange" target="_blank">dataRange（值域）</a></h3>
    114. 

  114.                     <p><img src="../asset/img/doc/dataRange.png" title="" alt="值域"/></P>
    115. 

  115.                 </div>
    116. 

  116.                 
    117. 

  117.                 <div class='doc-image col-md-4'>
    118. 

  118.                     <h3><a href="../doc.html#Grid" target="_blank">grid（绘图网格）</a></h3>
    119. 

  119.                     <p><img src="../asset/img/doc/grid.jpg" title="" alt="绘图网格"/></P>
    120. 

  120.                 </div>
    121. 

  121.                 <div class='doc-image col-md-4'>
    122. 

  122.                     <h3><a href="../doc.html#Axis" target="_blank">axis（坐标轴）</a></h3>
    123. 

  123.                     <p><img src="../asset/img/doc/axisDetail.png" title="" alt="axisDetail"/></P>
    124. 

  124.                 </div>
    125. 

  125.             </div>
    126. 

  126.             <div class="row-fluid">
    127. 

  127.                 <div class='doc-image col-md-4'>
    128. 

  128.                     <h3><a href="../example/line.html" target="_blank">line（折线图）</a></h3>
    129. 

  129.                     <p><img src="../asset/img/doc/lineTheme.png" title="" alt="折线图"/></P>
    130. 

  130.                 </div>
    131. 

  131.                 <div class='doc-image col-md-4'>
    132. 

  132.                     <h3><a href="../example/bar.html" target="_blank">bar（柱形图）</a></h3>
    133. 

  133.                     <p><img src="../asset/img/doc/barTheme.png" title="" alt="柱形图"/></P>
    134. 

  134.                 </div>
    135. 

  135.                 <div class='doc-image col-md-4'>
    136. 

  136.                     <h3><a href="../example/scatter.html" target="_blank">scatter（散点图）</a></h3>
    137. 

  137.                     <p><img src="../asset/img/doc/scatterTheme.png" title="" alt="散点图"/></P>
    138. 

  138.                 </div>
    139. 

  139.             </div>
    140. 

  140.             <div class="row-fluid">
    141. 

  141.                 <div class='doc-image col-md-4'>
    142. 

  142.                     <h3><a href="../example/k.html" target="_blank">k（K线图）</a></h3>
    143. 

  143.                     <p><img src="../asset/img/doc/kTheme.png" title="" alt="K线图"/></P>
    144. 

  144.                 </div>
    145. 

  145.                 <div class='doc-image col-md-4'>
    146. 

  146.                     <h3><a href="../example/pie.html" target="_blank">pie（饼图）</a></h3>
    147. 

  147.                     <p><img src="../asset/img/doc/pieTheme.png" title="" alt="饼图"/></P>
    148. 

  148.                 </div>
    149. 

  149.                 <div class='doc-image col-md-4'>
    150. 

  150.                     <h3><a href="../example/radar.html" target="_blank">k（雷达图）</a></h3>
    151. 

  151.                     <p><img src="../asset/img/doc/radarTheme.png" title="" alt="雷达图"/></P>
    152. 

  152.                 </div>
    153. 

  153.             </div>
    154. 

  154.             <div class="row-fluid">
    155. 

  155.                 <div class='doc-image col-md-4'>
    156. 

  156.                     <h3><a href="../example/chord.html" target="_blank">chord（和弦图）</a></h3>
    157. 

  157.                     <p><img src="../asset/img/doc/chordTheme.png" title="" alt="和弦图"/></P>
    158. 

  158.                 </div>
    159. 

  159.                 <div class='doc-image col-md-4'>
    160. 

  160.                     <h3><a href="../example/force.html" target="_blank">force（力导向布局图）</a></h3>
    161. 

  161.                     <p><img src="../asset/img/doc/forceTheme.png" title="" alt="力导向布局图"/></P>
    162. 

  162.                 </div>
    163. 

  163.                 <div class='doc-image col-md-4'>
    164. 

  164.                     <h3><a href="../example/map.html" target="_blank">map（地图）</a></h3>
    165. 

  165.                     <p><img src="../asset/img/doc/mapTheme.png" title="" alt="地图"/></P>
    166. 

  166.                 </div>
    167. 

  167.             </div>
    168. 

  168.         </div>
    169. 

  169.         <a name='refresh' href="#" style="display:inline-block;padding-top: 50px;"> </a>
    170. 

  170.         <div class="row-fluid example">
    171. 

  171.             <div id="sidebar-code" class="col-md-4">
    172. 

  172.               <div style="margin-bottom:10px">
    173. 

  173.                 <button class="btn btn-large btn-primary" type="button" onclick="refresh(true)">刷新</button>
    174. 

  174.                 <button class="btn btn-large btn-info" type="button" onclick="saveAsImage()">保存图片</button>
    175. 

  175.               </div>
    176. 

  176.               <div class="well sidebar-nav">
    177. 

  177.                 <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
    178. 

  178.                 <textarea id="code" name="code">
    179. 

  179. theme = {
    180. 

  180.     // 全图默认背景
    181. 

  181.     // backgroundColor: 'rgba(0,0,0,0)',
    182. 

  182.     
    183. 

  183.     // 默认色板
    184. 

  184.     color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
    185. 

  185.             '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
    186. 

  186.             '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
    187. 

  187.             '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
    188. 

  188. 

  189.     // 图表标题
    190. 

  190.     title: {
    191. 

  191.         x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
    192. 

  192.                                    // 'center' ¦ 'left' ¦ 'right'
    193. 

  193.                                    // ¦ {number}（x坐标，单位px）
    194. 

  194.         y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
    195. 

  195.                                    // 'top' ¦ 'bottom' ¦ 'center'
    196. 

  196.                                    // ¦ {number}（y坐标，单位px）
    197. 

  197.         //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    198. 

  198.         backgroundColor: 'rgba(0,0,0,0)',
    199. 

  199.         borderColor: '#ccc',       // 标题边框颜色
    200. 

  200.         borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
    201. 

  201.         padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
    202. 

  202.                                    // 接受数组分别设定上右下左边距，同css
    203. 

  203.         itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
    204. 

  204.         textStyle: {
    205. 

  205.             fontSize: 18,
    206. 

  206.             fontWeight: 'bolder',
    207. 

  207.             color: '#333'          // 主标题文字颜色
    208. 

  208.         },
    209. 

  209.         subtextStyle: {
    210. 

  210.             color: '#aaa'          // 副标题文字颜色
    211. 

  211.         }
    212. 

  212.     },
    213. 

  213.     
    214. 

  214.     // 图例
    215. 

  215.     legend: {
    216. 

  216.         orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
    217. 

  217.                                    // 'horizontal' ¦ 'vertical'
    218. 

  218.         x: 'center',               // 水平安放位置，默认为全图居中，可选为：
    219. 

  219.                                    // 'center' ¦ 'left' ¦ 'right'
    220. 

  220.                                    // ¦ {number}（x坐标，单位px）
    221. 

  221.         y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
    222. 

  222.                                    // 'top' ¦ 'bottom' ¦ 'center'
    223. 

  223.                                    // ¦ {number}（y坐标，单位px）
    224. 

  224.         backgroundColor: 'rgba(0,0,0,0)',
    225. 

  225.         borderColor: '#ccc',       // 图例边框颜色
    226. 

  226.         borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
    227. 

  227.         padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
    228. 

  228.                                    // 接受数组分别设定上右下左边距，同css
    229. 

  229.         itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
    230. 

  230.                                    // 横向布局时为水平间隔，纵向布局时为纵向间隔
    231. 

  231.         itemWidth: 20,             // 图例图形宽度
    232. 

  232.         itemHeight: 14,            // 图例图形高度
    233. 

  233.         textStyle: {
    234. 

  234.             color: '#333'          // 图例文字颜色
    235. 

  235.         }
    236. 

  236.     },
    237. 

  237.     
    238. 

  238.     // 值域
    239. 

  239.     dataRange: {
    240. 

  240.         orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
    241. 

  241.                                    // 'horizontal' ¦ 'vertical'
    242. 

  242.         x: 'left',                 // 水平安放位置，默认为全图左对齐，可选为：
    243. 

  243.                                    // 'center' ¦ 'left' ¦ 'right'
    244. 

  244.                                    // ¦ {number}（x坐标，单位px）
    245. 

  245.         y: 'bottom',               // 垂直安放位置，默认为全图底部，可选为：
    246. 

  246.                                    // 'top' ¦ 'bottom' ¦ 'center'
    247. 

  247.                                    // ¦ {number}（y坐标，单位px）
    248. 

  248.         backgroundColor: 'rgba(0,0,0,0)',
    249. 

  249.         borderColor: '#ccc',       // 值域边框颜色
    250. 

  250.         borderWidth: 0,            // 值域边框线宽，单位px，默认为0（无边框）
    251. 

  251.         padding: 5,                // 值域内边距，单位px，默认各方向内边距为5，
    252. 

  252.                                    // 接受数组分别设定上右下左边距，同css
    253. 

  253.         itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
    254. 

  254.                                    // 横向布局时为水平间隔，纵向布局时为纵向间隔
    255. 

  255.         itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    256. 

  256.         itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    257. 

  257.         splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
    258. 

  258.         color:['#1e90ff','#f0ffff'],//颜色 
    259. 

  259.         //text:['高','低'],         // 文本，默认为数值文本
    260. 

  260.         textStyle: {
    261. 

  261.             color: '#333'          // 值域文字颜色
    262. 

  262.         }
    263. 

  263.     },
    264. 

  264. 

  265.     toolbox: {
    266. 

  266.         orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
    267. 

  267.                                    // 'horizontal' ¦ 'vertical'
    268. 

  268.         x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
    269. 

  269.                                    // 'center' ¦ 'left' ¦ 'right'
    270. 

  270.                                    // ¦ {number}（x坐标，单位px）
    271. 

  271.         y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
    272. 

  272.                                    // 'top' ¦ 'bottom' ¦ 'center'
    273. 

  273.                                    // ¦ {number}（y坐标，单位px）
    274. 

  274.         color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
    275. 

  275.         backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
    276. 

  276.         borderColor: '#ccc',       // 工具箱边框颜色
    277. 

  277.         borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
    278. 

  278.         padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
    279. 

  279.                                    // 接受数组分别设定上右下左边距，同css
    280. 

  280.         itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
    281. 

  281.                                    // 横向布局时为水平间隔，纵向布局时为纵向间隔
    282. 

  282.         itemSize: 16,              // 工具箱图形宽度
    283. 

  283.         featureImageIcon : {},     // 自定义图片icon
    284. 

  284.         featureTitle : {
    285. 

  285.             mark : '辅助线开关',
    286. 

  286.             markUndo : '删除辅助线',
    287. 

  287.             markClear : '清空辅助线',
    288. 

  288.             dataZoom : '区域缩放',
    289. 

  289.             dataZoomReset : '区域缩放后退',
    290. 

  290.             dataView : '数据视图',
    291. 

  291.             lineChart : '折线图切换',
    292. 

  292.             barChart : '柱形图切换',
    293. 

  293.             restore : '还原',
    294. 

  294.             saveAsImage : '保存为图片'
    295. 

  295.         }
    296. 

  296.     },
    297. 

  297. 

  298.     // 提示框
    299. 

  299.     tooltip: {
    300. 

  300.         trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
    301. 

  301.         showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    302. 

  302.         hideDelay: 100,            // 隐藏延迟，单位ms
    303. 

  303.         transitionDuration : 0.4,  // 动画变换时间，单位s
    304. 

  304.         backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
    305. 

  305.         borderColor: '#333',       // 提示边框颜色
    306. 

  306.         borderRadius: 4,           // 提示边框圆角，单位px，默认为4
    307. 

  307.         borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
    308. 

  308.         padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
    309. 

  309.                                    // 接受数组分别设定上右下左边距，同css
    310. 

  310.         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    311. 

  311.             type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
    312. 

  312.             lineStyle : {          // 直线指示器样式设置
    313. 

  313.                 color: '#48b',
    314. 

  314.                 width: 2,
    315. 

  315.                 type: 'solid'
    316. 

  316.             },
    317. 

  317.             shadowStyle : {                       // 阴影指示器样式设置
    318. 

  318.                 width: 'auto',                   // 阴影大小
    319. 

  319.                 color: 'rgba(150,150,150,0.3)'  // 阴影颜色
    320. 

  320.             }
    321. 

  321.         },
    322. 

  322.         textStyle: {
    323. 

  323.             color: '#fff'
    324. 

  324.         }
    325. 

  325.     },
    326. 

  326. 

  327.     // 区域缩放控制器
    328. 

  328.     dataZoom: {
    329. 

  329.         orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
    330. 

  330.                                    // 'horizontal' ¦ 'vertical'
    331. 

  331.         // x: {number},            // 水平安放位置，默认为根据grid参数适配，可选为：
    332. 

  332.                                    // {number}（x坐标，单位px）
    333. 

  333.         // y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：
    334. 

  334.                                    // {number}（y坐标，单位px）
    335. 

  335.         // width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配
    336. 

  336.         // height: {number},       // 指定高度，纵向布局时默认为根据grid参数适配
    337. 

  337.         backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
    338. 

  338.         dataBackgroundColor: '#eee',            // 数据背景颜色
    339. 

  339.         fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
    340. 

  340.         handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
    341. 

  341.     },
    342. 

  342. 

  343.     // 网格
    344. 

  344.     grid: {
    345. 

  345.         x: 80,
    346. 

  346.         y: 60,
    347. 

  347.         x2: 80,
    348. 

  348.         y2: 60,
    349. 

  349.         // width: {totalWidth} - x - x2,
    350. 

  350.         // height: {totalHeight} - y - y2,
    351. 

  351.         backgroundColor: 'rgba(0,0,0,0)',
    352. 

  352.         borderWidth: 1,
    353. 

  353.         borderColor: '#ccc'
    354. 

  354.     },
    355. 

  355. 

  356.     // 类目轴
    357. 

  357.     categoryAxis: {
    358. 

  358.         position: 'bottom',    // 位置
    359. 

  359.         nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
    360. 

  360.         boundaryGap: true,     // 类目起始和结束两端空白策略
    361. 

  361.         axisLine: {            // 坐标轴线
    362. 

  362.             show: true,        // 默认显示，属性show控制显示与否
    363. 

  363.             lineStyle: {       // 属性lineStyle控制线条样式
    364. 

  364.                 color: '#48b',
    365. 

  365.                 width: 2,
    366. 

  366.                 type: 'solid'
    367. 

  367.             }
    368. 

  368.         },
    369. 

  369.         axisTick: {            // 坐标轴小标记
    370. 

  370.             show: true,       // 属性show控制显示与否，默认不显示
    371. 

  371.             interval: 'auto',
    372. 

  372.             // onGap: null,
    373. 

  373.             inside : false,    // 控制小标记是否在grid里 
    374. 

  374.             length :5,         // 属性length控制线长
    375. 

  375.             lineStyle: {       // 属性lineStyle控制线条样式
    376. 

  376.                 color: '#333',
    377. 

  377.                 width: 1
    378. 

  378.             }
    379. 

  379.         },
    380. 

  380.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
    381. 

  381.             show: true,
    382. 

  382.             interval: 'auto',
    383. 

  383.             rotate: 0,
    384. 

  384.             margin: 8,
    385. 

  385.             // formatter: null,
    386. 

  386.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    387. 

  387.                 color: '#333'
    388. 

  388.             }
    389. 

  389.         },
    390. 

  390.         splitLine: {           // 分隔线
    391. 

  391.             show: true,        // 默认显示，属性show控制显示与否
    392. 

  392.             // onGap: null,
    393. 

  393.             lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
    394. 

  394.                 color: ['#ccc'],
    395. 

  395.                 width: 1,
    396. 

  396.                 type: 'solid'
    397. 

  397.             }
    398. 

  398.         },
    399. 

  399.         splitArea: {           // 分隔区域
    400. 

  400.             show: false,       // 默认不显示，属性show控制显示与否
    401. 

  401.             // onGap: null,
    402. 

  402.             areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
    403. 

  403.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
    404. 

  404.             }
    405. 

  405.         }
    406. 

  406.     },
    407. 

  407. 

  408.     // 数值型坐标轴默认参数
    409. 

  409.     valueAxis: {
    410. 

  410.         position: 'left',      // 位置
    411. 

  411.         nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
    412. 

  412.         nameTextStyle: {},     // 坐标轴文字样式，默认取全局样式
    413. 

  413.         boundaryGap: [0, 0],   // 数值起始和结束两端空白策略
    414. 

  414.         splitNumber: 5,        // 分割段数，默认为5
    415. 

  415.         axisLine: {            // 坐标轴线
    416. 

  416.             show: true,        // 默认显示，属性show控制显示与否
    417. 

  417.             lineStyle: {       // 属性lineStyle控制线条样式
    418. 

  418.                 color: '#48b',
    419. 

  419.                 width: 2,
    420. 

  420.                 type: 'solid'
    421. 

  421.             }
    422. 

  422.         },
    423. 

  423.         axisTick: {            // 坐标轴小标记
    424. 

  424.             show: false,       // 属性show控制显示与否，默认不显示
    425. 

  425.             inside : false,    // 控制小标记是否在grid里 
    426. 

  426.             length :5,         // 属性length控制线长
    427. 

  427.             lineStyle: {       // 属性lineStyle控制线条样式
    428. 

  428.                 color: '#333',
    429. 

  429.                 width: 1
    430. 

  430.             }
    431. 

  431.         },
    432. 

  432.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
    433. 

  433.             show: true,
    434. 

  434.             rotate: 0,
    435. 

  435.             margin: 8,
    436. 

  436.             // formatter: null,
    437. 

  437.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    438. 

  438.                 color: '#333'
    439. 

  439.             }
    440. 

  440.         },
    441. 

  441.         splitLine: {           // 分隔线
    442. 

  442.             show: true,        // 默认显示，属性show控制显示与否
    443. 

  443.             lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
    444. 

  444.                 color: ['#ccc'],
    445. 

  445.                 width: 1,
    446. 

  446.                 type: 'solid'
    447. 

  447.             }
    448. 

  448.         },
    449. 

  449.         splitArea: {           // 分隔区域
    450. 

  450.             show: false,       // 默认不显示，属性show控制显示与否
    451. 

  451.             areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
    452. 

  452.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
    453. 

  453.             }
    454. 

  454.         }
    455. 

  455.     },
    456. 

  456. 

  457.     polar : {
    458. 

  458.         center : ['50%', '50%'],    // 默认全局居中
    459. 

  459.         radius : '75%',
    460. 

  460.         startAngle : 90,
    461. 

  461.         splitNumber : 5,
    462. 

  462.         name : {
    463. 

  463.             show: true,
    464. 

  464.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    465. 

  465.                 color: '#333'
    466. 

  466.             }
    467. 

  467.         },
    468. 

  468.         axisLine: {            // 坐标轴线
    469. 

  469.             show: true,        // 默认显示，属性show控制显示与否
    470. 

  470.             lineStyle: {       // 属性lineStyle控制线条样式
    471. 

  471.                 color: '#ccc',
    472. 

  472.                 width: 1,
    473. 

  473.                 type: 'solid'
    474. 

  474.             }
    475. 

  475.         },
    476. 

  476.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
    477. 

  477.             show: false,
    478. 

  478.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    479. 

  479.                 color: '#333'
    480. 

  480.             }
    481. 

  481.         },
    482. 

  482.         splitArea : {
    483. 

  483.             show : true,
    484. 

  484.             areaStyle : {
    485. 

  485.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
    486. 

  486.             }
    487. 

  487.         },
    488. 

  488.         splitLine : {
    489. 

  489.             show : true,
    490. 

  490.             lineStyle : {
    491. 

  491.                 width : 1,
    492. 

  492.                 color : '#ccc'
    493. 

  493.             }
    494. 

  494.         }
    495. 

  495.     },
    496. 

  496. 

  497.     // 柱形图默认参数
    498. 

  498.     bar: {
    499. 

  499.         barMinHeight: 0,          // 最小高度改为0
    500. 

  500.         // barWidth: null,        // 默认自适应
    501. 

  501.         barGap: '30%',            // 柱间距离，默认为柱形宽度的30%，可设固定值
    502. 

  502.         barCategoryGap : '20%',   // 类目间柱形距离，默认为类目间距的20%，可设固定值
    503. 

  503.         itemStyle: {
    504. 

  504.             normal: {
    505. 

  505.                 // color: '各异',
    506. 

  506.                 barBorderColor: '#fff',       // 柱条边线
    507. 

  507.                 barBorderRadius: 0,           // 柱条边线圆角，单位px，默认为0
    508. 

  508.                 barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
    509. 

  509.                 label: {
    510. 

  510.                     show: false
    511. 

  511.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    512. 

  512.                     //           'inside'|'left'|'right'|'top'|'bottom'
    513. 

  513.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    514. 

  514.                 }
    515. 

  515.             },
    516. 

  516.             emphasis: {
    517. 

  517.                 // color: '各异',
    518. 

  518.                 barBorderColor: 'rgba(0,0,0,0)',   // 柱条边线
    519. 

  519.                 barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
    520. 

  520.                 barBorderWidth: 1,                 // 柱条边线线宽，单位px，默认为1
    521. 

  521.                 label: {
    522. 

  522.                     show: false
    523. 

  523.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    524. 

  524.                     //           'inside'|'left'|'right'|'top'|'bottom'
    525. 

  525.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    526. 

  526.                 }
    527. 

  527.             }
    528. 

  528.         }
    529. 

  529.     },
    530. 

  530. 

  531.     // 折线图默认参数
    532. 

  532.     line: {
    533. 

  533.         itemStyle: {
    534. 

  534.             normal: {
    535. 

  535.                 // color: 各异,
    536. 

  536.                 label: {
    537. 

  537.                     show: false
    538. 

  538.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    539. 

  539.                     //           'inside'|'left'|'right'|'top'|'bottom'
    540. 

  540.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    541. 

  541.                 },
    542. 

  542.                 lineStyle: {
    543. 

  543.                     width: 2,
    544. 

  544.                     type: 'solid',
    545. 

  545.                     shadowColor : 'rgba(0,0,0,0)', //默认透明
    546. 

  546.                     shadowBlur: 5,
    547. 

  547.                     shadowOffsetX: 3,
    548. 

  548.                     shadowOffsetY: 3
    549. 

  549.                 }
    550. 

  550.             },
    551. 

  551.             emphasis: {
    552. 

  552.                 // color: 各异,
    553. 

  553.                 label: {
    554. 

  554.                     show: false
    555. 

  555.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    556. 

  556.                     //           'inside'|'left'|'right'|'top'|'bottom'
    557. 

  557.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    558. 

  558.                 }
    559. 

  559.             }
    560. 

  560.         },
    561. 

  561.         //smooth : false,
    562. 

  562.         //symbol: null,         // 拐点图形类型
    563. 

  563.         symbolSize: 2,          // 拐点图形大小
    564. 

  564.         //symbolRotate : null,  // 拐点图形旋转控制
    565. 

  565.         showAllSymbol: false    // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
    566. 

  566.     },
    567. 

  567.     
    568. 

  568.     // K线图默认参数
    569. 

  569.     k: {
    570. 

  570.         // barWidth : null          // 默认自适应
    571. 

  571.         // barMaxWidth : null       // 默认自适应 
    572. 

  572.         itemStyle: {
    573. 

  573.             normal: {
    574. 

  574.                 color: '#fff',          // 阳线填充颜色
    575. 

  575.                 color0: '#00aa11',      // 阴线填充颜色
    576. 

  576.                 lineStyle: {
    577. 

  577.                     width: 1,
    578. 

  578.                     color: '#ff3200',   // 阳线边框颜色
    579. 

  579.                     color0: '#00aa11'   // 阴线边框颜色
    580. 

  580.                 }
    581. 

  581.             },
    582. 

  582.             emphasis: {
    583. 

  583.                 // color: 各异,
    584. 

  584.                 // color0: 各异
    585. 

  585.             }
    586. 

  586.         }
    587. 

  587.     },
    588. 

  588.     
    589. 

  589.     // 散点图默认参数
    590. 

  590.     scatter: {
    591. 

  591.         //symbol: null,      // 图形类型
    592. 

  592.         symbolSize: 4,       // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    593. 

  593.         //symbolRotate : null,  // 图形旋转控制
    594. 

  594.         large: false,        // 大规模散点图
    595. 

  595.         largeThreshold: 2000,// 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
    596. 

  596.         itemStyle: {
    597. 

  597.             normal: {
    598. 

  598.                 // color: 各异,
    599. 

  599.                 label: {
    600. 

  600.                     show: false
    601. 

  601.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    602. 

  602.                     //           'inside'|'left'|'right'|'top'|'bottom'
    603. 

  603.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    604. 

  604.                 }
    605. 

  605.             },
    606. 

  606.             emphasis: {
    607. 

  607.                 // color: '各异'
    608. 

  608.                 label: {
    609. 

  609.                     show: false
    610. 

  610.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
    611. 

  611.                     //           'inside'|'left'|'right'|'top'|'bottom'
    612. 

  612.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    613. 

  613.                 }
    614. 

  614.             }
    615. 

  615.         }
    616. 

  616.     },
    617. 

  617. 

  618.     // 雷达图默认参数
    619. 

  619.     radar : {
    620. 

  620.         itemStyle: {
    621. 

  621.             normal: {
    622. 

  622.                 // color: 各异,
    623. 

  623.                 label: {
    624. 

  624.                     show: false
    625. 

  625.                 },
    626. 

  626.                 lineStyle: {
    627. 

  627.                     width: 2,
    628. 

  628.                     type: 'solid'
    629. 

  629.                 }
    630. 

  630.             },
    631. 

  631.             emphasis: {
    632. 

  632.                 // color: 各异,
    633. 

  633.                 label: {
    634. 

  634.                     show: false
    635. 

  635.                 }
    636. 

  636.             }
    637. 

  637.         },
    638. 

  638.         //symbol: null,         // 拐点图形类型
    639. 

  639.         symbolSize: 2           // 可计算特性参数，空数据拖拽提示图形大小
    640. 

  640.         //symbolRotate : null,  // 图形旋转控制
    641. 

  641.     },
    642. 

  642. 

  643.     // 饼图默认参数
    644. 

  644.     pie: {
    645. 

  645.         center : ['50%', '50%'],    // 默认全局居中
    646. 

  646.         radius : [0, '75%'],
    647. 

  647.         clockWise : false,          // 默认逆时针
    648. 

  648.         startAngle: 90,
    649. 

  649.         minAngle: 0,                // 最小角度改为0
    650. 

  650.         selectedOffset: 10,         // 选中是扇区偏移量
    651. 

  651.         itemStyle: {
    652. 

  652.             normal: {
    653. 

  653.                 // color: 各异,
    654. 

  654.                 borderColor: '#fff',
    655. 

  655.                 borderWidth: 1,
    656. 

  656.                 label: {
    657. 

  657.                     show: true,
    658. 

  658.                     position: 'outer'
    659. 

  659.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    660. 

  660.                 },
    661. 

  661.                 labelLine: {
    662. 

  662.                     show: true,
    663. 

  663.                     length: 20,
    664. 

  664.                     lineStyle: {
    665. 

  665.                         // color: 各异,
    666. 

  666.                         width: 1,
    667. 

  667.                         type: 'solid'
    668. 

  668.                     }
    669. 

  669.                 }
    670. 

  670.             },
    671. 

  671.             emphasis: {
    672. 

  672.                 // color: 各异,
    673. 

  673.                 borderColor: 'rgba(0,0,0,0)',
    674. 

  674.                 borderWidth: 1,
    675. 

  675.                 label: {
    676. 

  676.                     show: false
    677. 

  677.                     // position: 'outer'
    678. 

  678.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    679. 

  679.                 },
    680. 

  680.                 labelLine: {
    681. 

  681.                     show: false,
    682. 

  682.                     length: 20,
    683. 

  683.                     lineStyle: {
    684. 

  684.                         // color: 各异,
    685. 

  685.                         width: 1,
    686. 

  686.                         type: 'solid'
    687. 

  687.                     }
    688. 

  688.                 }
    689. 

  689.             }
    690. 

  690.         }
    691. 

  691.     },
    692. 

  692.     
    693. 

  693.     map: {
    694. 

  694.         mapType: 'china',   // 各省的mapType暂时都用中文
    695. 

  695.         mapLocation: {
    696. 

  696.             x : 'center',
    697. 

  697.             y : 'center'
    698. 

  698.             // width    // 自适应
    699. 

  699.             // height   // 自适应
    700. 

  700.         },
    701. 

  701.         showLegendSymbol : true,       // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
    702. 

  702.         itemStyle: {
    703. 

  703.             normal: {
    704. 

  704.                 // color: 各异,
    705. 

  705.                 borderColor: '#fff',
    706. 

  706.                 borderWidth: 1,
    707. 

  707.                 areaStyle: {
    708. 

  708.                     color: '#ccc'//rgba(135,206,250,0.8)
    709. 

  709.                 },
    710. 

  710.                 label: {
    711. 

  711.                     show: false,
    712. 

  712.                     textStyle: {
    713. 

  713.                         color: 'rgba(139,69,19,1)'
    714. 

  714.                     }
    715. 

  715.                 }
    716. 

  716.             },
    717. 

  717.             emphasis: {                 // 也是选中样式
    718. 

  718.                 // color: 各异,
    719. 

  719.                 borderColor: 'rgba(0,0,0,0)',
    720. 

  720.                 borderWidth: 1,
    721. 

  721.                 areaStyle: {
    722. 

  722.                     color: 'rgba(255,215,0,0.8)'
    723. 

  723.                 },
    724. 

  724.                 label: {
    725. 

  725.                     show: false,
    726. 

  726.                     textStyle: {
    727. 

  727.                         color: 'rgba(139,69,19,1)'
    728. 

  728.                     }
    729. 

  729.                 }
    730. 

  730.             }
    731. 

  731.         }
    732. 

  732.     },
    733. 

  733.     
    734. 

  734.     force : {
    735. 

  735.         // 数据map到圆的半径的最小值和最大值
    736. 

  736.         minRadius : 10,
    737. 

  737.         maxRadius : 20,
    738. 

  738.         density : 1.0,
    739. 

  739.         attractiveness : 1.0,
    740. 

  740.         // 初始化的随机大小位置
    741. 

  741.         initSize : 300,
    742. 

  742.         // 向心力因子，越大向心力越大
    743. 

  743.         centripetal : 1,
    744. 

  744.         // 冷却因子
    745. 

  745.         coolDown : 0.99,
    746. 

  746.         // 分类里如果有样式会覆盖节点默认样式
    747. 

  747.         itemStyle: {
    748. 

  748.             normal: {
    749. 

  749.                 // color: 各异,
    750. 

  750.                 label: {
    751. 

  751.                     show: false
    752. 

  752.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    753. 

  753.                 },
    754. 

  754.                 nodeStyle : {
    755. 

  755.                     brushType : 'both',
    756. 

  756.                     color : '#f08c2e',
    757. 

  757.                     strokeColor : '#5182ab'
    758. 

  758.                 },
    759. 

  759.                 linkStyle : {
    760. 

  760.                     strokeColor : '#5182ab'
    761. 

  761.                 }
    762. 

  762.             },
    763. 

  763.             emphasis: {
    764. 

  764.                 // color: 各异,
    765. 

  765.                 label: {
    766. 

  766.                     show: false
    767. 

  767.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    768. 

  768.                 },
    769. 

  769.                 nodeStyle : {},
    770. 

  770.                 linkStyle : {}
    771. 

  771.             }
    772. 

  772.         }
    773. 

  773.     },
    774. 

  774. 

  775.     chord : {
    776. 

  776.         radius : ['65%', '75%'],
    777. 

  777.         center : ['50%', '50%'],
    778. 

  778.         padding : 2,
    779. 

  779.         sort : 'none', // can be 'none', 'ascending', 'descending'
    780. 

  780.         sortSub : 'none', // can be 'none', 'ascending', 'descending'
    781. 

  781.         startAngle : 90,
    782. 

  782.         clockWise : false,
    783. 

  783.         showScale : false,
    784. 

  784.         showScaleText : false,
    785. 

  785.         itemStyle : {
    786. 

  786.             normal : {
    787. 

  787.                 label : {
    788. 

  788.                     show : true
    789. 

  789.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    790. 

  790.                 },
    791. 

  791.                 lineStyle : {
    792. 

  792.                     width : 0,
    793. 

  793.                     color : '#000'
    794. 

  794.                 },
    795. 

  795.                 chordStyle : {
    796. 

  796.                     lineStyle : {
    797. 

  797.                         width : 1,
    798. 

  798.                         color : '#666'
    799. 

  799.                     }
    800. 

  800.                 }
    801. 

  801.             },
    802. 

  802.             emphasis : {
    803. 

  803.                 lineStyle : {
    804. 

  804.                     width : 0,
    805. 

  805.                     color : '#000'
    806. 

  806.                 },
    807. 

  807.                 chordStyle : {
    808. 

  808.                     lineStyle : {
    809. 

  809.                         width : 2,
    810. 

  810.                         color : '#333'
    811. 

  811.                     }
    812. 

  812.                 }
    813. 

  813.             }
    814. 

  814.         }
    815. 

  815.     },
    816. 

  816. 

  817.     island: {
    818. 

  818.         r: 15,
    819. 

  819.         calculateStep: 0.1  // 滚轮可计算步长 0.1 = 10%
    820. 

  820.     },
    821. 

  821.     
    822. 

  822.     markPoint : {
    823. 

  823.         symbol: 'pin',         // 标注类型
    824. 

  824.         symbolSize: 10,        // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    825. 

  825.         //symbolRotate : null, // 标注旋转控制
    826. 

  826.         itemStyle: {
    827. 

  827.             normal: {
    828. 

  828.                 // color: 各异，
    829. 

  829.                 // borderColor: 各异,     // 标注边线颜色，优先于color 
    830. 

  830.                 borderWidth: 2,            // 标注边线线宽，单位px，默认为1
    831. 

  831.                 label: {
    832. 

  832.                     show: true,
    833. 

  833.                     position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
    834. 

  834.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
    835. 

  835.                 }
    836. 

  836.             },
    837. 

  837.             emphasis: {
    838. 

  838.                 // color: 各异
    839. 

  839.                 label: {
    840. 

  840.                     show: true
    841. 

  841.                     // position: 'inside'  // 'left'|'right'|'top'|'bottom'
    842. 

  842.                     // textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE
    843. 

  843.                 }
    844. 

  844.             }
    845. 

  845.         }
    846. 

  846.     },
    847. 

  847.     
    848. 

  848.     markLine : {
    849. 

  849.         // 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
    850. 

  850.         symbol: ['circle', 'arrow'],  
    851. 

  851.         // 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    852. 

  852.         symbolSize: [2, 4],
    853. 

  853.         // 标线起始和结束的symbol旋转控制
    854. 

  854.         //symbolRotate : null,
    855. 

  855.         itemStyle: {
    856. 

  856.             normal: {
    857. 

  857.                 // color: 各异,           // 标线主色，线色，symbol主色
    858. 

  858.                 // borderColor: 随color,     // 标线symbol边框颜色，优先于color 
    859. 

  859.                 borderWidth: 2,          // 标线symbol边框线宽，单位px，默认为2
    860. 

  860.                 label: {
    861. 

  861.                     show: false,
    862. 

  862.                     // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
    863. 

  863.                     position: 'inside',  
    864. 

  864.                     textStyle: {         // 默认使用全局文本样式，详见TEXTSTYLE
    865. 

  865.                         color: '#333'
    866. 

  866.                     }
    867. 

  867.                 },
    868. 

  868.                 lineStyle: {
    869. 

  869.                     // color: 随borderColor, // 主色，线色，优先级高于borderColor和color
    870. 

  870.                     // width: 随borderWidth, // 优先于borderWidth
    871. 

  871.                     type: 'solid',
    872. 

  872.                     shadowColor : 'rgba(0,0,0,0)', //默认透明
    873. 

  873.                     shadowBlur: 5,
    874. 

  874.                     shadowOffsetX: 3,
    875. 

  875.                     shadowOffsetY: 3
    876. 

  876.                 }
    877. 

  877.             },
    878. 

  878.             emphasis: {
    879. 

  879.                 // color: 各异
    880. 

  880.                 label: {
    881. 

  881.                     show: false
    882. 

  882.                     // position: 'inside' // 'left'|'right'|'top'|'bottom'
    883. 

  883.                     // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
    884. 

  884.                 },
    885. 

  885.                 lineStyle : {}
    886. 

  886.             }
    887. 

  887.         }
    888. 

  888.     },
    889. 

  889. 

  890.     textStyle: {
    891. 

  891.         decoration: 'none',
    892. 

  892.         fontFamily: 'Arial, Verdana, sans-serif',
    893. 

  893.         fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
    894. 

  894.         fontSize: 12,
    895. 

  895.         fontStyle: 'normal',
    896. 

  896.         fontWeight: 'normal'
    897. 

  897.     },
    898. 

  898. 

  899.     // 默认标志图形类型列表
    900. 

  900.     symbolList : [
    901. 

  901.       'circle', 'rectangle', 'triangle', 'diamond',
    902. 

  902.       'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
    903. 

  903.     ],
    904. 

  904.     loadingText : 'Loading...',
    905. 

  905.     // 可计算特性配置，孤岛，提示颜色
    906. 

  906.     calculable: false,              // 默认关闭可计算特性
    907. 

  907.     calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
    908. 

  908.     calculableHolderColor: '#ccc', // 可计算占位提示颜色
    909. 

  909.     nameConnector: ' & ',
    910. 

  910.     valueConnector: ' : ',
    911. 

  911.     animation: true,
    912. 

  912.     animationThreshold: 2500,       // 动画元素阀值，产生的图形原素超过2500不出动画
    913. 

  913.     addDataAnimation: true,         // 动态数据接口是否开启动画效果
    914. 

  914.     animationDuration: 2000,
    915. 

  915.     animationEasing: 'ExponentialOut'    //BounceOut
    916. 

  916. }
    917. 

  917.                 </textarea>
    918. 

  918.             </div><!--/.well -->
    919. 

  919.               <div style="margin-top:10px">
    920. 

  920.                   <button class="btn btn-large btn-primary" type="button" onclick="refresh(true)">刷新</button>
    921. 

  921.                   <button class="btn btn-large btn-info" type="button" onclick="saveAsImage()">保存图片</button>
    922. 

  922.               </div>
    923. 

  923.             </div><!--/div sidebar-code-->
    924. 

  924.             
    925. 

  925.             <div id="graphic" class="col-md-8">
    926. 

  926.                 <div class="row-fluid">
    927. 

  927.                     <div class="col-md-12">
    928. 

  928.                         <div md="main" class="chart"></div>
    929. 

  929.                     </div>
    930. 

  930.                 </div>
    931. 

  931.                 <div class="row-fluid">
    932. 

  932.                     <div class="col-md-6">
    933. 

  933.                         <div md="main" class="chart"></div>
    934. 

  934.                     </div><!--/col-md--->
    935. 

  935.                     <div class="col-md-6">
    936. 

  936.                         <div md="main" class="chart"></div>
    937. 

  937.                     </div><!--/col-md--->
    938. 

  938.                 </div>
    939. 

  939.                 <div class="row-fluid">
    940. 

  940.                     <div class="col-md-12">
    941. 

  941.                         <div md="main" class="chart"></div>
    942. 

  942.                     </div>
    943. 

  943.                 </div>
    944. 

  944.                 <div class="row-fluid">
    945. 

  945.                     <div class="col-md-6">
    946. 

  946.                         <div md="main" class="chart"></div>
    947. 

  947.                     </div><!--/col-md--->
    948. 

  948.                     <div class="col-md-6">
    949. 

  949.                         <div md="main" class="chart"></div>
    950. 

  950.                     </div><!--/col-md--->
    951. 

  951.                 </div>
    952. 

  952.                 <div class="row-fluid">
    953. 

  953.                     <div class="col-md-12">
    954. 

  954.                         <div md="main" class="chart" style="height:600px"></div>
    955. 

  955.                     </div>
    956. 

  956.                 </div>
    957. 

  957.                 <div class="row-fluid">
    958. 

  958.                     <div class="col-md-6">
    959. 

  959.                         <div md="main" class="chart"></div>
    960. 

  960.                     </div><!--/col-md--->
    961. 

  961.                     <div class="col-md-6">
    962. 

  962.                         <div md="main" class="chart"></div>
    963. 

  963.                     </div><!--/col-md--->
    964. 

  964.                 </div>
    965. 

  965.                 <div class="row-fluid">
    966. 

  966.                     <div class="col-md-6">
    967. 

  967.                         <div md="main" class="chart"></div>
    968. 

  968.                     </div><!--/col-md--->
    969. 

  969.                     <div class="col-md-6">
    970. 

  970.                         <div md="main" class="chart"></div>
    971. 

  971.                     </div><!--/col-md--->
    972. 

  972.                 </div>
    973. 

  973.             </div><!--/col-md--->
    974. 

  974.         </div><!--/row-->
    975. 

  975.         
    976. 

  976.         </div><!--/.fluid-container-->
    977. 

  977. 

  978.     <footer id="footer"></footer>
    979. 

  979.     <!-- Le javascript
    980. 

  980.     ================================================== -->
    981. 

  981.     <!-- Placed at the end of the document so the pages load faster -->
    982. 

  982.     <script src="../asset/js/jquery.min.js"></script>
    983. 

  983.     <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
    984. 

  984.     <script src="../asset/js/bootstrap.min.js"></script>
    985. 

  985.     <script src="../asset/js/echartsThemeDesigner.js"></script>
    986. 

  986. </body>
    987. 

  987. </html>
    988.