vue3中用echarts和echarts-gl 实现一个3D的饼状图

在Vue3中使用ECharts和ECharts-GL来实现3D饼状图的步骤如下：

1. 安装依赖

npm install echarts echarts-gl --save

2. 引入ECharts和ECharts-GL

在Vue组件中引入ECharts和ECharts-GL：

import echarts from 'echarts'
import 'echarts-gl'

3. 准备数据

在Vue组件中准备数据，例如：

data() {
  return {
    chartData: [
      { value: 335, name: 'Chrome' },
      { value: 310, name: 'Firefox' },
      { value: 234, name: 'Safari' },
      { value: 135, name: 'IE' },
      { value: 1548, name: '其他' }
    ]
  }
}

4. 创建ECharts实例

在Vue组件中创建ECharts实例：

mounted() {
  const chartDom = this.$refs.chart
  const myChart = echarts.init(chartDom, null, { renderer: 'canvas' })

这里指定了渲染器为canvas，因为ECharts-GL需要使用WebGL渲染器，而默认的渲染器为canvas。

5. 配置ECharts选项

在Vue组件中配置ECharts选项，包括饼状图的类型、数据、标签等：

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  series: [
    {
      type: 'pie',
      radius: [20, 80],
      label: {
        show: true,
        formatter: '{b}:{d}%'
      },
      data: this.chartData
    }
  ]
}

这里指定了饼状图的类型为pie，半径范围为[20, 80]，显示标签，并使用之前准备的数据。

6. 使用ECharts-GL

在Vue组件中使用ECharts-GL来将饼状图转换为3D饼状图：

myChart.setOption(option)
myChart.getZr().painter.configLayer(0, {
  clearColor: null,
  clearDepth: 0,
  motionBlur: true,
  lastFrameIndex: -1
})
myChart.setOption({
  series: [
    {
      type: 'pie3D',
      shading: 'lambert',
      label: {
        show: true,
        formatter: '{b}:{d}%'
      },
      data: this.chartData
    }
  ]
})

这里使用`setOption`方法来设置饼状图的选项，并使用`getZr()`方法获取渲染器实例，然后使用`configLayer`方法来设置WebGL渲染器的配置。最后使用`setOption`方法将饼状图转换为3D饼状图。

7. 渲染图表

在Vue组件中渲染图表：

<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>

这里使用`ref`属性来获取DOM元素，并设置宽度和高度。

完整代码如下：

<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'

export default {
  data() {
    return {
      chartData: [
        { value: 335, name: 'Chrome' },
        { value: 310, name: 'Firefox' },
        { value: 234, name: 'Safari' },
        { value: 135, name: 'IE' },
        { value: 1548, name: '其他' }
      ]
    }
  },
  mounted() {
    const chartDom = this.$refs.chart
    const myChart = echarts.init(chartDom, null, { renderer: 'canvas' })

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      series: [
        {
          type: 'pie',
          radius: [20, 80],
          label: {
            show: true,
            formatter: '{b}:{d}%'
          },
          data: this.chartData
        }
      ]
    }

    myChart.setOption(option)
    myChart.getZr().painter.configLayer(0, {
      clearColor: null,
      clearDepth: 0,
      motionBlur: true,
      lastFrameIndex: -1
    })
    myChart.setOption({
      series: [
        {
          type: 'pie3D',
          shading: 'lambert',
          label: {
            show: true,
            formatter: '{b}:{d}%'
          },
          data: this.chartData
        }
      ]
    })
  }
}
</script>