3d饼图(Vue3 + echarts + echarts-gl)

1.下载依赖(echarts 和echarts-gl)

npm install echarts
npm install echarts-gl

2.引入echarts和echrts-gl, ,

import * as echarts form 'echarts'
import 'echarts-gl'

2.1 也可以在App.vue中引入

import * as echarts from 'echarts'
import { provide } from 'vue'
export default {
  setup() {
    provide('ec', echarts)
  }
}
</script>

3.渲染echarts图（注意参考Make A Pie - 3D环饼图）

(<template>
    <div class="chart-wrapper">
         <div ref="pieChart" id="myChart"></div>
    </div>
</template>
<script>
import {inject, ref, onMounted} from 'vue'
import 'echarts-gl'
export default {
    name: 'pieChart',
    props: {
        tdata: {
            type: String,
            default: ''
        },
        tname: {
            type: String,
            default: ''
        },
        tcolor1: {
             type: String,
            default: ''
        },
        tcolor2: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        let echarts = inject("ec")
        let pieChart = ref(null)
        onMounted(() => {
            console.log(props.tname, props.tdata)
            initEcharts(props.tdata, props.tname)
        })
        // 渲染echarts图
        const initEcharts = (tdata, tname) => {
            let myChart = echarts.init(pieChart.value)
            // 传入数据生成option
             // 传入数据生成 option
            let option = getPie3D([ {
                    name: 'bb',
                    value: 80,
                    itemStyle: {
                        color: props.tcolor1,
                        opacity: 0.2,
                        fontSize: 80
                    }
                },
                {
                    name: 'aa',
                    value: 14,
                    itemStyle: {
                        color: props.tcolor2,
                        opacity: 0.7,
                        fontSize: 80