美文网首页
2023-12-02 图表处理

2023-12-02 图表处理

作者: gdlooker | 来源:发表于2023-12-01 09:07 被阅读0次

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":"节点奖金池"
    }
]

相关文章

  • canvas图表(1) - 柱状图

      原文地址:canvas图表(1) - 柱状图  图表一般使用到svg或canvas,其中canvas图表在处理...

  • 图表处理-分类

    一 数值图表

  • 图表处理-美化

    1. 制作过程 2.图表组成 3.图表美化

  • 二十三物件函数

    物件函数 该组函数用于处理与任何指定图表相关的图形物件。在处理当前图表上的物件时,直接使用访问。即在函数调用期间预...

  • 2019-11-27 图表

    什么情况下需要用到图表 1、为了揭示数据规律 人类对图形信息的接收和处理能力高于对文字和数字的处理能力。图表,是图...

  • Excel是一个集数据处理和图表绘制于一身的优秀软件。运用Excel的“图表向导”来绘制图表也不算麻烦。但是,如果...

  • 如何用Objective-C画颜色渐变的贝塞尔曲线

    在iOS开发中,经常需要用到一些图表来展现数据,为了使图表更加美观直白,需要做一些处理,使得图表在准确展现数据的同...

  • 一文讲清如何正确选择图表,学会后再也不会用错图表

    在工作中会发现很多人在做图表的时候,最容易出现错误的地方不是在对数据的处理上,而是在对图表的选择上。图表种类如此之...

  • uni-app微信小程序中图表组件uCharts的遮挡问题处理

    uni-app微信小程序中图表组件uCharts的遮挡问题处理 最近搞小程序用到了uCharts统计图表,本来在模...

  • 表不如图

    今天是学习Excel的第19天了,主要学习了有关图表的内容。字不如表,表不如图,图表在数据处理中发挥着很大的...

网友评论

      本文标题:2023-12-02 图表处理

      本文链接:https://www.haomeiwen.com/subject/qurcgdtx.html