react函数组件echarts的type为custom传参格式

如果你想在 React 函数组件中使用 Echarts 的 custom 类型，需要按照如下的格式传递参数：

const option = {
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '访问来源',
      type: 'custom',
      renderItem: renderItem,
      itemStyle: {
        normal: {
          opacity: 0.8,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      encode: {
        value: 1,
        tooltip: 2
      },
      data: [
        ['直接访问', 335, '直接访问: 335'],
        ['邮件营销', 310, '邮件营销: 310'],
        ['联盟广告', 274, '联盟广告: 274'],
        ['视频广告', 235, '视频广告: 235'],
        ['搜索引擎', 400, '搜索引擎: 400']
      ]
    }
  ]
};

function CustomChart(props) {
  return (
    <ReactEchartsCore
      echarts={echarts}
      option={option}
      notMerge={true}
      lazyUpdate={true}
      style={{ height: '400px' }}
    />
  );
}

function renderItem(params, api) {
  // 渲染图形的逻辑
}

在上面的代码中，我们定义了一个名为 `CustomChart` 的 React 函数组件，其中使用了 `ReactEchartsCore` 组件来渲染 Echarts 图表。`option` 对象中包含了我们要渲染的图表的配置信息，其中 `series` 数组中的 `type` 设置为了 `'custom'`，表示我们要使用自定义渲染方式来绘制图表。同时，我们还需要提供一个 `renderItem` 函数来实现图表的绘制逻辑，该函数会在每个数据项被绘制到图表上时被调用。