echarts嵌套环形图+线性渐变

import * as echarts from 'echarts';
import React, { useEffect } from 'react';

function LianxiEcharts() {
    useEffect(() => {
        var myChart = echarts.init(document.getElementById('main'));
        //指定图标配置
        var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                  
                    data: [
                      { value: 1048, 
                        name: '测速报警', 
                        itemStyle: {
                            color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                { offset: 0, color: '#FFDAB9' },  // 渐变起始颜色
                                { offset: 1, color: '#FF6347' }   // 渐变结束颜色
                              ]
                            }
                        }},
                      { value: 735, name: '人员报警',
                      itemStyle: {
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            { offset: 0, color: '#44DAB9' },  // 渐变起始颜色
                            { offset: 1, color: '#FF6347' }   // 渐变结束颜色
                          ]
                        }, },},
                      { value: 580, name: '车辆报警' },
                      { value: 580, name: '安防报警' },
                    ]
                  },
              {
                name: 'Access From',
                type: 'pie',
                radius: ['70%', '74%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                itemStyle: { // 设置圆角
                    borderRadius: [0, 0, 20, 20]
                },
                // roseType: 'area', // 添加间距
                data: [
                  { value: 1048, name: '测速报警' },
                  { value: 735, name: '人员报警' },
                  { value: 580, name: '车辆报警' },
                  { value: 580, name: '安防报警' },
                ]
              }
            ]，
 graphic: [
                {
                  type: 'image',
                  id: 'logo',
                  left: 'center',
                  top: '40%',
                  z: 10,
                  bounding: 'raw',
                  style: {
                    image: 'https://img0.baidu.com/it/u=389534501,3382403978&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1704560400&t=d8d8fdb545ee00e8f5558279b7e98569',  // 设置图片的 URL，环形图中心空白，引用图片
                    width: 100,
                    height: 100
                  }
                }
              ]
          };
          
        //对实例对象配置
        myChart.setOption(option)


    }, [])

    return (<div id='main' style={{ width: '1200px', height: '800px' }}>

    </div>);
}

export default LianxiEcharts;