chord2.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="ECharts">
  8. <meta name="author" content="kener.linfeng@gmail.com">
  9. <title>ECharts · Example</title>
  10. <link rel="shortcut icon" href="../asset/ico/favicon.png">
  11. <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="../asset/css/bootstrap.css" rel="stylesheet">
  13. <link href="../asset/css/carousel.css" rel="stylesheet">
  14. <link href="../asset/css/echartsHome.css" rel="stylesheet">
  15. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16. <!--[if lt IE 9]>
  17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. <script src="./www/js/echarts.js"></script>
  21. <script src="../asset/js/codemirror.js"></script>
  22. <script src="../asset/js/javascript.js"></script>
  23. <link href="../asset/css/codemirror.css" rel="stylesheet">
  24. <link href="../asset/css/monokai.css" rel="stylesheet">
  25. </head>
  26. <body>
  27. <!-- Fixed navbar -->
  28. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
  29. <div class="container-fluid">
  30. <div class="row-fluid example">
  31. <div id="sidebar-code" class="col-md-4">
  32. <div class="well sidebar-nav">
  33. <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
  34. <textarea id="code" name="code">
  35. option = {
  36. color : [
  37. '#FBB367','#80B1D2','#FB8070','#CC99FF','#B0D961',
  38. '#99CCCC','#BEBBD8','#FFCC99','#8DD3C8','#FF9999',
  39. '#CCEAC4','#BB81BC','#FBCCEC','#CCFF66','#99CC66',
  40. '#66CC66','#FF6666','#FFED6F','#ff7f50','#87cefa',
  41. ],
  42. title : {
  43. text : '中东地区的敌友关系',
  44. subtext: '数据来自财新网',
  45. sublink: 'http://international.caixin.com/2013-09-06/100579154.html',
  46. x:'right',
  47. y:'bottom'
  48. },
  49. toolbox: {
  50. show : true,
  51. feature : {
  52. restore : {show: true},
  53. magicType: {show: true, type: ['force', 'chord']},
  54. saveAsImage : {show: true}
  55. }
  56. },
  57. tooltip : {
  58. trigger: 'item',
  59. formatter : function (params) {
  60. if (params.name && params.name.indexOf('-') != -1) {
  61. return params.name.replace('-', ' ' + params.seriesName + ' ')
  62. }
  63. else {
  64. return params.name ? params.name : params.data.id
  65. }
  66. }
  67. },
  68. legend : {
  69. data : [
  70. '美国',
  71. '叙利亚反对派',
  72. '阿萨德',
  73. '伊朗',
  74. '塞西',
  75. '哈马斯',
  76. '以色列',
  77. '穆斯林兄弟会',
  78. '基地组织',
  79. '俄罗斯',
  80. '黎巴嫩什叶派',
  81. '土耳其',
  82. '卡塔尔',
  83. '沙特',
  84. '黎巴嫩逊尼派',
  85. '',
  86. '支持',
  87. '反对',
  88. '未表态'
  89. ],
  90. orient : 'vertical',
  91. x : 'left'
  92. },
  93. series : [
  94. {
  95. "name": "支持",
  96. "type": "chord",
  97. "showScaleText": false,
  98. "clockWise": false,
  99. "data": [
  100. {"name": "美国"},
  101. {"name": "叙利亚反对派"},
  102. {"name": "阿萨德"},
  103. {"name": "伊朗"},
  104. {"name": "塞西"},
  105. {"name": "哈马斯"},
  106. {"name": "以色列"},
  107. {"name": "穆斯林兄弟会"},
  108. {"name": "基地组织"},
  109. {"name": "俄罗斯"},
  110. {"name": "黎巴嫩什叶派"},
  111. {"name": "土耳其"},
  112. {"name": "卡塔尔"},
  113. {"name": "沙特"},
  114. {"name": "黎巴嫩逊尼派"}
  115. ],
  116. "matrix": [
  117. [0,100,0,0,0,0,100,0,0,0,0,0,0,0,0],
  118. [10,0,0,0,0,10,10,0,10,0,0,10,10,10,10],
  119. [0,0,0,10,0,0,0,0,0,10,10,0,0,0,0],
  120. [0,0,100,0,0,100,0,0,0,0,100,0,0,0,0],
  121. [0,0,0,0,0,0,0,0,0,0,0,0,0,10,0],
  122. [0,100,0,10,0,0,0,0,0,0,0,0,10,0,0],
  123. [10,100,0,0,0,0,0,0,0,0,0,0,0,0,0],
  124. [0,0,0,0,0,0,0,0,0,0,0,10,10,0,0],
  125. [0,100,0,0,0,0,0,0,0,0,0,0,0,0,0],
  126. [0,0,100,0,0,0,0,0,0,0,0,0,0,0,0],
  127. [0,0,100,10,0,0,0,0,0,0,0,0,0,0,0],
  128. [0,100,0,0,0,0,0,100,0,0,0,0,0,0,0],
  129. [0,100,0,0,0,100,0,100,0,0,0,0,0,0,0],
  130. [0,100,0,0,100,0,0,0,0,0,0,0,0,0,100],
  131. [0,100,0,0,0,0,0,0,0,0,0,0,0,10,0]
  132. ]
  133. },
  134. {
  135. "name": "反对",
  136. "type": "chord",
  137. "insertToSerie": "支持",
  138. "data": [
  139. {"name": "美国"},
  140. {"name": "叙利亚反对派"},
  141. {"name": "阿萨德"},
  142. {"name": "伊朗"},
  143. {"name": "塞西"},
  144. {"name": "哈马斯"},
  145. {"name": "以色列"},
  146. {"name": "穆斯林兄弟会"},
  147. {"name": "基地组织"},
  148. {"name": "俄罗斯"},
  149. {"name": "黎巴嫩什叶派"},
  150. {"name": "土耳其"},
  151. {"name": "卡塔尔"},
  152. {"name": "沙特"},
  153. {"name": "黎巴嫩逊尼派"}
  154. ],
  155. "matrix": [
  156. [0,0,100,100,0,100,0,0,100,0,0,0,0,0,0],
  157. [0,0,0,10,0,0,0,0,0,10,10,0,0,0,0],
  158. [10,0,0,0,0,0,10,10,10,0,0,10,10,0,10],
  159. [10,100,0,0,0,0,0,0,0,0,0,0,0,0,0],
  160. [0,0,0,0,0,10,0,100,0,0,0,10,10,0,0],
  161. [10,0,0,0,100,0,10,0,0,0,0,0,0,0,0],
  162. [0,0,100,0,0,100,0,0,0,0,0,0,0,0,0],
  163. [0,0,100,0,10,0,0,0,0,0,0,0,0,10,0],
  164. [10,0,100,0,0,0,0,0,0,0,0,0,0,100,0],
  165. [0,100,0,0,0,0,0,0,0,0,0,0,0,0,0],
  166. [0,100,0,0,0,0,0,0,0,0,0,0,0,0,0],
  167. [0,0,100,0,100,0,0,0,0,0,0,0,0,0,0],
  168. [0,0,100,0,100,0,0,0,0,0,0,0,0,0,0],
  169. [0,0,0,0,0,0,0,100,10,0,0,0,0,0,0],
  170. [0,0,100,0,0,0,0,0,0,0,0,0,0,0,0]
  171. ]
  172. },
  173. {
  174. "name": "未表态",
  175. "type": "chord",
  176. "insertToSerie": "支持",
  177. "data": [
  178. {"name": "美国"},
  179. {"name": "叙利亚反对派"},
  180. {"name": "阿萨德"},
  181. {"name": "伊朗"},
  182. {"name": "塞西"},
  183. {"name": "哈马斯"},
  184. {"name": "以色列"},
  185. {"name": "穆斯林兄弟会"},
  186. {"name": "基地组织"},
  187. {"name": "俄罗斯"},
  188. {"name": "黎巴嫩什叶派"},
  189. {"name": "土耳其"},
  190. {"name": "卡塔尔"},
  191. {"name": "沙特"},
  192. {"name": "黎巴嫩逊尼派"}
  193. ],
  194. "matrix": [
  195. [0,0,0,0,100,0,0,100,0,0,0,0,0,0,0],
  196. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  197. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  198. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  199. [10,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  200. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  201. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  202. [10,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  203. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  204. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  205. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  206. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  207. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  208. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  209. [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  210. ]
  211. }
  212. ]
  213. };
  214. </textarea>
  215. </div><!--/.well -->
  216. </div><!--/span-->
  217. <div id="graphic" class="col-md-8">
  218. <div id="main" class="main"></div>
  219. <div>
  220. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  221. <span class="text-primary">切换主题</span>
  222. <select id="theme-select"></select>
  223. <span id='wrong-message' style="color:red"></span>
  224. </div>
  225. </div><!--/span-->
  226. </div><!--/row-->
  227. </div><!--/.fluid-container-->
  228. <footer id="footer"></footer>
  229. <!-- Le javascript
  230. ================================================== -->
  231. <!-- Placed at the end of the document so the pages load faster -->
  232. <script src="../asset/js/jquery.min.js"></script>
  233. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  234. <script src="../asset/js/bootstrap.min.js"></script>
  235. <script src="../asset/js/echartsExample.js"></script>
  236. </body>
  237. </html>