Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / chartOption.js
@zhangdeliang zhangdeliang on 23 May 15 KB update
  1. import useUserStore from '@/store/modules/user';
  2. import * as echarts from 'echarts';
  3. const pinias = useUserStore();
  4.  
  5. let optionChart = {
  6. // 饼图
  7. option1: {
  8. color: pinias.$state.chartColor,
  9. title: { text: '管线种类', x: 'center', y: 'center', textStyle: { fontSize: '13', color: '#00d1ff' } },
  10. grid: { bottom: 0 },
  11. // 显示暂无数据
  12. graphic: {
  13. type: 'text', // 类型:文本
  14. left: 'center',
  15. top: 'middle',
  16. silent: true, // 不响应事件
  17. invisible: false, // 有数据就隐藏
  18. style: {
  19. fill: '#c6c6c6',
  20. fontWeight: 'bold',
  21. text: '暂无数据',
  22. fontFamily: 'Microsoft YaHei',
  23. fontSize: '18px',
  24. },
  25. },
  26. tooltip: {
  27. trigger: 'item',
  28. formatter: '{b} : {c}个 ({d}%)',
  29. },
  30. series: {
  31. name: '',
  32. type: 'pie',
  33. radius: ['40%', '70%'],
  34. data: [
  35. { name: '钢管', value: 9 },
  36. { name: 'PVC', value: 12 },
  37. { name: 'PE', value: 9 },
  38. { name: '镀锌管', value: 3 },
  39. ],
  40. emphasis: {
  41. itemStyle: {
  42. shadowBlur: 10,
  43. shadowOffsetX: 0,
  44. shadowColor: 'rgba(0, 0, 0, 0.5)',
  45. },
  46. },
  47. label: {
  48. show: true,
  49. formatter: '{d|{b}}\n {c}个 ({d|{d}%})',
  50. position: 'outside',
  51. rich: {
  52. d: {
  53. fontSize: 13,
  54. color: '#509BE0',
  55. align: 'left',
  56. fontFamily: 'SourceHanSansCN',
  57. },
  58. },
  59. },
  60. },
  61. },
  62. // 柱状图
  63. option2: {
  64. color: pinias.$state.chartColor,
  65. // 显示暂无数据
  66. graphic: {
  67. type: 'text', // 类型:文本
  68. left: 'center',
  69. top: 'middle',
  70. silent: true, // 不响应事件
  71. invisible: false, // 有数据就隐藏
  72. style: {
  73. fill: '#c6c6c6',
  74. fontWeight: 'bold',
  75. text: '暂无数据',
  76. fontFamily: 'Microsoft YaHei',
  77. fontSize: '18px',
  78. },
  79. },
  80. tooltip: {
  81. trigger: 'axis',
  82. confine: true, //是否将 tooltip 框限制在图表的区域内
  83. axisPointer: {
  84. type: 'shadow',
  85. },
  86. },
  87. grid: {
  88. left: '3%',
  89. right: '5%',
  90. top: '20%',
  91. bottom: '3%',
  92. containLabel: true,
  93. },
  94. legend: {
  95. top: '2%',
  96. orient: 'horizontal', //horizontal
  97. left: 'center', //left ,center
  98. textStyle: {
  99. color: 'inherit',
  100. },
  101. },
  102. xAxis: {
  103. type: 'category',
  104. data: ['PH', 'COD'],
  105. axisLabel: {
  106. color: '#c6c6c6',
  107. },
  108. axisLine: {
  109. lineStyle: {
  110. color: '#066592',
  111. },
  112. },
  113. },
  114. yAxis: {
  115. name: '',
  116. type: 'value',
  117. nameLocation: 'end', // 坐标轴名称显示位置
  118. nameGap: 15, // 坐标轴名称与轴线之间的距离
  119. nameTextStyle: {
  120. color: '#c6c6c6', //字体颜色
  121. fontSize: 12, //字体大小
  122. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  123. },
  124. splitLine: {
  125. lineStyle: {
  126. type: 'dashed',
  127. color: '#066592',
  128. },
  129. },
  130. axisLabel: {
  131. fontSize: 12,
  132. color: '#c6c6c6',
  133. },
  134. },
  135. series: [
  136. {
  137. name: '',
  138. type: 'bar',
  139. barWidth: 10,
  140. data: [12, 20],
  141. label: {
  142. show: true,
  143. position: 'top',
  144. },
  145. },
  146. ],
  147. },
  148. // 柱状图+折线图
  149. option3: {
  150. color: pinias.$state.chartColor,
  151. // 显示暂无数据
  152. graphic: {
  153. type: 'text', // 类型:文本
  154. left: 'center',
  155. top: 'middle',
  156. silent: true, // 不响应事件
  157. invisible: false, // 有数据就隐藏
  158. style: {
  159. fill: '#c6c6c6',
  160. fontWeight: 'bold',
  161. text: '暂无数据',
  162. fontFamily: 'Microsoft YaHei',
  163. fontSize: '18px',
  164. },
  165. },
  166. tooltip: {
  167. trigger: 'axis',
  168. confine: true, //是否将 tooltip 框限制在图表的区域内
  169. },
  170. title: {
  171. left: 'left',
  172. text: '',
  173. top: 10,
  174. bottom: 10,
  175. left: 10,
  176. textStyle: {
  177. color: '#545E75', //字体颜色
  178. fontSize: 16, //字体大小
  179. },
  180. },
  181. grid: {
  182. left: '3%',
  183. right: '5%',
  184. top: '20%',
  185. bottom: '3%',
  186. containLabel: true,
  187. },
  188. legend: {
  189. top: '2%',
  190. orient: 'horizontal', //horizontal
  191. left: 'center', //left ,center
  192. textStyle: {
  193. color: 'inherit',
  194. },
  195. },
  196. xAxis: {
  197. type: 'category',
  198. data: ['2023', '2024', '2025'],
  199. axisLabel: {
  200. color: '#c6c6c6',
  201. },
  202. axisLine: {
  203. lineStyle: {
  204. color: '#066592',
  205. },
  206. },
  207. },
  208. yAxis: [
  209. {
  210. name: 'm',
  211. type: 'value',
  212. nameLocation: 'end', // 坐标轴名称显示位置
  213. nameGap: 15, // 坐标轴名称与轴线之间的距离
  214. nameTextStyle: {
  215. color: '#c6c6c6', //字体颜色
  216. fontSize: 12, //字体大小
  217. align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
  218. },
  219. splitLine: {
  220. lineStyle: {
  221. type: 'dashed',
  222. color: '#066592',
  223. },
  224. },
  225. axisLabel: {
  226. color: '#c6c6c6',
  227. },
  228. },
  229. {
  230. name: 'm³',
  231. type: 'value',
  232. nameLocation: 'end', // 坐标轴名称显示位置
  233. nameGap: 15, // 坐标轴名称与轴线之间的距离
  234. nameTextStyle: {
  235. color: '#c6c6c6', //字体颜色
  236. fontSize: 12, //字体大小
  237. align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
  238. },
  239. axisLabel: {
  240. color: '#c6c6c6',
  241. },
  242. splitLine: {
  243. lineStyle: {
  244. type: 'dashed',
  245. color: '#066592',
  246. },
  247. },
  248. },
  249. ],
  250. series: [
  251. {
  252. name: '监测水位',
  253. type: 'line',
  254. smooth: true,
  255. yAxisIndex: 0,
  256. symbolSize: 8,
  257. data: [14, 8, 5],
  258. },
  259. {
  260. name: '调蓄容积',
  261. type: 'bar',
  262. barWidth: 10,
  263. yAxisIndex: 1,
  264. data: [24, 12, 9],
  265. },
  266. ],
  267. },
  268. // 折线图
  269. option4: {
  270. color: ['#1480FF', '#FF4444'],
  271. // 显示暂无数据
  272. graphic: {
  273. type: 'text', // 类型:文本
  274. left: 'center',
  275. top: 'middle',
  276. silent: true, // 不响应事件
  277. invisible: false, // 有数据就隐藏
  278. style: {
  279. fill: '#c6c6c6',
  280. fontWeight: 'bold',
  281. text: '暂无数据',
  282. fontFamily: 'Microsoft YaHei',
  283. fontSize: '18px',
  284. },
  285. },
  286. tooltip: {
  287. trigger: 'axis',
  288. confine: true, //是否将 tooltip 框限制在图表的区域内
  289. },
  290. grid: {
  291. left: '3%',
  292. right: '5%',
  293. top: '20%',
  294. bottom: '3%',
  295. containLabel: true,
  296. },
  297. legend: {
  298. top: '2%',
  299. orient: 'horizontal', //horizontal
  300. left: 'center', //left ,center
  301. textStyle: {
  302. color: 'inherit',
  303. },
  304. },
  305. xAxis: {
  306. type: 'category',
  307. data: ['2023', '2024', '2025'],
  308. axisLabel: {
  309. color: '#c6c6c6',
  310. },
  311. axisLine: {
  312. lineStyle: {
  313. color: '#066592',
  314. },
  315. },
  316. },
  317. yAxis: [
  318. {
  319. name: '吨',
  320. type: 'value',
  321. nameLocation: 'end', // 坐标轴名称显示位置
  322. nameGap: 15, // 坐标轴名称与轴线之间的距离
  323. nameTextStyle: {
  324. color: '#c6c6c6', //字体颜色
  325. fontSize: 12, //字体大小
  326. align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
  327. },
  328. axisLabel: {
  329. color: '#c6c6c6',
  330. },
  331. splitLine: {
  332. lineStyle: {
  333. type: 'dashed',
  334. color: '#066592',
  335. },
  336. },
  337. },
  338. ],
  339. series: [
  340. {
  341. name: '雨水口COD排放量',
  342. type: 'line',
  343. smooth: true,
  344. data: [24, 12, 9],
  345. // 填充区域的样式
  346. areaStyle: {
  347. // 填充色渐变
  348. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  349. { offset: 1, color: 'rgba(20, 128, 255, 0)' },
  350. { offset: 0, color: 'rgba(20, 128, 255, 1)' },
  351. ]),
  352. },
  353. },
  354. {
  355. name: '溢流口COD排放量',
  356. type: 'line',
  357. smooth: true,
  358. data: [14, 8, 5],
  359. // 填充区域的样式
  360. areaStyle: {
  361. // 填充色渐变
  362. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  363. { offset: 1, color: 'rgba(255, 68, 68, 0)' },
  364. { offset: 0, color: 'rgba(255, 68, 68, 1)' },
  365. ]),
  366. },
  367. },
  368. ],
  369. },
  370. //双边折线图
  371. option5: {
  372. tooltip: {
  373. show: true,
  374. position: 'top',
  375. offset: [0, 0],
  376. textStyle: {
  377. color: '#666666',
  378. fontSize: 14,
  379. },
  380. formatter: `{a0}</br> {b0}:{c0}%`,
  381. },
  382. legend: {
  383. type: 'plain',
  384. textStyle: {
  385. color: '#D1DEEE', //文字的颜色
  386. fontSize: 12, //文字的字号
  387. },
  388. },
  389. grid: [
  390. {
  391. show: false,
  392. left: 0,
  393. top: 30,
  394. bottom: 22,
  395. width: '27%',
  396. },
  397. {
  398. show: false,
  399. left: '30%',
  400. top: 30,
  401. bottom: 0,
  402. containLabel: true,
  403. width: '33%',
  404. },
  405. {
  406. show: false,
  407. left: '63%',
  408. top: 30,
  409. bottom: 0,
  410. containLabel: true,
  411. width: '33%',
  412. },
  413. ],
  414. xAxis: [
  415. {
  416. gridIndex: 0,
  417. show: true,
  418. },
  419. {
  420. gridIndex: 1,
  421. type: 'value',
  422. inverse: true,
  423. axisLine: {
  424. show: false,
  425. },
  426. axisTick: {
  427. show: false,
  428. },
  429. axisLabel: {
  430. show: true,
  431. verticalAlign: 'middle',
  432. textStyle: {
  433. color: '#6E8098',
  434. fontSize: 12,
  435. },
  436. },
  437. splitLine: {
  438. show: false,
  439. },
  440. },
  441. {
  442. gridIndex: 2,
  443. type: 'value',
  444. axisLine: {
  445. show: false,
  446. },
  447. axisTick: {
  448. show: false,
  449. },
  450. axisLabel: {
  451. show: true,
  452. verticalAlign: 'middle',
  453. textStyle: {
  454. color: '#6E8098',
  455. fontSize: 12,
  456. },
  457. },
  458. splitLine: {
  459. show: false,
  460. },
  461. },
  462. ],
  463. yAxis: [
  464. {
  465. name: '',
  466. gridIndex: 0,
  467. type: 'category',
  468. inverse: true,
  469. position: 'right',
  470. axisLine: {
  471. show: false,
  472. },
  473. axisTick: {
  474. show: false,
  475. },
  476. },
  477. {
  478. gridIndex: 1,
  479. type: 'category',
  480. inverse: true,
  481. position: 'right',
  482. axisLine: {
  483. show: false,
  484. },
  485. axisTick: {
  486. show: false,
  487. },
  488. axisLabel: {
  489. show: false,
  490. margin: 8,
  491. textStyle: {
  492. color: '#9D9EA0',
  493. fontSize: 12,
  494. },
  495. },
  496. data: [],
  497. triggerEvent: true,
  498. },
  499. {
  500. gridIndex: 2,
  501. type: 'category',
  502. inverse: true,
  503. position: 'left',
  504. axisLine: {
  505. show: false,
  506. },
  507. axisTick: {
  508. show: false,
  509. },
  510. axisLabel: {
  511. show: false,
  512. textStyle: {
  513. color: '#9D9EA0',
  514. fontSize: 12,
  515. },
  516. },
  517. data: [],
  518. triggerEvent: true,
  519. },
  520. ],
  521. series: [
  522. {
  523. name: '资金占比',
  524. type: 'bar',
  525. barGap: 20,
  526. barWidth: 6,
  527. xAxisIndex: 1,
  528. yAxisIndex: 1,
  529. showBackground: true,
  530. backgroundStyle: {
  531. color: '#011431',
  532. },
  533. label: {
  534. normal: {
  535. show: false,
  536. },
  537. emphasis: {
  538. show: true,
  539. position: 'left',
  540. offset: [0, 0],
  541. textStyle: {
  542. color: '#666666',
  543. fontSize: 14,
  544. },
  545. },
  546. },
  547. itemStyle: {
  548. normal: {
  549. barBorderRadius: [10, 0, 0, 10],
  550. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  551. {
  552. offset: 0,
  553. color: '#FFCE65',
  554. },
  555. {
  556. offset: 1,
  557. color: '#052a57',
  558. },
  559. ]),
  560. },
  561. },
  562. data: [],
  563. },
  564. {
  565. name: '面积占比',
  566. type: 'bar',
  567. barGap: 20,
  568. barWidth: 6,
  569. xAxisIndex: 2,
  570. yAxisIndex: 2,
  571. showBackground: true,
  572. backgroundStyle: {
  573. color: '#011431',
  574. },
  575. label: {
  576. normal: {
  577. show: false,
  578. },
  579. emphasis: {
  580. show: true,
  581. position: 'right',
  582. offset: [0, 0],
  583. textStyle: {
  584. color: '#666666',
  585. fontSize: 14,
  586. },
  587. },
  588. },
  589. itemStyle: {
  590. normal: {
  591. barBorderRadius: [0, 10, 10, 0],
  592. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  593. {
  594. offset: 0,
  595. color: '#303e54',
  596. },
  597. {
  598. offset: 1,
  599. color: '#1093FA',
  600. },
  601. ]),
  602. },
  603. },
  604. data: [],
  605. },
  606. ],
  607. },
  608. // 堆叠柱状图
  609. option6: {
  610. graphic: {
  611. type: 'text', // 类型:文本
  612. left: 'center',
  613. top: 'middle',
  614. silent: true, // 不响应事件
  615. invisible: false, // 有数据就隐藏
  616. style: {
  617. fill: '#c6c6c6',
  618. fontWeight: 'bold',
  619. text: '暂无数据',
  620. fontFamily: 'Microsoft YaHei',
  621. fontSize: '18px',
  622. },
  623. },
  624. tooltip: {
  625. trigger: 'axis',
  626. axisPointer: {
  627. type: 'shadow',
  628. },
  629. },
  630. legend: {
  631. textStyle: {
  632. color: '#fff',
  633. },
  634. },
  635. grid: {
  636. left: '3%',
  637. right: '4%',
  638. bottom: '3%',
  639. containLabel: true,
  640. },
  641. xAxis: {
  642. type: 'category',
  643. data: ['后湖公园', '槐荫公园', '董永公园'],
  644. axisLabel: {
  645. textStyle: {
  646. color: '#fff',
  647. },
  648. interval: 0,
  649. formatter: function (value, index) {
  650. // debugger;
  651. if (index % 2 != 0) {
  652. return '\n\n' + value;
  653. } else {
  654. return value;
  655. }
  656. },
  657. },
  658. },
  659. yAxis: [
  660. {
  661. type: 'value',
  662. name: '单位:公顷',
  663. nameTextStyle: {
  664. color: '#fff',
  665. },
  666. axisLabel: {
  667. textStyle: {
  668. color: '#fff',
  669. },
  670. },
  671. },
  672. ],
  673. series: [
  674. {
  675. name: '水体面积',
  676. type: 'bar',
  677. stack: 'Ad',
  678. emphasis: {
  679. focus: 'series',
  680. },
  681. data: [9.3, 0.9, 0.78],
  682. itemStyle: {
  683. color: '#29bdff',
  684. },
  685. barWidth: '50%',
  686. },
  687. {
  688. name: '绿地面积',
  689. type: 'bar',
  690. stack: 'Ad',
  691.  
  692. emphasis: {
  693. focus: 'series',
  694. },
  695. data: [4.8, 14.8, 4.7],
  696. itemStyle: {
  697. color: '#67c23a',
  698. },
  699. },
  700. {
  701. name: '硬化区域面积',
  702. type: 'bar',
  703. stack: 'Ad',
  704.  
  705. emphasis: {
  706. focus: 'series',
  707. },
  708. data: [3.3, 0.17, 0.78],
  709. itemStyle: {
  710. color: '#8e8e8e',
  711. },
  712. },
  713. ],
  714. },
  715. };
  716.  
  717. export default optionChart;