echarts 多个环形嵌套 与 legend 图例图形样式

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    // legend: {
    //     data: ['耕地', '建设用地', '林地', '草地', '低效用地'],
    //     top:'10%'
    // },
    // 图例设置
      legend: [
        {
          top: "10%",
          right: "66%",
          textStyle: {  // 图例文字样式 
            color: "red",
            fontSize: 14,
            fontFamily: "微软雅黑"
          }, 
          itemStyle:{  // 图例图形的形状样式
               color: "#0DDE8C",
               opacity:1,
          },
          itemWidth: 20, // 图例图形的宽度
          itemHeight: 1, // 图例图形的高度
       
          data: [
            {
              name: "搜索引擎", // 图例文字内容 
              icon: "rect" // 图例图形的形状，有多个可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，
            //也可引用自定义的图片
              //  icon: "image://https://p1.pstatp.com/list/dfic-imagehandler/8ac89fbe-b30c-4ba0-8d75-02c0f60a7ea6"
            }
          ]
        },
        {
          top: "10%",
          right: "56%", 
            itemStyle:{ // 图例图形的形状样式
               color: "#ccc",
               opacity:1,
          }, 
          data: [
            {
              name: "直接访问",
              icon: "roundRect" //引用自定义的图片
            }
          ]
        },
        {
          top: "10%",
          right: "45%",  
             itemStyle:{ // 图例图形的形状样式
               color: "#04DFCF",
               opacity:1,
          }, 
          data: [
            {
              name: "邮件营销",
              icon: "diamond" //引用自定义的图片
            }
          ]
        },
        {
          top: "10%",
          right: "35%",  
             itemStyle:{ // 图例图形的形状样式
               color: "#FC8541",
               opacity:1,
          }, 
          data: [
            {
              name: "联盟广告",
              icon: "circle" //引用自定义的图片
            }
          ]
        },
        {
          top: "10%",
          right: "25%", 
            itemStyle:{ // 图例图形的形状样式
               color: "#E3B450",
               opacity:1,
          }, 
          data: [
            {
              name: "视频广告",
              icon: "triangle" //引用自定义的图片
            }
          ]
        },
      ], 
    series: [
        {
          // 第一环
          type: 'pie',
          zlevel: 1,
          silent: true,
          radius: ['40%', '41%'],
          hoverAnimation: false,
          color: 'rgba(88,142,197,0.1)',
          // animation:false,    //charts3 no
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [1]
        },
        { //第二环
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '56%'],
            hoverAnimation: false,//鼠标事件
            label:{
                show:false
            },  
            data: [
                {value: 80, name: '搜索引擎',itemStyle : {normal : {color :'#0DDE8C',opacity:'0.1'}}},
                {value: 45, name: '直接访问',itemStyle : {normal : {color :'#FDFDFD',opacity:'0.1'}}},
                {value: 30, name: '邮件营销',itemStyle : {normal : {color :'#04DFCF',opacity:'0.1'}}},
                {value: 61, name: '联盟广告',itemStyle : {normal : {color :'#FC8541',opacity:'0.1'}}},
                {value: 54, name: '视频广告',itemStyle : {normal : {color :'#E3B450',opacity:'0.1'}}},
            ]
        },
        { //第三环
            name     : '访问来源',
            type     : 'pie',
            radius   : ['57%', '60%'],
            labelLine: {
            length   : 40,
            },
            itemStyle:{  //中间断点间隔
                borderWidth :3,
                borderColor:'#fff'
            },
            //hoverAnimation: false, //鼠标事件
            label: {
                formatter: '{b|{b}：}{c}万访问量{abg|}\n{hr|}\n {a|{a}}   ',
                borderColor: '#8C8D8E',
                borderRadius: 4,
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 2, 
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        lineHeight: 33
                    },
                    c:{
                        color:'rgba(255, 255, 255, 0.65)',
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: [
                {value: 80, name: '搜索引擎',itemStyle : {normal : {color :'#0DDE8C'}}},
                {value: 45, name: '直接访问',itemStyle : {normal : {color :'#FDFDFD'}}},
                {value: 30, name: '邮件营销',itemStyle : {normal : {color :'#04DFCF'}}},
                {value: 61, name: '联盟广告',itemStyle : {normal : {color :'#FC8541'}}},
                {value: 54, name: '视频广告',itemStyle : {normal : {color :'#E3B450'}}},
            
            ]
        }, 
    ]
}; 

option && myChart.setOption(option);