echarts双层图例

要实现echarts双层图例，你可以按照以下步骤进行操作：

1. 在HTML模板中添加一个盒子，用于放置图表：

<div class="chartMachineStyle" ref="chartMachine"></div>

2. 在CSS样式中设置盒子的尺寸：

.chartMachineStyle {
  height: 200px;
  width: 355px;
}

3. 在JavaScript中使用echarts库创建双层图例的环形图：

// 引入echarts库
import echarts from 'echarts';

// 获取盒子元素
const chartMachine = document.querySelector('.chartMachineStyle');

// 初始化图表
const myChart = echarts.init(chartMachine);

// 配置图表选项
const option = {
  title: {
    text: '双层图例',
    x: 'center'
  },
  legend: {
    data: ['图例1', '图例2'],
    bottom: 10
  },
  series: [
    {
      name: '图例1',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '数据1' },
        { value: 310, name: '数据2' },
        { value: 234, name: '数据3' },
        { value: 135, name: '数据4' },
        { value: 1548, name: '数据5' }
      ]
    },
    {
      name: '图例2',
      type: 'pie',
      radius: ['30%', '40%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '数据1' },
        { value: 310, name: '数据2' },
        { value: 234, name: '数据3' },
        { value: 135, name: '数据4' },
        { value: 1548, name: '数据5' }
      ]
    }
  ]
};

// 使用配置项显示图表
myChart.setOption(option);

这样就可以实现一个带有双层图例的环形图了。