react项目中使用echarts插件两种方式

àì夳堔傛蜴生んèń 2022-11-29 12:17 252阅读 0赞

1.我这边是写了一个简单的tabDemo，**展示**NBA球星科比、麦迪、欧文的职业生涯得分、助攻、篮板 **数据**。页面效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]  
两种方式的话，为了便于区别，我单独创建了两个tsx组件:**LineChartII.tsk**和**LineChart.tsx**。

主页组件中引入使用：(传递的参数一样，关注引入echarts的引入加载方式)

import LineChart from './components/LineChart';
    import LineChartII from './components/LineChartII';

2.第一种引入方式：**使用echarts-for-react插件**在React中调用echarts接口直接渲染出Echarts图表，只要传入相关的参数和数据即可。（个人觉得这种方式更简单，注：需要下载插件依赖）

npm install --save echarts-for-react

**关键代码：**  
![在这里插入图片描述][20210419090302166.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]

**LineChartII.tsx组件完整内容：**

import React from 'react';
    import ReactEcharts from 'echarts-for-react';
    import style from '../style.less';
    interface LineDataProps { 
      color: string;
      shdowBegin?: string;
      shdowEnd?: string;
      title: string;
      dataX: string[];
      dataY: number[];
    }
    export const LineChart: React.FC<LineDataProps> = props => { 
      const {  color, shdowBegin, shdowEnd, title, dataX, dataY } = props;
      const option = { 
        legend: { 
          data: [title],
          top: '15',
        },
        tooltip: { 
          trigger: 'axis',
          formatter: (params: any) => { 
            // 自定义 弹窗里面的 内容
            let str = `<div> <span> ${ params[0].name}赛季</span><br/> <span>场均${ title.indexOf('得分') > -1 ? '得分' : title.indexOf('助攻') > -1 ? '助攻' : '篮板' }：${ params[0].value}${ title.indexOf('得分') > -1 ? '分' : '个'} </span> </div>`;
    
            return str;
          },
        },
        position: 'center',
        xAxis: { 
          type: 'category',
          boundaryGap: false,
          data: dataX,
        },
        yAxis: { 
          type: 'value',
        },
        series: [
          { 
            name: title,
            data: dataY,
            type: 'line',
            // symbol: 'none', //取消折点圆圈
            itemStyle: { 
              normal: { 
                color: color, //改变折线点的颜色
                lineStyle: { 
                  color: color, //改变折线颜色(组件传参过来)
                },
              },
            },
            areaStyle: { 
              color: { 
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { 
                    offset: 0,
                    color: shdowEnd, // 0% 处的颜色
                  },
                  { 
                    offset: 0.9,
                    color: shdowBegin, // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        ],
      };
      return (
        <div className={ style.lineChart}>
          <ReactEcharts
            option={ option as any}
            notMerge
            lazyUpdate
            style={ {  height: '100%', width: '100%' }}
          />
        </div>
      );
    };
    export default LineChart;

3.第二种引入方式：**使用useRef 返回一个可变的 ref 对象，作用于DOM对象，** 在DOM对象中引入加载echarts内容。  
**核心代码：**  
![在这里插入图片描述][20210419090606962.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210419090718576.png]

**LineChartII.tsx组件完整内容：**

import React, {  useRef } from 'react';
    import echarts from 'echarts';
    import style from '../style.less';
    interface LineDataProps { 
      color: string;
      shdowBegin?: string;
      shdowEnd?: string;
      title: string;
      dataX: string[];
      dataY: number[];
    }
    export const LineChart: React.FC<LineDataProps> = props => { 
      const {  color, shdowBegin, shdowEnd, title, dataX, dataY } = props;
      const canvasBox = useRef<HTMLDivElement | null>(null);
      const lineEle = canvasBox.current;
      if (lineEle) { 
        const line = echarts.init(lineEle as HTMLDivElement);
        line.setOption({ 
          legend: { 
            data: [title],
            top: '15',
          },
          tooltip: { 
            trigger: 'axis',
            formatter: (params: any) => { 
              // 自定义 弹窗里面的 内容
              let str = `<div> <span> ${ params[0].name}赛季</span><br/> <span>场均${ title.indexOf('得分') > -1 ? '得分' : title.indexOf('助攻') > -1 ? '助攻' : '篮板' }：${ params[0].value}${ title.indexOf('得分') > -1 ? '分' : '个'} </span> </div>`;
    
              return str;
            },
          },
          position: 'center',
          xAxis: { 
            type: 'category',
            boundaryGap: false,
            data: dataX,
          },
          yAxis: { 
            type: 'value',
          },
          series: [
            { 
              name: title,
              data: dataY,
              type: 'line',
              // symbol: 'none', //取消折点圆圈
              itemStyle: { 
                normal: { 
                  color: color, //改变折线点的颜色
                  lineStyle: { 
                    color: color, //改变折线颜色(组件传参过来)
                  },
                },
              },
              areaStyle: { 
                color: { 
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { 
                      offset: 0,
                      color: shdowEnd, // 0% 处的颜色
                    },
                    { 
                      offset: 0.9,
                      color: shdowBegin, // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          ],
        });
      }
      return <div className={ style.lineChart} ref={ canvasBox}></div>;
    };
    export default LineChart;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221124/85744d6a786040da81ff617e5c3a9eb3.png
[20210419090302166.png]: /images/20221124/2eea9d62f1624a77adc2e211c633bc81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]: /images/20221124/fa4429497515470ebb3ad276e4f00695.png
[20210419090606962.png]: https://img-blog.csdnimg.cn/20210419090606962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]: /images/20221124/bea4cea0f37e41bf9b77bda5868ac74d.png
[20210419090718576.png]: /images/20221124/ca25d38687d445479fef021cc2cfc13d.png