index.js 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018
  1. $(function(){
  2. map();
  3. leidatu();
  4. wuran();
  5. huaxing();
  6. zhexian();
  7. //大屏
  8. function leida1(){
  9. var myChart = echarts.init(document.getElementById('map'));
  10. myChart.setOption(option);
  11. window.addEventListener("resize",function(){
  12. myChart.resize();
  13. });
  14. }
  15. })
  16. function map(){
  17. var myChart = echarts.init(document.getElementById('map'));
  18. let iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="
  19. let data = [{
  20. name: "北京",
  21. value: [116.24, 39.55, 100]
  22. },
  23. {
  24. name: "深圳",
  25. value: [114.271522, 22.753644]
  26. },
  27. {
  28. name: "重庆",
  29. value: [106.54, 29.59]
  30. },
  31. {
  32. name: "浙江",
  33. value: [120.19, 30.26]
  34. },
  35. {
  36. name: "上海",
  37. value: [121.4648, 31.2891]
  38. },
  39. ]
  40. let LableData = [
  41. {
  42. name: "北京",
  43. coords: [
  44. [116.24, 39.55, 100],
  45. [120.24, 46.55, 100]
  46. ], // 线条位置[开始位置,结束位置]
  47. value: [1021, 120]
  48. },
  49. {
  50. name: "深圳",
  51. coords: [
  52. [114.271522, 22.753644],
  53. [118.24, 18.55, 100]
  54. ], // 线条位置[开始位置,结束位置]
  55. value: [1021, 120]
  56. },
  57. {
  58. name: "重庆",
  59. coords: [
  60. [106.54, 29.59],
  61. [104.24, 35.55]
  62. ], // 线条位置[开始位置,结束位置]
  63. value: [1021, 120]
  64. },
  65. {
  66. name: "浙江",
  67. coords: [
  68. [120.19, 30.26],
  69. [125.24, 27.55, 100]
  70. ], // 线条位置[开始位置,结束位置]
  71. value: [1021, 120]
  72. },
  73. {
  74. name: "上海",
  75. coords: [
  76. [121.4648, 31.2891],
  77. [122.4648, 32.2891]
  78. ], // 线条位置[开始位置,结束位置]
  79. value: [1201, 60]
  80. },
  81. ];
  82. option = {
  83. /*backgroundColor: '#000f1e',*/
  84. geo: {
  85. map: 'china',
  86. aspectScale: 0.85,
  87. layoutCenter: ["50%", "50%"], //地图位置
  88. layoutSize: '100%',
  89. itemStyle: {
  90. normal: {
  91. shadowColor: '#276fce',
  92. shadowOffsetX: 0,
  93. shadowOffsetY: 15,
  94. opacity: 0.5,
  95. },
  96. emphasis: {
  97. areaColor: '#276fce',
  98. }
  99. },
  100. regions: [{
  101. name: '南海诸岛',
  102. itemStyle: {
  103. areaColor: 'rgba(0, 10, 52, 1)',
  104. borderColor: 'rgba(0, 10, 52, 1)',
  105. normal: {
  106. opacity: 0,
  107. label: {
  108. show: false,
  109. color: "#009cc9",
  110. }
  111. },
  112. },
  113. label: {
  114. show: false,
  115. color: '#FFFFFF',
  116. fontSize: 12,
  117. },
  118. }],
  119. },
  120. series: [
  121. // 常规地图
  122. {
  123. type: 'map',
  124. mapType: 'china',
  125. aspectScale: 0.85,
  126. layoutCenter: ["50%", "50%"], //地图位置
  127. layoutSize: '100%',
  128. zoom: 1, //当前视角的缩放比例
  129. // roam: true, //是否开启平游或缩放
  130. scaleLimit: { //滚轮缩放的极限控制
  131. min: 1,
  132. max: 2
  133. },
  134. itemStyle: {
  135. normal: {
  136. areaColor: '#0c274b',
  137. borderColor: '#1cccff',
  138. borderWidth: 1.5
  139. },
  140. emphasis: {
  141. areaColor: '#02102b',
  142. label: {
  143. color: "#fff"
  144. }
  145. }
  146. },
  147. },
  148. { //首都星图标
  149. name: '首都',
  150. type: 'scatter',
  151. coordinateSystem: 'geo',
  152. data: [{
  153. name: '首都',
  154. value: [116.24, 41.55, 100],
  155. }, ],
  156. symbol: iconRQ,
  157. symbolSize: 20,
  158. label: {
  159. normal: {
  160. show: false,
  161. },
  162. emphasis: {
  163. show: false
  164. }
  165. },
  166. },
  167. // 区域散点图
  168. {
  169. type: 'effectScatter',
  170. coordinateSystem: 'geo',
  171. zlevel: 2,
  172. symbolSize: 10,
  173. rippleEffect: { //坐标点动画
  174. period: 3,
  175. scale: 5,
  176. brushType: 'fill'
  177. },
  178. label: {
  179. normal: {
  180. show: true,
  181. position: 'right',
  182. formatter: '{b}',
  183. color: '#b3e2f2',
  184. fontWeight: "bold",
  185. fontSize: 16
  186. }
  187. },
  188. data: data,
  189. itemStyle: { //坐标点颜色
  190. normal: {
  191. show: true,
  192. color: '#ff8003',
  193. shadowBlur: 20,
  194. shadowColor: '#fff'
  195. },
  196. emphasis: {
  197. areaColor: '#f00'
  198. }
  199. },
  200. },
  201. /*{
  202. name: 'lable',
  203. type: 'scatter',
  204. coordinateSystem: 'geo',
  205. symbol: 'pin',
  206. symbolSize: [50,50],
  207. label: {
  208. normal: {
  209. show: true,
  210. textStyle: {
  211. color: '#fff',
  212. fontSize: 9,
  213. },
  214. formatter (value){
  215. return value.data.value[1]
  216. }
  217. }
  218. },
  219. itemStyle: {
  220. normal: {
  221. color: '#D8BC37', //标志颜色
  222. }
  223. },
  224. data: data,
  225. showEffectOn: 'render',
  226. rippleEffect: {
  227. brushType: 'stroke'
  228. },
  229. hoverAnimation: true,
  230. zlevel: 1
  231. },*/
  232. {
  233. type: 'lines',
  234. zlevel: 3,
  235. symbol: 'circle',
  236. symbolSize: [5, 5],
  237. color: '#ff8003',
  238. opacity: 1,
  239. label: {
  240. show: true,
  241. padding: [10, 20],
  242. color: '#fff',
  243. backgroundColor: "#1a3961",
  244. borderColor: '#aee9fb',
  245. borderWidth: 1,
  246. borderRadius: 6,
  247. formatter(params) {
  248. let arr = [params.name, "废水污染:" + params.value[1] + "家", "废气污染:" + params.value[0] + "家"];
  249. return arr.join("\n")
  250. },
  251. textStyle: {
  252. align: 'left',
  253. lineHeight: 20,
  254. }
  255. /* normal: {
  256. textStyle: {
  257. color: '#fff',
  258. fontSize: 9,
  259. },
  260. formatter (value){
  261. return value.data.value[2]
  262. },
  263. }*/
  264. },
  265. lineStyle: {
  266. type: 'solid',
  267. color: '#fff',
  268. width: 0.5,
  269. opacity: 1,
  270. },
  271. data: LableData,
  272. },
  273. ]
  274. };
  275. myChart.on('click', function(params) {
  276. console.log(params);
  277. });
  278. myChart.setOption(option);
  279. window.addEventListener("resize",function(){
  280. myChart.resize();
  281. });
  282. }
  283. function leidatu(){
  284. // var imgPath = ['http://bmob-cdn-15355.b0.upaiyun.com/2017/12/01/bee4341c4089af7980b87074a77479ad.png']
  285. var myChart = echarts.init(document.getElementById('leida'));
  286. option = {
  287. color: ['#00c2ff', '#f9cf67', '#e92b77'],
  288. legend: {
  289. show: true,
  290. // icon: 'circle',//图例形状
  291. bottom: 0,
  292. center: 0,
  293. itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
  294. itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
  295. itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
  296. textStyle: {
  297. fontSize: 12,
  298. color: '#ade3ff'
  299. },
  300. data: ['2016', '2017', '2018'],
  301. },
  302. radar: [{
  303. indicator: [{
  304. text: '重庆市',
  305. max: 100
  306. },
  307. {
  308. text: '北京市',
  309. max: 100
  310. },
  311. {
  312. text: '上海市',
  313. max: 100
  314. },
  315. {
  316. text: '广东省',
  317. max: 100
  318. },
  319. {
  320. text: '浙江省',
  321. max: 100
  322. }
  323. ],
  324. textStyle: {
  325. color: 'red'
  326. },
  327. center: ['50%', '50%'],
  328. radius: 60,
  329. startAngle: 90,
  330. splitNumber: 3,
  331. orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
  332. // shape: 'circle',
  333. // backgroundColor: {
  334. // image:imgPath[0]
  335. // },
  336. name: {
  337. formatter: '{value}',
  338. textStyle: {
  339. fontSize: 12, //外圈标签字体大小
  340. color: '#5b81cb' //外圈标签字体颜色
  341. }
  342. },
  343. splitArea: { // 坐标轴在 grid 区域中的分隔区域,默认不显示。
  344. show: true,
  345. areaStyle: { // 分隔区域的样式设置。
  346. color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
  347. }
  348. },
  349. // axisLabel:{//展示刻度
  350. // show: true
  351. // },
  352. axisLine: { //指向外圈文本的分隔线样式
  353. lineStyle: {
  354. color: '#153269'
  355. }
  356. },
  357. splitLine: {
  358. lineStyle: {
  359. color: '#113865', // 分隔线颜色
  360. width: 1, // 分隔线线宽
  361. }
  362. }
  363. }, ],
  364. series: [{
  365. name: '雷达图',
  366. type: 'radar',
  367. itemStyle: {
  368. emphasis: {
  369. lineStyle: {
  370. width: 4
  371. }
  372. }
  373. },
  374. data: [{
  375. name: '2016',
  376. value: [85, 65, 55, 90, 82],
  377. areaStyle: {
  378. normal: { // 单项区域填充样式
  379. color: {
  380. type: 'linear',
  381. x: 0, //右
  382. y: 0, //下
  383. x2: 1, //左
  384. y2: 1, //上
  385. colorStops: [{
  386. offset: 0,
  387. color: '#00c2ff'
  388. }, {
  389. offset: 0.5,
  390. color: 'rgba(0,0,0,0)'
  391. }, {
  392. offset: 1,
  393. color: '#00c2ff'
  394. }],
  395. globalCoord: false
  396. },
  397. opacity: 1 // 区域透明度
  398. }
  399. },
  400. symbolSize: 2.5, // 单个数据标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  401. label: { // 单个拐点文本的样式设置
  402. normal: {
  403. show: true, // 单个拐点文本的样式设置。[ default: false ]
  404. position: 'top', // 标签的位置。[ default: top ]
  405. distance: 2, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。[ default: 5 ]
  406. color: '#6692e2', // 文字的颜色。如果设置为 'auto',则为视觉映射得到的颜色,如系列色。[ default: "#fff" ]
  407. fontSize: 14, // 文字的字体大小
  408. formatter:function(params) {
  409. return params.value;
  410. }
  411. }
  412. },
  413. itemStyle: {
  414. normal: { //图形悬浮效果
  415. borderColor: '#00c2ff',
  416. borderWidth: 2.5
  417. }
  418. },
  419. // lineStyle: {
  420. // normal: {
  421. // opacity: 0.5// 图形透明度
  422. // }
  423. // }
  424. }, {
  425. name: '2017',
  426. value: [50, 20, 45, 30, 75],
  427. symbolSize: 2.5,
  428. itemStyle: {
  429. normal: {
  430. borderColor: '#f9cf67',
  431. borderWidth: 2.5,
  432. }
  433. },
  434. areaStyle: {
  435. normal: { // 单项区域填充样式
  436. color: {
  437. type: 'linear',
  438. x: 0, //右
  439. y: 0, //下
  440. x2: 1, //左
  441. y2: 1, //上
  442. colorStops: [{
  443. offset: 0,
  444. color: '#f9cf67'
  445. }, {
  446. offset: 0.5,
  447. color: 'rgba(0,0,0,0)'
  448. }, {
  449. offset: 1,
  450. color: '#f9cf67'
  451. }],
  452. globalCoord: false
  453. },
  454. opacity: 1 // 区域透明度
  455. }
  456. },
  457. // lineStyle: {
  458. // normal: {
  459. // opacity: 0.5// 图形透明度
  460. // }
  461. // }
  462. }, {
  463. name: '2018',
  464. value: [37, 80, 12, 50, 25],
  465. symbolSize: 2.5,
  466. itemStyle: {
  467. normal: {
  468. borderColor: '#e92b77',
  469. borderWidth: 2.5,
  470. }
  471. },
  472. areaStyle: {
  473. normal: { // 单项区域填充样式
  474. color: {
  475. type: 'linear',
  476. x: 0, //右
  477. y: 0, //下
  478. x2: 1, //左
  479. y2: 1, //上
  480. colorStops: [{
  481. offset: 0,
  482. color: '#e92b77'
  483. }, {
  484. offset: 0.5,
  485. color: 'rgba(0,0,0,0)'
  486. }, {
  487. offset: 1,
  488. color: '#e92b77'
  489. }],
  490. globalCoord: false
  491. },
  492. opacity: 1 // 区域透明度
  493. }
  494. }
  495. }]
  496. }, ]
  497. };
  498. myChart.setOption(option);
  499. }
  500. function wuran(){
  501. var myChart = echarts.init(document.getElementById('wuran'));
  502. var salvProName =["企业总数","废气企业","废水企业","铅污染","铬污染"];
  503. var salvProValue =[117,74,72,67,55];
  504. var salvProMax =[];//背景按最大值
  505. for (let i = 0; i < salvProValue.length; i++) {
  506. salvProMax.push(salvProValue[0])
  507. }
  508. option = {
  509. grid: {
  510. left: '2%',
  511. right: '2%',
  512. bottom: '-6%',
  513. top: '8%',
  514. containLabel: true
  515. },
  516. tooltip: {
  517. trigger: 'axis',
  518. axisPointer: {
  519. type: 'none'
  520. },
  521. formatter: function(params) {
  522. return params[0].name + ' : ' + params[0].value
  523. }
  524. },
  525. xAxis: {
  526. show: false,
  527. type: 'value'
  528. },
  529. yAxis: [{
  530. type: 'category',
  531. inverse: true,
  532. axisLabel: {
  533. show: true,
  534. textStyle: {
  535. color: '#fff'
  536. },
  537. },
  538. splitLine: {
  539. show: false
  540. },
  541. axisTick: {
  542. show: false
  543. },
  544. axisLine: {
  545. show: false
  546. },
  547. data: salvProName
  548. }, {
  549. type: 'category',
  550. inverse: true,
  551. axisTick: 'none',
  552. axisLine: 'none',
  553. show: true,
  554. axisLabel: {
  555. textStyle: {
  556. color: '#ffffff',
  557. fontSize: '12'
  558. },
  559. },
  560. data:salvProValue
  561. }],
  562. series: [{
  563. name: '值',
  564. type: 'bar',
  565. zlevel: 1,
  566. itemStyle: {
  567. normal: {
  568. barBorderRadius: 30,
  569. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  570. offset: 0,
  571. color: 'rgb(57,89,255,1)'
  572. }, {
  573. offset: 1,
  574. color: 'rgb(46,200,207,1)'
  575. }]),
  576. },
  577. },
  578. barWidth: 10,
  579. data: salvProValue
  580. },
  581. {
  582. name: '背景',
  583. type: 'bar',
  584. barWidth: 10,
  585. barGap: '-100%',
  586. data: salvProMax,
  587. itemStyle: {
  588. normal: {
  589. color: 'rgba(24,31,68,1)',
  590. barBorderRadius: 30,
  591. }
  592. },
  593. },
  594. ]
  595. };
  596. myChart.setOption(option);
  597. }
  598. function huaxing(){
  599. var myChart = echarts.init(document.getElementById('huaxing'));
  600. var dataStyle = {
  601. normal: {
  602. label: {
  603. show: false
  604. },
  605. labelLine: {
  606. show: false
  607. },
  608. shadowBlur: 0,
  609. shadowColor: '#203665'
  610. }
  611. };
  612. option = {
  613. series: [{
  614. name: '第一个圆环',
  615. type: 'pie',
  616. clockWise: false,
  617. radius: [45, 55],
  618. itemStyle: dataStyle,
  619. hoverAnimation: false,
  620. center: ['15%', '50%'],
  621. data: [{
  622. value: 25,
  623. label: {
  624. normal: {
  625. rich: {
  626. a: {
  627. color: '#3a7ad5',
  628. align: 'center',
  629. fontSize: 14,
  630. fontWeight: "bold"
  631. },
  632. b: {
  633. color: '#fff',
  634. align: 'center',
  635. fontSize: 12
  636. }
  637. },
  638. formatter: function(params){
  639. return "{b|饮用水质}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
  640. },
  641. position: 'center',
  642. show: true,
  643. textStyle: {
  644. fontSize: '12',
  645. fontWeight: 'normal',
  646. color: '#fff'
  647. }
  648. }
  649. },
  650. itemStyle: {
  651. normal: {
  652. color: '#2c6cc4',
  653. shadowColor: '#2c6cc4',
  654. shadowBlur: 0
  655. }
  656. }
  657. }, {
  658. value: 75,
  659. name: 'invisible',
  660. itemStyle: {
  661. normal: {
  662. color: '#24375c'
  663. },
  664. emphasis: {
  665. color: '#24375c'
  666. }
  667. }
  668. }]
  669. }, {
  670. name: '第二个圆环',
  671. type: 'pie',
  672. clockWise: false,
  673. radius: [45, 55],
  674. itemStyle: dataStyle,
  675. hoverAnimation: false,
  676. center: ['50%', '50%'],
  677. data: [{
  678. value: 50,
  679. label: {
  680. normal: {
  681. rich: {
  682. a: {
  683. color: '#d03e93',
  684. align: 'center',
  685. fontSize: 14,
  686. fontWeight: "bold"
  687. },
  688. b: {
  689. color: '#fff',
  690. align: 'center',
  691. fontSize: 12
  692. }
  693. },
  694. formatter: function(params){
  695. return "{b|生活用水}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
  696. },
  697. position: 'center',
  698. show: true,
  699. textStyle: {
  700. fontSize: '12',
  701. fontWeight: 'normal',
  702. color: '#fff'
  703. }
  704. }
  705. },
  706. itemStyle: {
  707. normal: {
  708. color: '#ef45ac',
  709. shadowColor: '#ef45ac',
  710. shadowBlur: 0
  711. }
  712. }
  713. }, {
  714. value: 50,
  715. name: 'invisible',
  716. itemStyle: {
  717. normal: {
  718. color: '#412a4e'
  719. },
  720. emphasis: {
  721. color: '#412a4e'
  722. }
  723. }
  724. }]
  725. }, {
  726. name: '第三个圆环',
  727. type: 'pie',
  728. clockWise: false,
  729. radius: [45, 55],
  730. itemStyle: dataStyle,
  731. hoverAnimation: false,
  732. center: ['85%', '50%'],
  733. data: [{
  734. value: 75,
  735. label: {
  736. normal: {
  737. rich: {
  738. a: {
  739. color: '#603dd0',
  740. align: 'center',
  741. fontSize: 14,
  742. fontWeight: "bold"
  743. },
  744. b: {
  745. color: '#fff',
  746. align: 'center',
  747. fontSize: 12
  748. }
  749. },
  750. formatter: function(params){
  751. return "{b|自来水}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
  752. },
  753. position: 'center',
  754. show: true,
  755. textStyle: {
  756. fontSize: '12',
  757. fontWeight: 'normal',
  758. color: '#fff'
  759. }
  760. }
  761. },
  762. itemStyle: {
  763. normal: {
  764. color: '#613fd1',
  765. shadowColor: '#613fd1',
  766. shadowBlur: 0
  767. }
  768. }
  769. }, {
  770. value: 25,
  771. name: 'invisible',
  772. itemStyle: {
  773. normal: {
  774. color: '#453284'
  775. },
  776. emphasis: {
  777. color: '#453284'
  778. }
  779. }
  780. }]
  781. }]
  782. }
  783. myChart.setOption(option);
  784. }
  785. function zhexian() {
  786. var myChart = echarts.init(document.getElementById('zhexian'));
  787. dataText = [{
  788. name: '上游流速',
  789. type: 'line',
  790. smooth: true,
  791. symbolSize: 8,
  792. data: [127, 224, 120, 278, 227, 237],
  793. barWidth: '30%',
  794. itemStyle: {
  795. normal: {
  796. color: '#f0c725'
  797. }
  798. }
  799. }, {
  800. name: '下游流速',
  801. type: 'line',
  802. smooth: true,
  803. symbolSize: 8,
  804. data: [27, 124, 70, 178, 127, 157],
  805. barWidth: '30%',
  806. itemStyle: {
  807. normal: {
  808. color: '#16f892'
  809. }
  810. }
  811. },
  812. {
  813. name: '平均流速',
  814. type: 'line',
  815. smooth: true,
  816. symbolSize: 8,
  817. data: [127, 74, 120, 99, 130, 355],
  818. barWidth: '30%',
  819. itemStyle: {
  820. normal: {
  821. color: '#0BE3FF'
  822. }
  823. }
  824. }
  825. ]
  826. dataObj = {
  827. year: ['2015', '2016', '2017', '2018', '2019', '2020'],
  828. data: {
  829. value: [{
  830. name: '上游流速',
  831. value: [127, 224, 250, 278, 227, 355]
  832. }, {
  833. name: '下游流速',
  834. value: [27, 124, 70, 178, 127, 157]
  835. }, {
  836. name: '平均流速',
  837. value: [127, 74, 120, 99, 130, 50]
  838. }]
  839. }
  840. }
  841. let dataArr = []
  842. dataObj.data.value.map(item => {
  843. let datachild = []
  844. let newArr = {
  845. name: item.name,
  846. type: 'line',
  847. smooth: true,
  848. symbolSize: 8,
  849. data: item.value,
  850. barWidth: '30%',
  851. itemStyle: {
  852. normal: {
  853. color: item.name === '上游流速' ? '#f0c725' : item.name === '下游流速' ? '#0BE3FF' : '#16f892'
  854. }
  855. }
  856. }
  857. dataArr.push(newArr)
  858. })
  859. option = {
  860. color: ['#f0c725', '#16f892'],
  861. title: {
  862. left: 'center',
  863. text: '',
  864. textStyle: {
  865. color: '#FFFFFF',
  866. fontSize: '14',
  867. }
  868. },
  869. tooltip: {
  870. trigger: 'axis',
  871. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  872. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  873. }
  874. },
  875. legend: {
  876. x: 'center',
  877. top: '25',
  878. textStyle: {
  879. color: '#c1cadf',
  880. "fontSize": 14
  881. }
  882. },
  883. grid: {
  884. left: '6%',
  885. right: '4%',
  886. top: '25%',
  887. bottom: '3%',
  888. containLabel: true
  889. },
  890. toolbox: {
  891. show: true,
  892. orient: 'vertical',
  893. x: 'right',
  894. y: 'center'
  895. },
  896. xAxis: [{
  897. type: 'category',
  898. boundaryGap: false,
  899. data: dataObj.year,
  900. axisLine: {
  901. lineStyle: {
  902. color: 'rgba(240,199,37,0.5)'
  903. }
  904. },
  905. axisLabel: {
  906. interval: 0,
  907. color: '#c1cadf',
  908. fontSize: '15'
  909. }
  910. }],
  911. yAxis: [{
  912. type: 'value',
  913. name: '(m3)',
  914. nameTextStyle: {
  915. color: '#c1cadf',
  916. align: 'right',
  917. lineHeight: 10
  918. },
  919. axisLine: {
  920. lineStyle: {
  921. color: 'rgba(240,199,37,0.5)'
  922. }
  923. },
  924. axisLabel: {
  925. interval: 0,
  926. color: '#c1cadf',
  927. fontSize: '15'
  928. },
  929. splitLine: {
  930. show: false
  931. }
  932. }],
  933. series: dataArr
  934. };
  935. //大屏
  936. /*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
  937. myChart.clear();
  938. if(data.handleTimeData.length>0){
  939. myChart.setOption(option);
  940. }else{
  941. noDataTip($("#channel_handle_detail"));
  942. }*/
  943. // 使用刚指定的配置项和数据显示图表。
  944. myChart.setOption(option);
  945. window.addEventListener("resize",function(){
  946. myChart.resize();
  947. });
  948. }