封装echarts3D饼图

如果你需要经常使用3D饼图，你可以封装一个函数来生成3D饼图，这样可以简化代码，并且提高代码的复用性。下面是一个简单的封装函数示例：

function createPieChart3D(container, data, options) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(container));

  // 设置默认的图表选项
  var defaultOptions = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: [30, 110],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        label: {
          show: true
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: data
      }
    ]
  };

  // 合并用户传入的选项和默认选项
  var chartOptions = $.extend({}, defaultOptions, options);

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(chartOptions);
}

在以上代码中，我们定义了 `createPieChart3D` 函数，该函数接受三个参数：

- `container`：用于显示图表的 HTML 元素的 ID。
- `data`：饼图数据数组。
- `options`：图表选项对象。

在函数内部，我们首先初始化 Echarts 实例，然后设置默认的图表选项。接着，我们使用 jQuery 的 `$.extend()` 函数将用户传入的选项和默认选项进行合并，并使用 `myChart.setOption()` 方法将图表显示在页面上。

使用该函数生成3D饼图的示例代码如下：

var data = [
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1548, name: '搜索引擎'}
];

var options = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: [20, 100],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      label: {
        show: true,
        formatter: '{b}: {c} ({d}%)'
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
};

createPieChart3D('main', data, options);

在以上代码中，我们调用了 `createPieChart3D` 函数，并传入了 `container`、`data`、`options` 三个参数。其中，`container` 的值为 `'main'`，表示图表将显示在 ID 为 `'main'` 的 HTML 元素中。`data` 和 `options` 分别为饼图数据和图表选项。