2023-12-02 图表处理

echart图表

@media(min-width:1200px) {
     .echarts {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
}


@media(max-width:1200px) {
   .echarts {
      width: 100%;
      height: 190px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
}

组件页面

import React, { useContext, useEffect, useState, useCallback, useMemo, useRef, memo } from 'react';
import { useTranslation, getI18n } from 'react-i18next';
import { Steps, Popover, Progress, Input, message, Spin, Dropdown, Menu as AntMenu } from 'antd';
import { useHistory, } from 'react-router-dom'
import * as echarts from 'echarts';
import style from './index.module.scss'
import { IEchartDataInfo } from '@/interface'

interface IProps {
    isMobile: boolean
    account: undefined | null | string
    language: string
    data: Array<IEchartDataInfo>
    color: Array<string>
    type: string   //圆饼的类型
}
const EchartComponent = (props: IProps) => {
    const { t } = useTranslation();
    const echartRef = useRef<any>()
    const { isMobile, account, language,
        data,
        color,
        type
    } = props

 
    useEffect(() => {
        if (data && color) {
            const option = {
                title: {
                    text: t("Join node revenue distribution"),
                    left: '58%',
                    top: '45%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,

                    },
                    textAlign: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     //top: '5%', // 将 top 属性设置为一个较大的值，使其超出图表区域
                //     top: 'bottom', // 将 top 属性设置为 'bottom'，使图例固定在底部, 
                //     left: 'center',
                //     textStyle: {
                //         color: '#fff',
                //         opacity: "0.8"
                //     },
                //    itemGap: 10 // 设置圆圈和图例文字之间的间距为10像素
                // },
                color: color,
                series: [
                    {
                        name: '收益分配',
                        type: 'pie',
                        radius: ['40%', '56%'],
                        center: ['58%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,  // 将标签的 show 属性设置为 false，隐藏标签
                            position: 'outside', //有以下几个值 outside 外部  'inside' 内部  'inner' 同 'inside'。  'center'
                            formatter: (param: any) => {
                                return param.name + ' (' + param.value + '%)';
                            },
                            fontFamily: 'Microsoft YaHei',
                            //fontFamily: 'Courier New',
                            fontSize: isMobile ? 12 : 14
                        },
                        emphasis: {
                            show: true,
                            formatter: function (params: any) {
                                return params.name + ': ' + params.value + ' (' + params.percent.toFixed(2) + '%)';
                            }
                        },
                        labelLine: {
                            show: true,
                            length2: 10, // 设置引导线终点距离
                            smooth: true, // 设置为平滑曲线
                        },
                        data: data,
                    }
                ]
            };
            if (echartRef.current) {
                const myChart = echarts.init(echartRef.current);
                myChart.setOption(option);
            }
        }
    }, [data, color,language])

    return (
        <div id='echartCirCle' className={style.echarts}
            ref={echartRef}
        > </div>
    )
}
export default memo(EchartComponent)

Array<IEchartDataInfo> 示例格式如下:

[
    {
        "value":50,
        "name":"多级返佣"
    },
    {
        "value":30,
        "name":"直推返佣"
    },
    {
        "value":5,
        "name":"创世节点"
    },
    {
        "value":5,
        "name":"黑洞销毁"
    },
    {
        "value":5,
        "name":"超级节点"
    },
    {
        "value":5,
        "name":"节点奖金池"
    }
]