vue实现echarts3D饼图

效果图:

1. 首先安装依赖

npm install echarts
npm install echarts-gl

2.mainjs 中导入以及挂载

import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts;

3. 传入数据生成 3D 的配置项以及 option 的配置

 let series = getPie3D(this.optionData, 0);
       let option = {
        tooltip: {
          trigger: "manual",
          formatter: (params) => {
            if (
              params.seriesName !== "pie2d"
            ) {
              return `
${params.seriesName}：${(
                option.series[params.seriesIndex].pieData.proportion * 100
              ).toFixed(2)}%`;
            }
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false, 
          boxHeight: 20, 
          top: "-10%",
          
          viewControl: {
            alpha: 30, 
            distance: 300, 
            
            zoomSensitivity: 0, 
            panSensitivity: 0, 
            autoRotate: false, 
          },
        },
        series: series,
      };

4. 指示线的配置

   option.series.push({
        name: "pie2d",
        type: "pie",
        label: {
          color: "#fff",
          fontSize: 12,
          position: "bottom",
          formatter: function (params) {
            return `{nameSty|${params.name}:}{valueSty|${params.value}}`;
          },
          rich: {
            nameSty: {
              fontSize: 14,
              color: "#fff",
            },
            valueSty: {
              fontSize: 14,
              color: "#fff",
            },
          },
          
          
          
          
        },
        avoidLabelOverlap: false,
        labelLine: {
          length: 10,
          length2: 20,
          minTurnAngle: 0,
          lineStyle: {
            color: "#ffffff",
            width: 1,
          },
        },
        startAngle: 340, 
        clockwise: false, 
        radius: ["40%", "24%"],
        center: ["50%", "50%"], 
        data: this.optionData,
        itemStyle: {
          opacity: 0,
        },
        selectedOffset: 30, 
        bottom: "4%",
        
      });
      this.myChartCricleBtmf.setOption(option);