vue集成echarts，自定义绘制一个type='surface'的饼状图

在Vue中集成ECharts，首先需要安装ECharts库和Vue相关的插件如vue-echarts。你可以通过npm或者yarn来安装：

npm install echarts vue-echarts
# 或者
yarn add echarts vue-echarts

接下来，创建一个Vue组件并导入ECharts，并在模板里自定义绘制一个type='surface'的饼状图。下面是一个简单的例子：

<template>
  <div id="chart-container" style="width: 800px; height: 600px;"></div>
</template>

<script>
import ECharts from 'echarts';

export default {
  name: 'MyChart',
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const option = {
        type: 'pie', // 更改为'surface'，但注意ECharts默认并不支持表面类型的饼图
        series: [
          {
            name: '数据',
            type: 'pie', // 这里暂时还是用正常的饼状图
            radius: ['45%', '70%'],
            data: [
              { value: 335, name: '产品A' },
              { value: 310, name: '产品B' },
              { value: 234, name: '产品C' },
              { value: 135, name: '产品D' },
              { value: 1548, name: '其他' },
            ],
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{b}: {c} ({d}%)'
              }
            }
          ]
        ]
      };

      this.chartInstance = ECharts.init(document.getElementById('chart-container'));
      this.chartInstance.setOption(option);
    }
  },
};
</script>

在这个例子中，我们先初始化了一个ECharts实例，然后设置了饼状图的数据和配置选项。由于`type='surface'`不是标准的饼图类型，ECharts可能无法直接支持，你需要查阅ECharts文档或社区是否有相关的自定义扩展。