echarts3d饼图，环形图（包含透明效果）

效果图：

饼图：

环形图：

带透明度的环形图：

安装echarts

1. “echarts”:"^5.1.2"

2. “echarts-gl”:"^2.0.8"

   import Vue from ‘vue’
   import * as echarts from ‘echarts’
   import ‘echarts-gl’ // 3d图表库

   Vue.prototype.$echarts = echarts

.vue文件 【bindListen方法可以提取到mixins里面，以供组件多次调用】

<template>
    <div class="chart-container">
       <div class="chart" ref="chart"></div>
       <!-- 底座背景 -->
       <div class="bg"></div> 
    </div>
</template>

<script>
import { getPie3D, getParametricEquation } from 'chart.js' //工具类js，页面路径自己修改

const color = ['#005aff', '#f8b551']

export default {
  name: 'chart',
  data () {
    return {
      optionData: [
        {
          name: '启用电梯',
          value: 176
        },
        {
          name: '停用电梯',
          value: 288
        }
      ],
      statusChart:null,
      option:{}
    }
  },
  created () {
    this.setLabel()
  },
  mounted () {
    this.initChart()

    //根据窗口变化自动调节图表大小
    const that = this
    window.onresize = function () {
      that.changeSize()
    }
  },
  methods: {
    // 初始化label样式
    setLabel () {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{b|{b}}',
              '{c|{c}}{b|台}',
              '{d|{d}%}'
            ].join('
'), // 用
来换行
            rich: {
              b: {
                color: '#fff',
                lineHeight: 25,
                align: 'left'
              },
              c: {
                fontSize: 22,
                color: '#fff',
                textShadowColor: '#1c90a6',
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5
              },
              d: {
                color: color[index],
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
      })
    },
    // 图表初始化
    initChart () {
      this.statusChart = this.$echarts.init(this.$refs.chart)
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0.8, 240, 28, 26, 0.5)
      this.statusChart.setOption(this.option)
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: '电梯状态', //自己根据场景修改
        backgroundColor: 'transparent',
        type: 'pie',
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20