react | echarts | react组件间传参 | 动态改变样式

react官网：zh-hans.react.dev/learn

echarts官网：echarts.apache.org/handbook/zh…

react + echart 使用

安装

npm install --save echarts-for-react

编写图表 & 传参动态改变图表样式

在需要的路径下创建一个echarts文件夹，在里面编写对应的图表文件：

gaugeChart.js

import React from 'react';
import ReactECharts from 'echarts-for-react';

// 获取传参data
function GaugeChart(data) {
  const getOption = () => ({
    series: [
      {
        type: 'gauge',
        startAngle: data.data.startAngle,
        endAngle: 0,
        min: 0,
        max: data.data.max,

        itemStyle: {
          color: data.data.color,
        },
        progress: {
          show: true,
          roundCap: true,
          width: 22,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 22,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: data.data.current,
          },
        ],
      },
    ],
  });

  return (
    <ReactECharts
      option={getOption()}
      style={{ height: data.data.height, width: data.data.width }}
    />
  );
}

export default GaugeChart;

index.js

import GaugeChart from './echarts/gaugeChart';

export default function Dashboard() {
    //传参data
    return (
         <GaugeChart
          data={{
            current: listData.topRightData.num,
            max: 15000,
            startAngle: 180,
            color: '#6c5dd3',
            height: '300px',
            width: '370px',
          }}
        />
    )
}

效果图：

ehcarts参数

看文档：echarts.apache.org/handbook/zh…