reactjs - 来自数据的 React、ApexCharts、Radial Bar 系列值

Question

我是 React 新手，正在努力学习。我的个人项目是自制展示网站。我想在径向栏中显示一些细节。我按照教程制作了数组数据文件和显示详细信息的索引文件。现在我被困在径向栏中显示单个值。还需要从百分比到数字来计算值。我得到了那个工作。我尝试了一些推送功能，但没有让它按我想要的方式工作。我的编码技能是初学者水平。

显示示例

数据.js

import product1 from '../../images/product-1.png';
import product2 from '../../images/product-1.png';

export const productData = [
  {
    id: 1,
    img: product1,
    alt: 'Beer',
    name: 'Lager',
    desc: 'Saaz',
    ibu: '35',
    ebc: '40',
    abv: '8.5',
  },

  {
    id: 2,
    img: product2,
    alt: 'Beer',
    name: 'IPA',
    desc: 'Mango, Citrus',
    ibu: '85',
    ebc: '25',
    abv: '5.5',
  },
];

index.js

import React, { Component } from 'react';
import Chart from 'react-apexcharts';
import {
  ProductsContainer,
  ProductWrapper,
  ProductsHeading,
  ProductTitle,
  ProductCard,
  ProductImg,
  ProductInfo,
  ProductDesc,
  ProductIbu,
  ProductEbc,
  ProductAbv,
} from './ProductsElements';

const max = 119;
function valueToPercent(value) {
  return (value * 100) / max;
}

class IBU extends Component {
  constructor(props) {
    super(props);

    this.state = {
      series: [valueToPercent(15)],

      options: {
        plotOptions: {
          radialBar: {
            startAngle: -90,
            endAngle: 90,
            hollow: {
              margin: 10,
              size: '70%',
              background: '#222222',
              image: undefined,
              imageOffsetX: 0,
              imageOffsetY: 0,
              position: 'front',
              dropShadow: {
                enabled: true,
                top: 5,
                left: 0,
                blur: 4,
                opacity: 0.9,
              },
            },
            track: {
              background: '#d42d2d',
              strokeWidth: '67%',
              margin: 0, // margin is in pixels
              dropShadow: {
                enabled: true,
                top: 0,
                left: 0,
                blur: 4,
                color: '#000',
                opacity: 0.6,
              },
            },

            dataLabels: {
              show: true,
              name: {
                offsetY: -10,
                show: true,
                color: '#fff',
                fontSize: '17px',
              },
              value: {
                formatter: function (value) {
                  return (parseFloat(value) * max) / 100;
                },
                color: '#dadada',
                fontSize: '36px',
                show: true,
              },
            },
          },
        },
        fill: {
          colors: [
            function ({ value, seriesIndex, w }) {
              if (value < 55) {
                return '#7E36AF';
              } else if (value >= 55 && value < 80) {
                return '#164666';
              } else {
                return '#D9534F';
              }
            },
          ],
        },
        stroke: {
          lineCap: 'round',
        },
        labels: ['IBU'],
      },
    };
  }

  render() {
    return <Chart options={this.state.options} series={this.state.series} type="radialBar" height={250} />;
  }
}

const Products = ({ data }) => {
  return (
    <ProductsContainer>
      <ProductsHeading>heading</ProductsHeading>
      <ProductWrapper>
        {data.map((product, index) => {
          return (
            <ProductCard key={index}>
              <ProductImg src={product.img} alt={product.alt} />
              <ProductInfo>
                <ProductTitle>{product.name}</ProductTitle>
                <ProductDesc>{product.desc}</ProductDesc>
                <ProductIbu>{product.ibu}</ProductIbu>

                <IBU></IBU>

                <ProductEbc>{product.ebc}</ProductEbc>
                <ProductAbv>{product.abv}</ProductAbv>
              </ProductInfo>
            </ProductCard>
          );
        })}
      </ProductWrapper>
    </ProductsContainer>
  );
};
export default Products;

标签： reactjsapexchartsradial