React项目中使用Echarts

最新推荐文章于 2024-06-22 16:50:41 发布

呐呐呐呐。

最新推荐文章于 2024-06-22 16:50:41 发布

阅读量312

点赞数

文章标签： react.js echarts javascript

本文链接：https://blog.csdn.net/m0_56542349/article/details/133296788

版权

1. 引入Echarts包

import * as echarts from 'echarts';

2. 给元素setOption

  const chartIns = useRef<any>(null);
  useEffect(() => {
    const element = document.getElementById(id) as HTMLElement;
    console.log(element);
    chartIns.current?.dispose();
    setTimeout(() => {
      chartIns.current = echarts.init(element);
      if (chartIns.current) {
        chartIns.current.setOption(option, true);
      }
    }, 20);
    return () => {
      // echarts.dispose(element);
    };
  }, []);

3. 构建div元素

<div id={id} style={{ width: 341, height: 75 }}></div>

4. 代码

import React, { useEffect, useMemo, useRef } from 'react';
import * as echarts from 'echarts';
import styles from '../index.module.less';
import { numFormat } from '@/utils/utils';

export default (props: any) => {
  const colorArr = ['#FAC758', '#91CC74', '#5470C6', '#FA8500'];
  const { id, bizType, bizTypeName, dataList } = props;
  dataList.forEach((o, index) => {
    o.color = colorArr[index];
    o.value = o.qty;
    o.name = o.subBizTypeName;
  });
  const option = {
    tooltip: {
      trigger: 'item',
    },
    color: colorArr,
    // legend: {
    //   icon: 'circle',
    //   // top: '20%',
    //   left: '20%',
    //   width: 300,
    //   itemGap: 20,
    //   formatter(param) {
    //     const item = dataList.find(o => o.subBizTypeName === param)
    //     return '{a|' + param + '  ' + item.qty + '}';
    //   },
    //   textStyle: {
    //     rich: {
    //       a: {
    //         width: 150,
    //         display: 'inline-block',
    //       }
    //     }
    //   }
    // },
    series: [
      {
        type: 'pie',
        minAngle: 60,
        radius: ['70%', '86%'],
        center: ['12%', '50%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            // formatter: `{active|${bizTypeName}`,
            formatter: (param) => {
              console.log('aaaa', param);
              return `${bizTypeName}`;
            },
            rich: {
              desc: {
                color: 'var(--gray-gray-10, #262626)',
                fontFamily: 'Microsoft YaHei',
                fontSize: 10,
                fontStyle: 'normal',
                fontWeight: 400,
                lineHeight: 'normal',
              },
            },
          },
        },
        data: dataList,
      },
    ],
  };

  const listDom = useMemo(() => {
    return dataList.map((o: any) => (
      <div
        style={{ display: 'flex', alignItems: 'center', gap: 4 }}
        className={styles['pie-desc']}
      >
        <div
          style={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: o.color,
          }}
        />
        <span style={{ display: 'inline-block', marginRight: 10 }}>
          {o.subBizTypeName}
        </span>
        <span
          className={styles['pie-num']}
          style={{
            color: o.color,
          }}
        >
          {/*{o.qty}*/}
          {numFormat(o.qty)}
        </span>
      </div>
    ));
  }, [dataList]);

  const chartIns = useRef<any>(null);
  useEffect(() => {
    const element = document.getElementById(id) as HTMLElement;
    console.log(element);
    chartIns.current?.dispose();
    setTimeout(() => {
      chartIns.current = echarts.init(element);
      if (chartIns.current) {
        chartIns.current.setOption(option, true);
      }
    }, 20);
    return () => {
      // echarts.dispose(element);
    };
  }, []);

  return (
    <div style={{ position: 'relative' }} className={styles['pie-container']}>
      <div id={id} style={{ width: 341, height: 75 }}></div>
      {/* 自己写一段类似于legend的html，然后绝对定位到echarts图表上*/}
      <div
        className={[styles['pie-content'], styles['grid-show-item2']].join(' ')}
      >
        {listDom}
      </div>
    </div>
  );
};