room.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269
  1. //计划完成表的当前所选
  2. /*大屏*/
  3. var indexnum = 0;
  4. var color=['#F35331','#2499F8','#3DF098','#33B734'];
  5. var fontColor='#FFF';
  6. //定义进度条组件和属性
  7. var y_gauge1 =null;
  8. var y_gauge2 =null;
  9. var y_gauge3 =null;
  10. var y_gauge4 =null;
  11. var m_gauge1 =null;
  12. var option_Progress =null;
  13. //订单情况螺旋图
  14. var orderStatus=null;
  15. var orderStatus_option =null;
  16. //定义仪表盘组件和属性
  17. var gauge1 =null;
  18. var gauge2 =null;
  19. var gauge3 =null;
  20. var gauge4 =null;
  21. var gauge5 =null;
  22. var option_gauge =null;
  23. //产品饼图组件和属性
  24. var productPie=null;
  25. var productPie_option=null;
  26. //业务进展图组件和属性
  27. var businessProgress=null;
  28. var businessProgress_placeHoledStyle = null;
  29. var businessProgress_dataStyle =null;
  30. var businessProgress_option=null;
  31. //生产质量堆积图组件和属性
  32. var quality_chart = null;
  33. var quality_option=null;
  34. //词云组件和属性
  35. var wordCloud= null;
  36. var wordCloud_option=null;
  37. //生产计划折线图组件和属性
  38. var plan_chart = null;
  39. var plan_option=null;
  40. //环形图的风格定义
  41. var dataStyle = {
  42. normal: {
  43. label: {show:false},
  44. labelLine: {show:false}
  45. }
  46. };
  47. var placeHolderStyle = {
  48. normal : {
  49. color: 'rgba(0,0,0,0.1)',
  50. label: {show:false},
  51. labelLine: {show:false}
  52. },
  53. emphasis : {
  54. color: 'rgba(0,0,0,0)'
  55. }
  56. };
  57. //最大订单号
  58. var lastOrderNumber=1;
  59. $(document).ready(function ()
  60. {
  61. //环形进度条设置对象
  62. option_Progress={
  63. title : {
  64. text: '目前进度',
  65. subtext: '50%',
  66. x: 'center',
  67. y: 90,
  68. itemGap: 10,
  69. textStyle : {
  70. color : '#B7E1FF',
  71. fontWeight: 'normal',
  72. fontFamily : '微软雅黑',
  73. fontSize : 24
  74. },
  75. subtextStyle:{
  76. color: '#B7E1FF',
  77. fontWeight: 'bolder',
  78. fontSize:24,
  79. fontFamily : '微软雅黑'
  80. }
  81. },
  82. series : [{
  83. type : 'pie',
  84. center : ['50%', '50%'],
  85. radius : [75,90],
  86. x: '0%',
  87. tooltip:{show:false},
  88. data : [{
  89. name:'达成率',
  90. value:79,
  91. itemStyle:{color :'rgba(0,153,255,0.8)'},
  92. hoverAnimation: false,
  93. label : {
  94. show : false,
  95. position : 'center',
  96. textStyle: {
  97. fontFamily:'微软雅黑',
  98. fontWeight: 'bolder',
  99. color:'#B7E1FF',
  100. fontSize:24
  101. }
  102. },
  103. labelLine : {
  104. show : false
  105. }
  106. },
  107. {
  108. name:'79%',
  109. value:21,
  110. itemStyle:{color: 'rgba(0,153,255,0.1)'},
  111. hoverAnimation: false,
  112. label : {
  113. show : false,
  114. position : 'center',
  115. padding:20,
  116. textStyle: {
  117. fontFamily:'微软雅黑',
  118. fontSize: 24,
  119. color:'#B7E1FF'
  120. }
  121. },
  122. labelLine : {
  123. show : false
  124. }
  125. }]
  126. },
  127. {
  128. type : 'pie',
  129. center : ['50%', '50%'],
  130. radius : [95,100],
  131. x: '0%',
  132. hoverAnimation: false,
  133. data : [{
  134. value:100,
  135. itemStyle:{color :'rgba(0,153,255,0.3)'},
  136. label : {show : false},
  137. labelLine : {show : false}
  138. }]
  139. },
  140. {
  141. type : 'pie',
  142. center : ['50%', '50%'],
  143. radius : [69,70],
  144. x: '0%',
  145. hoverAnimation: false,
  146. data : [{
  147. value:100,
  148. itemStyle:{color :'rgba(0,153,255,0.3)'},
  149. label : {show : false},
  150. labelLine : {show : false}
  151. }]
  152. }]
  153. };
  154. //年仪表盘
  155. y_gauge1 = echarts.init(document.getElementById('y_gauge1'));
  156. y_gauge2 = echarts.init(document.getElementById('y_gauge2'));
  157. y_gauge3 = echarts.init(document.getElementById('y_gauge3'));
  158. y_gauge4 = echarts.init(document.getElementById('y_gauge4'));
  159. //订单完成情况螺旋图
  160. var yearPlanData=[];
  161. var yearOrderData=[];
  162. var differenceData=[];
  163. var visibityData=[];
  164. var xAxisData=[];
  165. for(var i=0;i<12;i++)
  166. {
  167. yearPlanData.push(Math.round(Math.random()*900)+100);
  168. yearOrderData.push(Math.round(Math.random()*yearPlanData[i]));
  169. differenceData.push(yearPlanData[i]-yearOrderData[i]);
  170. visibityData.push(yearOrderData[i]);
  171. xAxisData.push((i+1).toString()+"月");
  172. }
  173. orderStatus= echarts.init(document.getElementById('orderStatus'));
  174. orderStatus_option={
  175. title :{show:false},
  176. tooltip : {
  177. trigger: 'axis',
  178. formatter: function (params){
  179. return params[0].name + '<br/>'
  180. + params[0].seriesName + ' : ' + params[0].value + '<br/>'
  181. + params[1].seriesName + ' : ' + params[1].value + '<br/>'
  182. +'完成率:'
  183. + (params[0].value > 0 ? (params[1].value/params[0].value*100).toFixed(2)+'%' : '-')
  184. + '<br/>'
  185. },
  186. textStyle: {
  187. color: '#FFF',
  188. fontSize:24
  189. }
  190. },
  191. toolbox: {show:false},
  192. legend:{
  193. top: 'top',
  194. textStyle: {
  195. color: '#B7E2FF',
  196. fontSize:24,
  197. fontFamily:'微软雅黑'
  198. },
  199. data:['计划生产','已接订单']
  200. },
  201. xAxis: {
  202. data: xAxisData,
  203. axisLabel: {
  204. textStyle: {
  205. color: '#B7E1FF',
  206. fontSize:24
  207. }
  208. },
  209. axisLine:{
  210. lineStyle:{
  211. color:'#09F'
  212. }
  213. },
  214. axisTick:{
  215. lineStyle:{
  216. color:'#09F'
  217. }
  218. }
  219. },
  220. yAxis: {
  221. inverse: false,
  222. splitArea: {show: false},
  223. axisLine: {show: false},
  224. axisTick: {show: false},
  225. axisLabel: {
  226. textStyle: {
  227. color: '#B7E1FF',
  228. fontSize:24,
  229. fontFamily:'Arial',
  230. }
  231. },
  232. splitLine :{
  233. lineStyle:{
  234. color:'#09F'
  235. }
  236. }
  237. },
  238. grid: {
  239. left: 100
  240. },
  241. series : [{
  242. name:'计划生产',
  243. type:'line',
  244. smooth :true,
  245. symbol: 'circle',
  246. symbolSize: 10,
  247. showAllSymbol : true,
  248. color:color[1],
  249. data:yearPlanData
  250. },
  251. {
  252. name:'已接订单',
  253. type:'line',
  254. smooth :true,
  255. symbol: 'circle',
  256. symbolSize: 10,
  257. showAllSymbol : true,
  258. color:'#F90',
  259. itemStyle:{
  260. normal:{
  261. lineStyle: {
  262. width:2
  263. }
  264. }
  265. },
  266. data:yearOrderData
  267. },
  268. {
  269. name:'不可见',
  270. type:'bar',
  271. stack: '1',
  272. barWidth: 1,
  273. itemStyle:{
  274. normal:{
  275. color:'rgba(0,0,0,0)'
  276. },
  277. emphasis:{
  278. color:'rgba(0,0,0,0)'
  279. }
  280. },
  281. data:visibityData
  282. },
  283. {
  284. name:'变化',
  285. type:'bar',
  286. stack: '1',
  287. barWidth: 1,
  288. color:'#B7E1FF',
  289. data:differenceData
  290. }
  291. ]
  292. }
  293. orderStatus.setOption(orderStatus_option);
  294. //产品销售的环形图
  295. var productLegend=[['轿车1','轿车2','轿车3','轿车4','轿车5','轿车6','轿车7','轿车8','轿车9'],['SUV1','SUV2','SUV3','SUV4'],['卡车1','卡车2','卡车3','卡车4','卡车5','卡车6']];
  296. var productClassLegend=['轿车','SUV','卡车'];
  297. var productClassColor=['rgba(255,153,0,','rgba(153,204,102,','rgba(0,102,255,'];
  298. var productClassData=[];
  299. var productData=[];
  300. var productColor=[];
  301. for(var i=0;i<productClassLegend.length;i++)
  302. {
  303. var total=0;
  304. for(var j=0;j<productLegend[i].length;j++)
  305. {
  306. var n=Math.round(Math.random()*100)+1;
  307. productData.push({name:productLegend[i][j],value:n});
  308. total+=n;
  309. }
  310. for(var j=0;j<productLegend[i].length;j++)
  311. {
  312. productColor.push(productClassColor[i]+(1.0-productData[j].value/total).toFixed(2)+")");
  313. }
  314. productClassData.push({name:productClassLegend[i],value:total});
  315. }
  316. productPie=echarts.init(document.getElementById('productPie'));
  317. productPie_option={
  318. title : {
  319. text: '销售额',
  320. x: 'center',
  321. y: 'center',
  322. itemGap: 10,
  323. textStyle : {
  324. color : '#09F',
  325. fontWeight: 'normal',
  326. fontFamily : '微软雅黑',
  327. fontSize : 32
  328. }
  329. },
  330. calculable : false,
  331. tooltip : {
  332. trigger: 'item',
  333. textStyle: {
  334. color:'#FFF',
  335. fontSize:24
  336. },
  337. formatter: "{a} <br/>{b} : {c} ({d}%)"
  338. },
  339. series : [
  340. {
  341. name:'类别',
  342. type:'pie',
  343. selectedMode: 'single',
  344. radius : ['20%','40%'],
  345. width: '40%',
  346. funnelAlign: 'right',
  347. itemStyle : {
  348. normal : {
  349. color:function(d)
  350. {
  351. return productClassColor[d.dataIndex]+'1)';
  352. },
  353. borderColor:'#032749',
  354. label : {
  355. position : 'inner',
  356. fontSize:28,
  357. },
  358. labelLine : {
  359. show : false
  360. }
  361. }
  362. },
  363. data:productClassData
  364. },
  365. {
  366. name:'车型',
  367. type:'pie',
  368. radius : ['40%','70%'],
  369. width: '35%',
  370. funnelAlign: 'left',
  371. itemStyle : {
  372. normal : {
  373. color:function(d)
  374. {
  375. return productColor[d.dataIndex];
  376. },
  377. borderColor:'#032749',
  378. label : {
  379. color:'#B7E1FF',
  380. fontSize:24
  381. }
  382. }
  383. },
  384. data:productData
  385. }
  386. ]
  387. };
  388. productPie.setOption(productPie_option);
  389. //业务进展图
  390. businessProgress=echarts.init(document.getElementById('businessProgress'));
  391. businessProgress_placeHoledStyle = {
  392. normal:{
  393. barBorderColor:'rgba(0,0,0,0)',
  394. color:'rgba(0,0,0,0)'
  395. },
  396. emphasis:{
  397. barBorderColor:'rgba(0,0,0,0)',
  398. color:'rgba(0,0,0,0)'
  399. }
  400. };
  401. businessProgress_dataStyle = {
  402. normal: {
  403. barBorderColor:'rgba(0,102,255,1)',
  404. color:function(d){
  405. return 'rgba(0,102,255,0.3)';
  406. },
  407. label : {
  408. show: true,
  409. position: 'insideLeft',
  410. formatter: '{c}%',
  411. textStyle: {
  412. fontFamily:'Arial',
  413. fontWeight: 'bolder',
  414. color:'#B7E1FF',
  415. fontSize:24
  416. }
  417. }
  418. }
  419. };
  420. businessProgress_option = {
  421. title: {show:false},
  422. tooltip : {
  423. trigger: 'axis',
  424. axisPointer : {
  425. type : 'shadow'
  426. },
  427. textStyle: {
  428. color:'#FFF',
  429. fontSize:24
  430. },
  431. formatter : '{b}<br/>{a0}:{c0}%<br/>{a2}:{c2}%<br/>{a4}:{c4}%<br/>{a6}:{c6}%'
  432. },
  433. legend: {
  434. itemGap : 60,
  435. top:'top',
  436. textStyle: {
  437. fontFamily:'微软雅黑',
  438. fontWeight: 'bolder',
  439. color:'#B7E1FF',
  440. fontSize:24
  441. },
  442. data:['项目投标', '投标进度','项目进行', '项目交付']
  443. },
  444. toolbox: {show : false},
  445. grid: {
  446. left: 150
  447. },
  448. xAxis : [
  449. {
  450. type : 'value',
  451. position: 'top',
  452. axisLine:{
  453. lineStyle:{color:'#09F'}
  454. },
  455. splitLine :{
  456. lineStyle:{color:'#09F' }
  457. },
  458. axisLabel: {show: false},
  459. }
  460. ],
  461. yAxis : [
  462. {
  463. type : 'category',
  464. data : ['重大业务1', '重大业务2', '重大业务3', '重大业务4'],
  465. axisLabel: {
  466. textStyle: {
  467. color: '#B7E1FF',
  468. fontSize:24
  469. }
  470. },
  471. axisLine:{
  472. lineStyle:{
  473. color:'#09F'
  474. }
  475. },
  476. splitLine :{
  477. lineStyle:{color:'#09F' }
  478. }
  479. }
  480. ],
  481. series : [
  482. {
  483. name:'项目投标',
  484. type:'bar',
  485. stack: '进度',
  486. itemStyle : businessProgress_dataStyle,
  487. data:[100, 100, 100, 70]
  488. },
  489. {
  490. name:'项目投标',
  491. type:'bar',
  492. stack: '进度',
  493. itemStyle: businessProgress_placeHoledStyle,
  494. data:[0, 0, 0, 30]
  495. },
  496. {
  497. name:'投标进度',
  498. type:'bar',
  499. stack: '进度',
  500. itemStyle : businessProgress_dataStyle,
  501. data:[100, 100, 42, 0]
  502. },
  503. {
  504. name:'投标进度',
  505. type:'bar',
  506. stack: '进度',
  507. itemStyle: businessProgress_placeHoledStyle,
  508. data:[0, 0, 58, 100]
  509. },
  510. {
  511. name:'项目进行',
  512. type:'bar',
  513. stack: '进度',
  514. itemStyle : businessProgress_dataStyle,
  515. data:[100, 100, 0, 0]
  516. },
  517. {
  518. name:'项目进行',
  519. type:'bar',
  520. stack: '进度',
  521. itemStyle: businessProgress_placeHoledStyle,
  522. data:[0, 0, 100, 100]
  523. },
  524. {
  525. name:'项目交付',
  526. type:'bar',
  527. stack: '进度',
  528. itemStyle : businessProgress_dataStyle,
  529. data:[71, 50, 0, 0]
  530. },
  531. {
  532. name:'项目交付',
  533. type:'bar',
  534. stack: '进度',
  535. itemStyle: businessProgress_placeHoledStyle,
  536. data:[29, 50, 100, 100]
  537. }
  538. ]
  539. };
  540. businessProgress.setOption(businessProgress_option);
  541. //监控仪表盘
  542. /*option_gauge = {
  543. title: {
  544. text: '', //标题文本内容
  545. },
  546. toolbox: { //可视化的工具箱
  547. show: false,
  548. },
  549. tooltip: { //弹窗组件
  550. formatter: "{a} <br/>{b} : {c}%"
  551. },
  552. series: [{
  553. type: 'gauge',
  554. axisLine: {// 坐标轴线
  555. lineStyle: { // 属性lineStyle控制线条样式
  556. color:[[0.2, color[0]],[0.8, color[1]],[1, color[0]]],
  557. width: 18
  558. }
  559. },
  560. splitLine: { // 分隔线
  561. show:true,
  562. length: 18,
  563. lineStyle: {
  564. color: '#28292D',
  565. width: 1
  566. }
  567. },
  568. axisTick : { //刻度线样式(及短线样式)
  569. show:false,
  570. lineStyle: {
  571. color: 'auto',
  572. width: 1
  573. },
  574. length : 20
  575. },
  576. axisLabel : {
  577. color:'#FFF',
  578. fontSize:14,
  579. fontFamily:'Verdana, Geneva, sans-serif'
  580. },
  581. title: {
  582. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  583. fontWeight: 'bolder',
  584. fontSize: 20,
  585. color: '#FFF'
  586. },
  587. offsetCenter: [0, '30%']
  588. },
  589. pointer: {
  590. width: 5,
  591. color: '#F00',
  592. shadowColor: '#FF0',
  593. shadowBlur: 10
  594. },
  595. detail: {
  596. show:false,
  597. formatter:'{value}%',
  598. textStyle:
  599. {
  600. fontFamily:'Arial',
  601. color: '#000',
  602. fontSize:'32px'
  603. },
  604. offsetCenter: [0, '90%']
  605. },
  606. data: [{value: 45, name: '水'}]
  607. }]
  608. };
  609. gauge1 = echarts.init(document.getElementById('gauge1'));
  610. gauge2 = echarts.init(document.getElementById('gauge2'));
  611. gauge3 = echarts.init(document.getElementById('gauge3'));
  612. gauge4 = echarts.init(document.getElementById('gauge4'));
  613. gauge5 = echarts.init(document.getElementById('gauge5'));
  614. option_gauge.series[0].axisLine.lineStyle.color=[[0.2, color[0]],[0.8, color[1]],[1, color[2]]];
  615. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  616. option_gauge.series[0].data[0].name ="水";
  617. $('#vg1').html(option_gauge.series[0].data[0].value);
  618. gauge1.setOption(option_gauge);
  619. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  620. option_gauge.series[0].data[0].name ="电";
  621. $('#vg2').html(option_gauge.series[0].data[0].value);
  622. gauge2.setOption(option_gauge);
  623. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  624. option_gauge.series[0].data[0].name ="天然气";
  625. $('#vg3').html(option_gauge.series[0].data[0].value);
  626. gauge3.setOption(option_gauge);
  627. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  628. option_gauge.series[0].data[0].name ="压缩空气";
  629. $('#vg4').html(option_gauge.series[0].data[0].value);
  630. gauge4.setOption(option_gauge);
  631. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  632. option_gauge.series[0].data[0].name ="蒸汽";
  633. $('#vg5').html(option_gauge.series[0].data[0].value);
  634. gauge5.setOption(option_gauge);*/
  635. //生产质量堆积图
  636. quality_chart = echarts.init(document.getElementById('quality'));
  637. quality_option={
  638. title: {
  639. show:false,
  640. text: 'AUDIT',
  641. left: 'center',
  642. textStyle: {
  643. color: '#F00',
  644. fontSize:32
  645. }
  646. },
  647. xAxis: {
  648. data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  649. axisLabel: {
  650. textStyle: {
  651. color: '#B7E1FF',
  652. fontSize:24
  653. }
  654. },
  655. axisLine:{
  656. lineStyle:{
  657. color:'#09F'
  658. }
  659. },
  660. axisTick:{
  661. lineStyle:{
  662. color:'#09F'
  663. }
  664. }
  665. },
  666. yAxis: {
  667. inverse: false,
  668. splitArea: {show: false},
  669. axisLine: {show: false},
  670. axisTick: {show: false},
  671. axisLabel: {
  672. textStyle: {
  673. color: '#B7E1FF',
  674. fontSize:24,
  675. fontFamily:'Arial',
  676. }
  677. },
  678. splitLine :{
  679. lineStyle:{
  680. color:'#09F'
  681. }
  682. }
  683. },
  684. grid: {
  685. left: 100
  686. },
  687. tooltip: {
  688. trigger: 'item',
  689. textStyle: {
  690. color: '#B7E1FF',
  691. fontSize:24
  692. }
  693. },
  694. legend:{
  695. show:false,
  696. top: 'bottom',
  697. textStyle: {
  698. color: '#F00',
  699. fontSize:24,
  700. fontFamily:'微软雅黑'
  701. },
  702. data:['AUDIT分数1','AUDIT分数']
  703. },
  704. series: [
  705. {
  706. name: 'AUDIT分数1',
  707. type: 'bar',
  708. stack: 'one',
  709. itemStyle:
  710. {
  711. normal: {color: color[1]}
  712. },
  713. barWidth : 60,
  714. data:[2200,2900,3680,2200,2900,3680,2200,2900,3680,2200,2900,3680]
  715. },
  716. {
  717. name: 'AUDIT分数',
  718. type: 'bar',
  719. stack: 'one',
  720. itemStyle: {
  721. normal: {
  722. color: '#F90',
  723. label: {
  724. show: true,
  725. position: 'insideTop',
  726. textStyle: {
  727. color: '#000',
  728. fontSize:24
  729. }
  730. }
  731. }
  732. },
  733. barWidth : 50,
  734. data: [1800,1100,320,1800,1100,320,1800,1100,320,1800,1100,320]
  735. }
  736. ]
  737. };
  738. quality_chart.setOption(quality_option);
  739. //生产计划折线图
  740. var plan_data1=[];
  741. var plan_data2=[];
  742. var plan_xAxis=[];
  743. for (var i = 1; i <= 12; i++) {
  744. plan_xAxis.push(i+"月");
  745. plan_data1.push(Math.round(Math.random() * 100));
  746. plan_data2.push(Math.round(Math.random() * 100));
  747. }
  748. plan_chart = echarts.init(document.getElementById('plan'));
  749. plan_option={
  750. xAxis: {
  751. data:plan_xAxis,
  752. axisLabel: {
  753. textStyle: {
  754. color: '#B7E1FF',
  755. fontSize:24
  756. }
  757. },
  758. axisLine:{
  759. lineStyle:{
  760. color:'#09F'
  761. }
  762. },
  763. axisTick:{
  764. lineStyle:{
  765. color:'#09F'
  766. }
  767. }
  768. },
  769. yAxis: {
  770. inverse: false,
  771. splitArea: {show: false},
  772. axisLine: {show: false},
  773. axisTick: {show: false},
  774. axisLabel: {
  775. textStyle: {
  776. color: '#B7E1FF',
  777. fontSize:24,
  778. fontFamily:'Arial',
  779. }
  780. },
  781. splitLine :{
  782. lineStyle:{
  783. color:'#09F'
  784. }
  785. }
  786. },
  787. tooltip: {
  788. trigger: 'axis',
  789. textStyle: {
  790. color: '#FFF',
  791. fontSize:24
  792. }
  793. },
  794. grid: {
  795. left: 100
  796. },
  797. legend:{
  798. show:false,
  799. top: 'bottom',
  800. textStyle: {
  801. color: '#F00',
  802. fontSize:24
  803. },
  804. data:['计划完成数','实际完成数']
  805. },
  806. series: [
  807. {
  808. name: '计划完成数',
  809. type: 'bar',
  810. itemStyle:
  811. {
  812. normal: {color: color[1]},
  813. emphasis: {color: color[2]}
  814. },
  815. barWidth : 40,
  816. data:plan_data1
  817. },
  818. {
  819. name: '实际完成数',
  820. type: 'line',
  821. itemStyle: {
  822. normal: {
  823. color: '#F90',
  824. label: {
  825. show: true,
  826. position: 'top',
  827. textStyle: {
  828. color: '#CCC',
  829. fontSize:24
  830. }
  831. },
  832. lineStyle:{
  833. color:'#F90',
  834. width:4
  835. }
  836. },
  837. emphasis: {
  838. color: '#FF0'
  839. }
  840. },
  841. symbolSize: 24,
  842. data: plan_data2
  843. }
  844. ]
  845. };
  846. plan_chart.setOption(plan_option);
  847. //轮番显示tips
  848. /*function clock(){
  849. showToolTip_highlight(plan_chart);
  850. }
  851. setInterval(clock, 5000);*/
  852. //词云
  853. var cloudData=[];
  854. for(var i=0;i<30;i++)
  855. {
  856. cloudData.push({name:'文字云字符'+i.toString(),value:Math.random()*1000});
  857. }
  858. wordCloud=echarts.init(document.getElementById('wordCloud'));
  859. wordCloud_option={
  860. left: 'center',
  861. top: 'center',
  862. tooltip: {
  863. textStyle: {
  864. color: '#FFF',
  865. fontSize:24
  866. }},
  867. series : [{
  868. type : 'wordCloud',
  869. shape:'smooth',
  870. drawOutOfBound: true,
  871. gridSize : 10,
  872. sizeRange : [ 10, 48 ],
  873. rotationRange: [0, 0],
  874. textStyle : {
  875. normal : {
  876. color :function (d) {
  877. // Random color
  878. return 'rgba(0,153,255,'+(d.value/1000)+ ')';
  879. }
  880. },
  881. emphasis : {
  882. shadowBlur : 10,
  883. shadowColor : '#333'
  884. }
  885. },
  886. data : cloudData
  887. }]
  888. };
  889. wordCloud.setOption(wordCloud_option);
  890. //地图开始
  891. var map_chart = echarts.init(document.getElementById('map'));
  892. /*map_option = {
  893. title : {show:false},
  894. tooltip: {
  895. show:function(d)
  896. {
  897. return (d.value!=null && d.value>=0);
  898. },
  899. trigger: 'item',
  900. formatter:function(d){
  901. return (d.value>=0)?d.name+'</br>战略力度:'+(d.value).toFixed(2):'';
  902. },
  903. textStyle: {
  904. color: '#FFF',
  905. fontSize:24
  906. }
  907. },
  908. legend: {
  909. show:false
  910. },
  911. dataRange: {
  912. show:false,
  913. min: 0,
  914. max: 100,
  915. text:['High','Low'],
  916. realtime: false,
  917. calculable : false,
  918. color: ['rgba(0,51,204,0.8)','rgba(0,102,255,0.8)','rgba(0,153,255,0.8)'],
  919. splitList: [
  920. {start: 0,end: 30},
  921. {start: 31, end: 70},
  922. {start: 71, end: 100},
  923. ]
  924. },
  925. series: [{
  926. name: '布局',
  927. type: 'map',
  928. mapType: 'china',
  929. roam: false,
  930. showLegendSymbol : false,
  931. label: {
  932. show: true,
  933. textStyle: {
  934. color: '#FFF',
  935. fontSize:18
  936. }
  937. },
  938. itemStyle :{
  939. areaColor :'rgba(0,0,0,0.2)',
  940. borderColor : '#09F'
  941. },
  942. emphasis:{
  943. areaColor :'rgba(255,0,0,0.8)',
  944. borderColor : 'rgba(255,0,0,0.8)'
  945. },
  946. data:[
  947. {name: '北京', value:Math.random()*100},
  948. {name: '天津', value:Math.random()*100},
  949. {name: '上海', value:Math.random()*100},
  950. {name: '重庆', value:Math.random()*100},
  951. {name: '河北', value:Math.random()*100},
  952. {name: '河南', value:Math.random()*100},
  953. {name: '辽宁', value:Math.random()*100},
  954. {name: '黑龙江', value:Math.random()*100},
  955. {name: '湖南', value:Math.random()*100},
  956. {name: '安徽', value:Math.random()*100},
  957. {name: '山东', value:Math.random()*100},
  958. {name: '江苏', value:Math.random()*100},
  959. {name: '浙江', value:Math.random()*100},
  960. {name: '江西', value:Math.random()*100},
  961. {name: '湖北', value:Math.random()*100},
  962. {name: '广西', value:Math.random()*100},
  963. {name: '甘肃', value:Math.random()*100},
  964. {name: '山西', value:Math.random()*100},
  965. {name: '内蒙古', value:Math.random()*100},
  966. {name: '陕西', value:Math.random()*100},
  967. {name: '吉林', value:Math.random()*100},
  968. {name: '福建', value:Math.random()*100},
  969. {name: '贵州', value:Math.random()*100},
  970. {name: '广东', value:Math.random()*100},
  971. {name: '青海', value:Math.random()*100},
  972. {name: '四川', value:Math.random()*100},
  973. {name: '宁夏', value:Math.random()*100},
  974. {name: '海南', value:Math.random()*100}
  975. ]
  976. }]
  977. };*/
  978. var mapData=[];
  979. for(key in geoCoordMap)
  980. {
  981. var geoCoord = geoCoordMap[key];
  982. mapData.push({name:key,value:geoCoord.concat((Math.random()*1000).toFixed(2))});
  983. }
  984. map_option = {
  985. title : {show:false},
  986. tooltip : {
  987. trigger: 'item',
  988. formatter: function(params) {
  989. if (typeof(params.value)[2] == "undefined") {
  990. return params.name + ' : ' + params.value;
  991. } else {
  992. return params.name + ' : ' + params.value[2];
  993. }
  994. },
  995. textStyle: {
  996. color: '#FFF',
  997. fontSize:24
  998. }
  999. },
  1000. legend: {
  1001. show:false
  1002. },
  1003. geo: {
  1004. map: 'china',
  1005. label: {
  1006. normal: {show: false},
  1007. emphasis: {show: false}
  1008. },
  1009. roam: false,
  1010. itemStyle: {
  1011. normal: {
  1012. areaColor: 'rgba(0,153,255,0.6)',
  1013. borderColor: '#09F'
  1014. },
  1015. emphasis: {
  1016. areaColor: 'rgba(0,153,255,0.6)',
  1017. borderColor: '#09F'
  1018. }
  1019. }
  1020. },
  1021. series: [{
  1022. name: '战略布局点',
  1023. type: 'scatter',
  1024. coordinateSystem: 'geo',
  1025. zlevel: 1,
  1026. rippleEffect: {
  1027. brushType: 'stroke'
  1028. },
  1029. symbolSize: function (val) {
  1030. return val[2] / 30;
  1031. },
  1032. label: {
  1033. normal: {show: false},
  1034. emphasis: {show: false}
  1035. },
  1036. itemStyle: {
  1037. normal: {color: 'rgba(255,255,0,0.8)'},
  1038. emphasis: {color: 'rgba(246,33,87,1)'}
  1039. },
  1040. data: mapData
  1041. },
  1042. {
  1043. name: '战略布局TOP5',
  1044. type: 'effectScatter',
  1045. coordinateSystem: 'geo',
  1046. zlevel: 2,
  1047. hoverAnimation: true,
  1048. showEffectOn: 'render',
  1049. rippleEffect: {
  1050. brushType: 'stroke'
  1051. },
  1052. label: {
  1053. normal: {
  1054. show: true,
  1055. fontFamily:'微软雅黑',
  1056. fontSize: 24,
  1057. color:'#FFF',
  1058. formatter: '{b}',
  1059. position: 'right',
  1060. shadowBlur: 5,
  1061. shadowColor: '#000'
  1062. },
  1063. emphasis: {
  1064. show: true
  1065. }
  1066. },
  1067. symbolSize: function (val) {
  1068. return val[2] / 30;
  1069. },
  1070. itemStyle: {
  1071. normal: {
  1072. color: 'rgba(255,255,255,1)'
  1073. }
  1074. },
  1075. data: mapData.sort(function(a, b) {
  1076. return b.value[2] - a.value[2];
  1077. }).slice(0, 5)
  1078. },
  1079. {
  1080. name: '点',
  1081. type: 'scatter',
  1082. coordinateSystem: 'geo',
  1083. symbol: 'pin',
  1084. symbolSize: function(val) {
  1085. return val[2]/10;
  1086. },
  1087. label: {
  1088. normal: {
  1089. show: true,
  1090. fontFamily:'Arial, Helvetica, sans-serif',
  1091. formatter:'{@[2]}',
  1092. textStyle: {
  1093. color: '#FFF',
  1094. fontSize: 18,
  1095. }
  1096. }
  1097. },
  1098. itemStyle: {
  1099. normal: {
  1100. color: 'rgba(246,33,87,1)', //标志颜色
  1101. }
  1102. },
  1103. zlevel: 3,
  1104. data: mapData.sort(function(a, b) {
  1105. return b.value[2] - a.value[2];
  1106. }).slice(0, 5)
  1107. }]
  1108. };
  1109. map_chart.setOption(map_option, true);
  1110. resresh();
  1111. //开始定时刷新
  1112. setInterval(resresh, 5*1000);
  1113. });
  1114. var convertData = function (data) {
  1115. var res = [];
  1116. for (var i = 0; i < data.length; i++) {
  1117. var dataItem = data[i];
  1118. var fromCoord = geoCoordMap[dataItem[0].name];
  1119. var toCoord = geoCoordMap[dataItem[1].name];
  1120. if (fromCoord && toCoord) {
  1121. res.push({
  1122. fromName: dataItem[0].name,
  1123. toName: dataItem[1].name,
  1124. coords: [fromCoord, toCoord]
  1125. });
  1126. }
  1127. }
  1128. return res;
  1129. };
  1130. function showToolTip_highlight(mychart)
  1131. {
  1132. var echartObj = mychart;
  1133. // 高亮当前图形
  1134. var highlight =setInterval(function()
  1135. {
  1136. echartObj.dispatchAction({
  1137. type: 'highlight',
  1138. seriesIndex: 0,
  1139. dataIndex: indexnum
  1140. });
  1141. echartObj.dispatchAction({
  1142. type: 'showTip',
  1143. seriesIndex: 0,
  1144. dataIndex: indexnum
  1145. });
  1146. clearInterval(highlight);
  1147. indexnum = indexnum + 1;
  1148. if(indexnum>=7) indexnum=0;
  1149. },1000);
  1150. }
  1151. /*大屏*/
  1152. //定时刷新数据
  1153. function resresh()
  1154. {
  1155. var myDate = new Date();
  1156. $('#refresh').html("<img src=\"images/wait.gif\" align=\"absmiddle\"><span>数据刷新中...</span>");
  1157. $('#currentDate').html(myDate.getFullYear()+"/"+insertZero(myDate.getMonth()+1)+"/"+insertZero(myDate.getDate()));
  1158. var maxg=Math.round(Math.random()*500)+400;
  1159. var n1=Math.round(Math.random()*(maxg-100))+100;
  1160. var n2=Math.round(Math.random()*(n1-50))+50;
  1161. var n3=(n2/maxg*100).toFixed(2);
  1162. //年进度条
  1163. option_Progress.title.text ="计划生产";
  1164. option_Progress.series[0].data[0].value = maxg;
  1165. option_Progress.title.subtext =maxg+"台";
  1166. option_Progress.series[0].data[1].value =0;
  1167. y_gauge1.setOption(option_Progress);
  1168. option_Progress.title.text ="已接订单";
  1169. option_Progress.series[0].data[0].value = n1;
  1170. option_Progress.title.subtext =n1+"台";
  1171. option_Progress.series[0].data[1].value =(maxg-n1);
  1172. y_gauge2.setOption(option_Progress);
  1173. option_Progress.title.text ="已经完成";
  1174. option_Progress.series[0].data[0].value = n2;
  1175. option_Progress.title.subtext =n2+"台";
  1176. option_Progress.series[0].data[1].value =(maxg-n2);
  1177. y_gauge3.setOption(option_Progress);
  1178. option_Progress.title.text ="计划完成率";
  1179. option_Progress.series[0].data[0].value = n3;
  1180. option_Progress.title.subtext =n3+"%";
  1181. option_Progress.series[0].data[1].value =(100-n3);
  1182. y_gauge4.setOption(option_Progress);
  1183. //仪表盘刷新
  1184. /*option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  1185. option_gauge.series[0].data[0].name ="水";
  1186. $('#vg1').html(option_gauge.series[0].data[0].value);
  1187. gauge1.setOption(option_gauge);
  1188. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  1189. option_gauge.series[0].data[0].name ="电";
  1190. $('#vg2').html(option_gauge.series[0].data[0].value);
  1191. gauge2.setOption(option_gauge);
  1192. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  1193. option_gauge.series[0].data[0].name ="天然气";
  1194. $('#vg3').html(option_gauge.series[0].data[0].value);
  1195. gauge3.setOption(option_gauge);
  1196. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  1197. option_gauge.series[0].data[0].name ="压缩空气";
  1198. $('#vg4').html(option_gauge.series[0].data[0].value);
  1199. gauge4.setOption(option_gauge);
  1200. option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  1201. option_gauge.series[0].data[0].name ="蒸汽";
  1202. $('#vg5').html(option_gauge.series[0].data[0].value);
  1203. gauge5.setOption(option_gauge); */
  1204. //显示最后更新时间
  1205. $('#refresh').html("<span id=\"refreshTime\">最后刷新时间:"+myDate.toLocaleDateString()+" "+myDate.toLocaleTimeString()+"</span>");
  1206. }
  1207. //生成订单号
  1208. function getOrderNumber(n)
  1209. {
  1210. var no="000000"+n.toString();
  1211. return no.substring(no.length-6);
  1212. }
  1213. //前面补0
  1214. function insertZero(n)
  1215. {
  1216. var no="000000"+n.toString();
  1217. return no.substring(no.length-2);
  1218. }
  1219. //打开模态窗口
  1220. function openDialog(DlgName)
  1221. {
  1222. $('#'+DlgName).dialog('open');
  1223. }