【无标题】

下面的引入好像没用上

import DashBoard from '@/components/DashBoard';
import { Radio, Select } from 'antd';
import { useEffect, useRef, useState } from 'react';
import type { EChartsOption } from 'echarts';
import { useRequest } from 'umi';
import Service from './service';
import moment from 'moment';
import './index.less';
import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
import { map } from 'rxjs/operators';
import Echarts, { echarts } from '@/components/DashBoard/echarts';
import { isNoCommunity } from '@/utils/util';

这块开始

type TopEchartsItemNodeType = {
  value: any;
  max?: any;
  title: string;
  formatter?: string;
  bottom?: string;
};

下面是图的描述

const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
  let formatterCount = 0;
  const options = {
    series: [
      {
        type: 'gauge',
        min: 0,
        max: props.max || 100,
        startAngle: 200,
        endAngle: -20,
        center: ['50%', '65%'],
        title: {
          show: false,
        },
        axisTick: {
          distance: -20,
          lineStyle: {
            width: 1,
            color: 'rgba(0,0,0,0.15)',
          },
        },
        splitLine: {
          distance: -22,
          length: 9,
          lineStyle: {
            width: 1,
            color: '#000',
          },
        },
        axisLabel: {
          distance: -22,
          color: 'auto',
          fontSize: 12,
          width: 30,
          padding: [6, -4, 0, -4],
          formatter: (value: number) => {
            if (value === 0) {
              formatterCount = 0;
            }
            formatterCount += 1;
            if ([1, 3, 6, 9, 11].includes(formatterCount)) {
              return value + (props.formatter || '%');
            }
            return '';
          },
        },
        pointer: {
          length: '80%',
          width: 4,
          itemStyle: {
            color: 'auto',
          },
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 20,
          itemStyle: {
            borderWidth: 3,
            borderColor: '#fff',
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, .25)',
            color: 'auto',
          },
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.25, 'rgba(36, 178, 118, 1)'],
              [
                0.4,
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(66, 147, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(36, 178, 118, 1)',
                  },
                ]),
              ],
              [
                0.5,
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(250, 178, 71, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(66, 147, 255, 1)',
                  },
                ]),
              ],
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(250, 178, 71, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(247, 111, 93, 1)',
                  },
                ]),
              ],
            ],
          },
        },
        detail: {
          show: false,
        },
        data: [{ value: props.value || 0 }],
      },
    ],
  };

显示

 return (
    <div className={'echarts-item'}>
      <div className={'echarts-item-left'}>
        <div className={'echarts-item-title'}>{props.title}</div>
        <div className={'echarts-item-value'}>
          {props.value}
          {props.formatter || '%'}
        </div>
        {props.bottom && <div className={'echarts-item-bottom'}>{props.bottom}</div>}
      </div>
      <div className={'echarts-item-right'}>
        <>
          {
            // @ts-ignore
            <Echarts options={options} /> 这块
          }
        </>
      </div>
    </div>
  );

下面是界面显示

<div className={'echarts-items'}>
          <TopEchartsItemNode title={'CPU使用率'} value={topValues.cpu} />

          <TopEchartsItemNode
            title={'JVM内存占用'}
            formatter={'G'}
            value={topValues.jvm}
            max={topValues.jvmTotal}
            bottom={`总JVM内存  ${topValues.jvmTotal}G`}
          />

          <TopEchartsItemNode
            title={'磁盘占用'}
            formatter={'G'}
            value={topValues.usage}
            max={topValues.usageTotal}
            bottom={`总磁盘大小  ${topValues.usageTotal}G`}
          />

          <TopEchartsItemNode
            title={'系统内存占用'}
            formatter={'G'}
            value={topValues.systemUsage}
            max={topValues.systemUsageTotal}
            bottom={`总系统内存  ${topValues.systemUsageTotal}G`}
          />
        </div>