machinery-admin/src/pages/MonitoringScreen/components/MachineryStatus.jsx

import React, { useEffect, useMemo, useRef } from 'react';
import * as echarts from 'echarts/core';
import BasicChart from './BasicChart';
import deepCopy from '@/utils/deepCopy';
import { hex2Rgb } from '@/utils/color';

const colorList = ['#FB9900', '#23E8AE', '#E63404', '#51D4FF', '#B8B2A9', '#C579FF'].map((x) => {
  const rgb = hex2Rgb(x);
  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: x, // 0% 处的颜色
    },
    {
      offset: 0.2,
      color: x, // 20% 处的颜色
    },
    {
      offset: 1,
      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 100% 处的颜色
    },
  ]);
});

const defaultOpt = {
  tooltip: {},
  grid: {
    top: 20,
    right: 10,
    bottom: 10,
    left: 10,
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff',
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: ['rgba(255, 255, 255, 0.1)'],
        type: 'dashed',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff',
    },
  },
  series: [
    {
      type: 'bar',
    },
  ],
};

export default (props) => {
  const option = useMemo(() => deepCopy(defaultOpt), []);
  option.xAxis.data = props.source.map((x) => x.name);
  option.series[0].data = props.source.map((x, i) => ({
    value: x.value,
    itemStyle: {
      color: colorList[i % 6],
    },
  }));

  return <BasicChart title="农机状态统计" option={option} />;
};