8276b7e32cff2e800e17bc07a4dd59890228ed15.svn-base 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. /**
  2. * 线图与柱图的通用样式
  3. * @param op
  4. * @returns {___anonymous_option}
  5. */
  6. function getOption(op){
  7. option={
  8. borderWidth:0,
  9. title: {
  10. show:true,
  11. text:op.title,
  12. x:"left",
  13. textStyle: {
  14. color: "#FFC000",
  15. fontSize: 14,
  16. fontStyle: "normal",
  17. fontFamily:"微软雅黑",
  18. fontWeight: "bolder",
  19. textAlign:"right",
  20. align: "right",
  21. baseline: "middle"
  22. },
  23. x: "left",
  24. subtext:op.subtext,
  25. subtextStyle: {
  26. color: "white",//#C00000
  27. textAlign:"right",
  28. fontSize: 16,
  29. fontStyle: "normal",
  30. fontWeight: "bolder",
  31. align: "right",
  32. baseline: "middle"
  33. }
  34. },
  35. tooltip: {
  36. // trigger: "item",
  37. trigger: 'axis',
  38. trigger: (function(){
  39. if(op.trigger==undefined)return"item";
  40. return op.trigger;
  41. })(),
  42. axisPointer:
  43. {
  44. type : 'cross',
  45. lineStyle :
  46. {
  47. color: '#a7a7a7'
  48. }
  49. },
  50. //百分比的函数设计在数据中体现
  51. //formatter: "{a} <br/>{b} : {c} ({d}%)",
  52. show: true,
  53. showDelay: 20, // 延迟,单位ms
  54. hideDelay: 100, // 隐藏延迟
  55. transitionDuration : 0.4, // 动画,单位s
  56. backgroundColor: 'rgba(0,0,0,0.7)',
  57. borderColor: '#333',
  58. borderRadius: 8,
  59. borderWidth: 0,
  60. padding: 5,
  61. textStyle: {
  62. color: "#fff",
  63. fontSize: 12,
  64. fontStyle: "normal",
  65. fontWeight: "normal",
  66. align: "center",
  67. baseline: "middle"
  68. },
  69. backgroundColor: "rgba(0,0,0,0.7)"
  70. },
  71. legend: {
  72. selected : (function(){
  73. return op.selected== undefined?null:op.selected;
  74. })(),
  75. selectedMode: (function(){
  76. return op.selectedMode== undefined?true:op.selectedMode;
  77. })(),
  78. data:op.leArr,//图例数据
  79. x: "right",
  80. y: "bottom",
  81. textStyle://图例文本样式
  82. {
  83. /*color: "rgb(255,255,255)",*/
  84. color:op.legendColor,//图例颜色
  85. baseline: "middle",
  86. align: "center",
  87. fontStyle: "normal",
  88. fontFamily:"微软雅黑",
  89. fontWeight: "normal",
  90. fontSize: 12
  91. },
  92. show:(function(){
  93. return op.show== undefined?true:op.show;
  94. })()//是否显示图例
  95. },
  96. toolbox: {
  97. show : true,//是否显示工具箱
  98. showTitle: true,
  99. orient: 'vertical',
  100. x: 'right',//水平居右
  101. y: 'center',//垂直居中
  102. feature : {
  103. restore : {show: true, readOnly: false,title : "刷新"},
  104. saveAsImage : {
  105. show: true,
  106. onClickStart:function(saveAsImage,option){
  107. //alert(JSON.stringify(saveAsImage));
  108. },
  109. onClickEnd:function(saveAsImage,option){
  110. //alert("保存结束");
  111. },
  112. backgroundColor:"#002050"
  113. }//保存图片
  114. },
  115. //设置时间轴
  116. dataZoom: {
  117. show: true,//显示时间轴
  118. start : 80//时间轴的默认起始时间点
  119. },
  120. textStyle:{//工具箱的文本样式
  121. color:"#FFFFFF"
  122. }
  123. },
  124. calculable : true,
  125. grid:
  126. {
  127. x: 65,
  128. y: 60,
  129. y2:55,
  130. x2:25,
  131. borderWidth:0,
  132. borderColor:"#808080",
  133. zlevel:2
  134. },
  135. timeLine:
  136. {
  137. show:true,
  138. zlevel:2
  139. },
  140. xAxis : [
  141. {
  142. type : 'category',
  143. data :op.xAxis,
  144. position: "bottom",
  145. nameTextStyle:
  146. {
  147. color: "rgb(255,255,255)",
  148. align: "center",
  149. baseline: "middle",
  150. fontSize: 12,
  151. fontStyle: "normal",
  152. fontWeight: "normal"
  153. },
  154. axisLine: {
  155. lineStyle: {
  156. type: "solid",
  157. width: 2,
  158. color: "#48b"
  159. },
  160. show: true
  161. },
  162. axisLabel: {
  163. interval: (function(){
  164. if(op.sArr[0].length<=8)return "auto";
  165. if(op.sArr[0].type=="line"){
  166. return Math.floor(op.sArr[0].data.length/8);
  167. }
  168. if(op.interval==undefined)return "auto";
  169. })(),
  170. textStyle: {
  171. color: op.xAxisColor,
  172. fontStyle: "normal",
  173. fontWeight: "normal",
  174. align: "center",
  175. baseline: "top",
  176. fontSize: 10,
  177. fontFamily:"微软雅黑"
  178. }
  179. },
  180. axisTick: {
  181. show: true
  182. },
  183. splitArea: {
  184. show: false
  185. },
  186. splitLine: {
  187. show: false,
  188. lineStyle: {
  189. color: "rgb(178, 178, 178)",
  190. width: 1
  191. }
  192. },
  193. nameLocation: "end"
  194. }
  195. ],
  196. yAxis : [
  197. {
  198. type: (
  199. function()
  200. {
  201. return op.value== undefined?"log": op.value;
  202. })(),
  203. /*min:1,*/
  204. min:20000,
  205. /* logLabelBase:"10",*/
  206. axisLabel: {
  207. textStyle: {
  208. color: op.yAxisColor,
  209. fontSize: 13,
  210. fontStyle: "normal",
  211. fontFamily:"微软雅黑",
  212. fontWeight: "normal",
  213. align: "right",
  214. baseline: "middle"
  215. }
  216. },
  217. splitLine: {
  218. lineStyle: {
  219. color: "rgb(178, 178, 178)",
  220. width: 1,
  221. type: "dashed"
  222. },
  223. show: true
  224. },
  225. axisLine: {
  226. show: true,
  227. lineStyle: {
  228. color: "#48b",
  229. width: 2
  230. }
  231. }
  232. }
  233. ],
  234. series :op.sArr,
  235. //背景颜色做测试使用,所有统计图做完后注释掉,改为透明背景
  236. /* backgroundColor: "rgb(25,39,53)"*/
  237. };
  238. return option;
  239. }
  240. /**
  241. * 饼图
  242. * @param op
  243. * @returns {___anonymous_option}
  244. */
  245. function getOption11(op){
  246. option={
  247. title: {
  248. show:true,
  249. text:op.title,
  250. x:"left",
  251. textStyle: {
  252. color: "#FFC000",
  253. fontSize: 14,
  254. fontStyle: "normal",
  255. fontFamily:"微软雅黑",
  256. fontWeight: "bolder",
  257. textAlign:"right",
  258. align: "right",
  259. baseline: "middle"
  260. },
  261. x: "left",
  262. subtext:op.subtext,
  263. subtextStyle: {
  264. color: "white",//#C00000
  265. textAlign:"right",
  266. fontSize: 16,
  267. fontStyle: "normal",
  268. fontWeight: "bolder",
  269. align: "right",
  270. baseline: "middle"
  271. }
  272. },
  273. tooltip : {
  274. trigger: 'item',
  275. formatter: "{a} <br/>{b} : {c} ({d}%)"
  276. },
  277. legend: {
  278. orient : 'vertical',
  279. x : 'right',
  280. data:op.leArr,//图例数据
  281. y: "bottom",
  282. textStyle://图例文本样式
  283. {
  284. color: "rgb(255,255,255)",
  285. baseline: "middle",
  286. align: "center",
  287. fontStyle: "normal",
  288. fontFamily:"微软雅黑",
  289. fontWeight: "normal",
  290. fontSize: 12
  291. },
  292. show:(function(){
  293. return op.show== undefined?true:op.show;
  294. })(),//是否显示图例
  295. },
  296. toolbox: {
  297. show : true,//是否显示工具箱
  298. showTitle: true,
  299. orient: 'vertical',
  300. x: 'right',//水平居右
  301. y: 'center',//垂直居中
  302. feature : {
  303. restore : {show: true, readOnly: false,title : "刷新"},
  304. saveAsImage : {
  305. show: true,
  306. onClickStart:function(saveAsImage,option){
  307. //alert(JSON.stringify(saveAsImage));
  308. },
  309. onClickEnd:function(saveAsImage,option){
  310. //alert("保存结束");
  311. },
  312. backgroundColor:"#002050"
  313. }//保存图片
  314. },
  315. textStyle:{//工具箱的文本样式
  316. color:"#FFFFFF"
  317. }
  318. },
  319. calculable : true,
  320. series :op.sArr,
  321. //背景颜色做测试使用,所有统计图做完后注释掉,改为透明背景
  322. //backgroundColor: "rgb(25,39,53)"
  323. };
  324. return option;
  325. }
  326. function getEchart($dom,fn,op,myChart){
  327. if(myChart!=null){
  328. myChart.clear();
  329. }
  330. if(myChart==null){
  331. myChart = echarts.init($dom.get(0));
  332. }
  333. myChart.setOption(fn(op));
  334. /* window.onresize = myChart.resize;*/
  335. return myChart;
  336. }