cc085db865e3a6bb1ab3bb599b77cf0e82a7c7fb.svn-base 8.9 KB

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