React echarts 组件的封装使用案例

广州第二精神病院冯主任

React echarts 组件的封装

1. import React, { useEffect, useRef } from 'react';
   
2. import { useSize, useDebounceEffect } from 'ahooks';
   
3. import LoopShowTooltip from './echartsTooltipLoop';
   
4. import * as echarts from 'echarts';
   
5. const CommonChart = props => {
   
6.     const { chartId, options, autoTooltip } = props;
   
7.     const chartRef = useRef();
   
8.     const size = useSize(chartRef);
   
9.     const loopRef = useRef();
   
10.     useEffect(() => {
    
11.         let chartDom;
    
12.         let myChart;
    
13.         if (loopRef.current) {
    
14.             loopRef.current?.clearLoop();
    
15.             loopRef.current = null;
    
16.         }
    
17.         setTimeout(() => {
    
18.             if (loopRef.current) {
    
19.                 loopRef.current?.clearLoop();
    
20.                 loopRef.current = null;
    
21.             }
    
22.             if (chartRef) {
    
23.                 chartDom = chartRef.current;
    
24.                 myChart = echarts.init(chartDom);
    
25.                 options && myChart.setOption(options);
    
26.                 if (autoTooltip) {
    
27.                     loopRef.current = new LoopShowTooltip(myChart, options, {});
    
28.                 }
    
29.             }
    
30.         });
    
31.         window.onresize = () => {
    
32.             myChart.resize();
    
33.         };
    
34.         return () => {
    
35.             window.onresize = null;
    
36.             loopRef?.current?.clearLoop();
    
37.             loopRef.current = null;
    
38.         };
    
39.     }, [chartId, options]);
    
40.     useDebounceEffect(() => {
    
41.         let myChart;
    
42.         let chartDom;
    
43.         if (chartRef) {
    
44.             chartDom = chartRef.current;
    
45.             myChart = echarts.init(chartDom);
    
46.             options && myChart.setOption(options);
    
47.             myChart.resize();
    
48.         }
    
49.         window.onresize = () => {
    
50.             myChart.resize();
    
51.         };
    
52.     }, [size], {
    
53.         wait: 100,
    
54.     });
    
55.     return <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>;
    
56. };
    
57. export default CommonChart;

复制代码

使用案例

1. import React from "react";
   
2. import CommonChart from './pages/CommonChart/UI'
   
3. const Demo = () => {
   
4.   let echarData = [122,112,233,123,122,788,900];
   
5.   let yAxisData = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
   
6.    const chartOptions = {
   
7.             grid: {
   
8.                 top: '8%',
   
9.                 bottom: '15%',
   
10.                 left: '30%',
    
11.                 right: '16%',
    
12.                 // containLabel: true,
    
13.             },
    
14.             tooltip: {
    
15.                 trigger: 'item',
    
16.                 show: true,
    
17.                 backgroundColor: '#3A3F4D',
    
18.                 borderWidth: 0,
    
19.                 textStyle: {
    
20.                     // 提示框浮层的文本样式。
    
21.                     color: '#B1B6C2',
    
22.                     fontStyle: 'normal',
    
23.                     fontWeight: 'normal',
    
24.                     fontFamily: 'sans-serif',
    
25.                     fontSize: 14,
    
26.                 },
    
27.                 formatter: record => {
    
28.                     let result = `${record.name}：${record.value} 次`;
    
29.                     return result;
    
30.                 },
    
31.             },
    
32.             xAxis: {
    
33.                 type: 'value',
    
34.                 boundaryGap: [0, 0.01],
    
35.                 splitLine: {
    
36.                     show: false,
    
37.                 },
    
38.             },
    
39.             yAxis: {
    
40.                 type: 'category',
    
41.                 data: yAxisData,
    
42.                 scale: true,
    
43.                 axisTick: {
    
44.                     // x轴刻度线
    
45.                     show: false,
    
46.                     alignWithLabel: true,
    
47.                 },
    
48.                 axisLabel: {
    
49.                     interval: 0,
    
50.                     width: 80,
    
51.                     overflow: 'truncate',
    
52.                     ellipsis: '...',
    
53.                     align: 'left',
    
54.                     margin: 80,
    
55.                 },
    
56.                 axisLine: {
    
57.                     // 坐标轴
    
58.                     show: false,
    
59.                 },
    
60.             },
    
61.             series: [
    
62.                 {
    
63.                     name: '2011',
    
64.                     type: 'bar',
    
65.                     showBackground: true,
    
66.                     backgroundStyle: {
    
67.                         color: '#1A1E28',
    
68.                     },
    
69.                     barWidth: 12, // 柱图宽度
    
70.                     itemStyle: {
    
71.                         normal: {
    
72.                             // 柱状图上显示数量
    
73.                             label: {
    
74.                                 show: true, // 是否显示
    
75.                                 position: [220, 0], // 位置
    
76.                                 formatter: '{@value}' + '次', // 内容
    
77.                                 color: '#A5ADBA', // 文字颜色
    
78.                             },
    
79.                             color: '#2275F0', // 柱子颜色
    
80.                         },
    
81.                     },
    
82.                     data: echarData,
    
83.                 },
    
84.             ],
    
85.         };
    
86.   return (
    
87.     <div style={{height:300, width: 400}}>
    
88.          <CommonChart options={chartOptions} />
    
89.     </div>
    
90.   );
    
91. };
    
92. export default Demo;

复制代码

到此这篇关于React echarts 组件的封装的文章就介绍到这了,更多相关React echarts 组件封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/32346390q.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！