备选轮播饼状图表2echarts 饼配置项内容和展示

      var colors = ['#EEEC0D', '#E55125', '#5EA6FE', '#F94ED2', '#67D670', '#67FFFC']
option = {
    backgroundColor: '#333333',
    legend: {
        x : '',
        y : 'top',
        data:[{
            name: '机场接送',
        }, '酒后代驾','高铁接送','道路救援','年检代办','其他'],
        icon: 'circle',
        orient: 'vertical',
        textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 400,
            fontFamily: 'PingFangSC'
        }
    },
    series : [
        {
            type:'pie',
            startAngle: 160,
            radius : [90, 142],
            center: [300, 390],
            roseType : 'radius',
            itemStyle: {
              color: 'transparent'  
            },
            label: {
              formatter: (params)=>{
                return '{color'+params.dataIndex+'|'+params.data.value+'% }';
              },
              rich: {
                  color0: {
                        fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#EEEC0D',
                        padding: [0, 6]
                  },
                  color1: {
                       fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#E55125',
                        padding: [0, 6]
                  },
                  color2: {
                       fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#5EA6FE',
                        padding: [0, 6]
                  },
                  color3: {
                       fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#F94ED2',
                        padding: [0, 6]
                  },
                  color4: {
                       fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#67D670',
                        padding: [0, 6]
                  },
                  color5: {
                       fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        color: '#67FFFC',
                        padding: [0, 6]
                  }
              }
            },
            labelLine: {
                show: true,
            },
            data: [
                {
                    value:28,
                    labelLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    itemStyle: {
                    }
                },
                {
                    value:22,
                    labelLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value:16,
                    labelLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value:20,
                    labelLine: {
                        lineStyle: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value:14,
                    labelLine: {
                        lineStyle: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value:16,
                    labelLine: {
                        lineStyle: {
                            color: colors[5]
                        }
                    }
                }
            ]
        },{
            type: 'pie',
            z: 10,
            startAngle: 160,
            radius : [90, 142],
            center: [300, 390],
            roseType : 'radius',
            color: [
                {
                    type: 'radial',
                    x: 0.4,
                    y: 0.2,
                    r: 1,
                    colorStops: [{
                        offset: 0, color: '#EEEC0D' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(234, 232, 9, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }, 
                {
                    type: 'radial',
                    x: 0.7,
                    y: 0.4,
                    r: 1,
                    colorStops: [{
                        offset: 0, color: '#E55125' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(229, 81, 37, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }, 
                {
                    type: 'radial',
                    x: 0.8,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0, color: '#5EA6FE' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(94, 166, 254, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }, 
                {
                    type: 'radial',
                    x: 0.54,
                    y: 0.8,
                    r: 1,
                    colorStops: [{
                        offset: 0, color: '#FC92F7' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(252, 146, 247, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }, 
                {
                    type: 'radial',
                    x: 0.42,
                    y: 0.6,
                    r: 1,
                    colorStops: [{
                        offset: 0, color: '#67D670' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(103, 214, 112, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }, 
                {
                    type: 'radial',
                    x: 0.06,
                    y: 0.52,
                    r: 1.2,
                    colorStops: [{
                        offset: 0, color: '#36FFF8' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(54, 255, 248, 0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }],
            label: {
                show: false,
                position: 'center',
                color: '#EBE806',
                formatter: (params)=>{
                    console.log(params)
                    return '{top|'+params.data.value+'%}' + '\n' + '{bottom| '+params.data.name+'}'
                    
                },
                rich: {
                    top: {
                        color: '#EBE806',
                        fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC'
                    },
                    bottom: {
                        color: '#EBE806',
                        fontSize: 18,
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                        padding: [0, 0, 10, 0]
                    }
                }
            },
            emphasis: {
              label: {
                  show: true
              },
              itemStyle:{
              }
            },
            data: [
                {
                    value:28, name:'酒后代驾',
                    labelLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    itemStyle: {
                    }
                },
                {
                    value:22, name:'高铁接送',
                    labelLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value:16, name:'道路救援',
                    labelLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value:20, name:'年检代办',
                    labelLine: {
                        lineStyle: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value:14, name:'其他',
                    labelLine: {
                        lineStyle: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value:16, name:'机场接送',
                    labelLine: {
                        lineStyle: {
                            color: colors[5]
                        }
                    }
                }
            ]
        }
    ]
};

myChart.setOption(option);
startSelectAnimate(myChart, '酒后代驾', ['酒后代驾', '高铁接送', '道路救援', '年检代办' ,'其他', '机场接送'])



function startSelectAnimate(myChart, firstSelectName, names) {
    myChart.dispatchAction({
      type: 'highlight',
      // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
      name: firstSelectName
    });
    let selectIndex = 1;
    setInterval(() => {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 1,
      });
      myChart.dispatchAction({
        type: 'highlight',
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        name: names[selectIndex]
      });
      selectIndex++
      if (selectIndex >= names.length) {
        selectIndex = 0;
      }
    }, 3000);
  }