简单易懂的Echars案例，实现点击列表联动饼图

## 简单易懂的Echars案例，实现点击列表联动饼图
1. 安装 echarts-for-react
2. 项目中引入 import ReactECharts from 'echarts-for-react';
3. 开始写案例啦！！！

1. 首先我们先写一个左侧列表 StageLine
利用StageItem 将 data 中的数据遍历并展示。 

import React = require('react');
import { StageItem } from './StageItem';

const data = [
  { name: '糖', value: '12' },
  { name: '蛋白质', value: '24' },
  { name: '脂肪', value: '15' },
];

type StageLineProps = {
  handleClickPie?: (index: number) => void;
  setCurrentIndex?: (o: number) => void;
};

export default function StageLine({
  handleClickPie,
  setCurrentIndex,
}: StageLineProps) {
  return (
    <div>
      {data?.map((item, index) => {
        return (
          <div
            key={index}
            onClick={() => {
              handleClickPie?.(index);
              setCurrentIndex?.(index);
            }}
          >
            <StageItem title={item.name} value={item.value} />
          </div>
        );
      })}
    </div>
  );
}

#### StageLine 子组件 StageItem

import { Group, Text } from '@mantine/core';
import React = require('react');

type StageItemProps