BarChartModule.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /*
  2. //y轴显示数据
  3. Data:{
  4. name:string,
  5. data:string[],
  6. }
  7. props:{
  8. xData:string[], //x轴时间数据
  9. dataList:Data[], //数据列表
  10. }
  11. */
  12. import { Empty } from 'antd';
  13. import * as echarts from 'echarts';
  14. import { useEffect, useRef } from 'react';
  15. import styles from './index.less';
  16. //图表模块
  17. const BarChartModule = (props) => {
  18. const chartDomRef = useRef();
  19. const chartRef = useRef();
  20. const { xData, dataList } = props;
  21. useEffect(() => {
  22. chartRef.current = echarts.init(chartDomRef.current);
  23. window.addEventListener('resize', resetChart);
  24. return () => window.removeEventListener('resize', resetChart);
  25. }, []);
  26. useEffect(() => {
  27. if (!chartRef.current || !dataList) return;
  28. const option = { ...defaultOption };
  29. option.xAxis.data = xData;
  30. option.series = dataList.map((item, idx) => {
  31. return {
  32. ...option.series[idx],
  33. ...item,
  34. };
  35. });
  36. chartRef.current.clear();
  37. chartRef.current.setOption(option);
  38. chartRef.current.resize();
  39. }, [xData, dataList]);
  40. const resetChart = () => {
  41. if (chartRef.current) chartRef.current.resize();
  42. };
  43. const getStyle = () => {
  44. if (dataList && dataList.length != 0)
  45. return { width: '100%', height: '100%' };
  46. else return { width: '100%', height: '100%', display: 'none' };
  47. };
  48. return (
  49. <div className={styles.content}>
  50. <div style={getStyle()} ref={chartDomRef} />
  51. {(!dataList || dataList.length == 0) && <Empty />}
  52. </div>
  53. );
  54. };
  55. export default BarChartModule;
  56. const colors = [
  57. '#5470c6',
  58. '#91cc75',
  59. '#fac858',
  60. '#ee6666',
  61. '#73c0de',
  62. '#3ba272',
  63. '#fc8452',
  64. '#9a60b4',
  65. '#ea7ccc',
  66. ];
  67. const defaultOption = {
  68. color: colors,
  69. grid: {
  70. bottom: 30,
  71. left: 60,
  72. right: 30,
  73. },
  74. xAxis: {
  75. type: 'category',
  76. axisTick: { show: false },
  77. axisLine: {
  78. lineStyle: {
  79. color: '#c9d2d2',
  80. },
  81. },
  82. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  83. },
  84. yAxis: {
  85. type: 'value',
  86. splitLine: {
  87. lineStyle: {
  88. type: 'dashed',
  89. },
  90. },
  91. axisTick: { show: false },
  92. axisLine: {
  93. show: false,
  94. },
  95. },
  96. legend: {
  97. icon: 'circle',
  98. right: '20%',
  99. },
  100. series: [
  101. {
  102. name: '2022',
  103. data: [120, 200, 150, 80, 70, 110, 130],
  104. type: 'bar',
  105. label: {
  106. show: true,
  107. position: 'top',
  108. },
  109. barGap: '0',
  110. barMaxWidth: '10%',
  111. },
  112. {
  113. name: '2023',
  114. data: [120, 200, 150, 80, 70, 110, 130],
  115. type: 'bar',
  116. label: {
  117. show: true,
  118. position: 'top',
  119. },
  120. barGap: '0',
  121. barMaxWidth: '10%',
  122. },
  123. ],
  124. };