解析错误：意外的令牌，期望为“，”：无状态功能组件React

Question

我正在使用无状态功能组件绘制图形，该图形的数据将通过父级组件内部的props传递下来。

我不确定我的错误是由于语法还是我的棉短绒。

错误在第45行，我试图在绘制图表的函数中使用道具

const DoughutChart = (props) => {
  const getOptions = () => ({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        name: 'Proportion of all learning in each capability area',
        type: 'pie',
        radius: ['55%', '80%'],
        avoidLabelOverlap: true,
        label: {
          normal: {
            show: true,
            position: 'outside',
          },
          emphasis: {
            show: true,
            textStyle: {
              fontWeight: 'bold',
            },
          },
        },
        labelLine: {
          normal: {
            lineStyle: {
              color: 'rgba(218, 223, 225, 1)',
            },
            smooth: 0.2,
            length: 15,
            length2: 25,
          },
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        data: {props.data}, // Parsing Error: Unexpected token, expected ","
      },
    ],
  })
  return <ReactEcharts option={getOptions} style={{ height: 350, width: 530 }} />
}
export default DoughutChart

.eslintrc

{
  "parser": "babel-eslint",
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true,
          "modules": true,
          "experimentalObjectRestSpread": true
      }
  },
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-param-reassign": ["error", { "props": false }],
    "prettier/prettier": [
      "error", {
        "semi": false
      }
    ]
  }
}