先看效果，再看文章：

一、安裝插件

3d的圖不僅用到echarts，還用到了echarts-gl，因此都需要安裝一下哦~

npm install echarts 
npm install echarts-gl@2.0.9 //可以指定版本，也可不指定

二、在main.js中引入

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

三、在組件中使用

直接復(fù)制粘貼吧，省事

<template><div class="ybjgtzz"><!-- 餅圖 --><div class="container"><div class="chartsGl" id="charts"></div><!-- 餅圖下面的底座 --><div class="buttomCharts"></div></div></div>
</template><script>
export default {name: "Zysjg",data() {return {optionData: [{name: '工業(yè)',//名稱value: 19,//值itemStyle: {//顏色 color: 'rgba(3, 62, 209,0.5)'}}, {name: '生活',value: 13,itemStyle: {color: 'rgba(61, 222, 207,0.5)',}}, {name: '農(nóng)業(yè)',value: 15,itemStyle: {color: 'rgba(193, 142, 34,0.3)'}},],option: {}};},mounted() {this.$nextTick(() => {this.init();});},methods: {//初始化構(gòu)建init() {//構(gòu)建3d餅狀圖let myChart = this.$echarts.init(document.getElementById('charts'));// 傳入數(shù)據(jù)生成 option ; getPie3D(數(shù)據(jù)，透明的空心占比（調(diào)節(jié)中間空心范圍的0就是普通餅1就很鏤空）)this.option = this.getPie3D(this.optionData, 0.85);//將配置項設(shè)置進去myChart.setOption(this.option);//鼠標(biāo)移動上去特效效果// this.bindListen(myChart);},//配置構(gòu)建 pieData 餅圖數(shù)據(jù) internalDiameterRatio:透明的空心占比getPie3D(pieData, internalDiameterRatio) {let that = this;let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let legendData = [];let legendBfb = [];let k = 1 - internalDiameterRatio;pieData.sort((a, b) => {return (b.value - a.value);});// 為每一個餅圖數(shù)據(jù)，生成一個 series-surface(參數(shù)曲面) 配置for (let i = 0; i < pieData.length; i++) {sumValue += pieData[i].value;let seriesItem = {//系統(tǒng)名稱name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,type: 'surface',//是否為參數(shù)曲面（是）parametric: true,//曲面圖網(wǎng)格線（否）上面一根一根的wireframe: {show: false},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k},//設(shè)置餅圖在容器中的位置(目前沒發(fā)現(xiàn)啥用)center: ['80%', '100%'],radius: '60%',};//曲面的顏色、不透明度等樣式。if (typeof pieData[i].itemStyle != 'undefined') {let itemStyle = {};typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍歷時，計算出的數(shù)據(jù)和 sumValue，調(diào)用 getParametricEquation 函數(shù)，// 向每個 series-surface 傳入不同的參數(shù)方程 series-surface.parametricEquation，也就是實現(xiàn)每一個扇形。legendData = [];legendBfb = [];for (let i = 0; i < series.length; i++) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;series[i].parametricEquation = that.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,false, false, k, series[i].pieData.value);startValue = endValue;let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);legendData.push({name: series[i].name,value: bfb});legendBfb.push({name: series[i].name,value: bfb});}//(第二個參數(shù)可以設(shè)置你這個環(huán)形的高低程度)let boxHeight = this.getHeight3D(series, 20);//通過傳參設(shè)定3d餅/環(huán)的高度// 準(zhǔn)備待返回的配置項，把準(zhǔn)備好的 legendData、series 傳入。let option = {//圖例組件legend: {data: legendData,//圖例列表的布局朝向。orient: 'horizontal',center: 0,bottom: 0,//圖例文字每項之間的間隔itemGap: 15,textStyle: {color: '#A1E2FF',fontSize: '12px'},itemHeight: 10, // 修改icon圖形大小itemWidth: 10, // 修改icon圖形大小show: true,icon: 'circle',//格式化圖例文本（我是數(shù)值什么顯示什么）formatter: function (name) {var target;for (var i = 0, l = pieData.length; i < l; i++) {if (pieData[i].name == name) {target = pieData[i].value;}}return `${name}: ${target}`;},// 這個可以顯示百分比那種（可以根據(jù)你想要的來配置）formatter: function (param) {let item = legendBfb.filter(item => item.name == param)[0];let bfs = that.fomatFloat(item.value * 100, 2) + "%";console.log(item.name)return `${item.name} :${bfs}`;}},//移動上去提示的文本內(nèi)容(我沒來得及改 你們可以根據(jù)需求改)tooltip: {formatter: params => {if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *100).toFixed(2);return `${params.seriesName}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +`${bfb}`;}}},labelLine: {show: true,lineStyle: {color: '#7BC0CB',},},label: {show: true,position: 'outside',formatter: ' \n{c} vxwlu0yf4%',},//這個可以變形xAxis3D: {min: -1,max: 1},yAxis3D: {min: -1,max: 1},zAxis3D: {min: -1,max: 1},//此處是修改樣式的重點grid3D: {show: false,boxHeight: boxHeight, //圓環(huán)的高度//這是餅圖的位置top: '-20.5%',left: '-4%',viewControl: { //3d效果可以放大、旋轉(zhuǎn)等，請自己去查看官方配置alpha: 25, //角度(這個很重要 調(diào)節(jié)角度的)distance: 160,//調(diào)整視角到主體的距離，類似調(diào)整zoom(這是整體大小)rotateSensitivity: 0, //設(shè)置為0無法旋轉(zhuǎn)zoomSensitivity: 0, //設(shè)置為0無法縮放panSensitivity: 0, //設(shè)置為0無法平移autoRotate: false //自動旋轉(zhuǎn)}},series: series};return option;},//獲取3d丙圖的最高扇區(qū)的高度getHeight3D(series, height) {series.sort((a, b) => {return (b.pieData.value - a.pieData.value);})return height * 25 / series[0].pieData.value;},// 生成扇形的曲面參數(shù)方程，用于 series-surface.parametricEquationgetParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {// 計算let midRatio = (startRatio + endRatio) / 2;let startRadian = startRatio * Math.PI * 2;let endRadian = endRatio * Math.PI * 2;let midRadian = midRatio * Math.PI * 2;// 如果只有一個扇形，則不實現(xiàn)選中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false;}// 通過扇形內(nèi)徑/外徑的值，換算出輔助參數(shù) k（默認值 1/3）k = typeof k !== 'undefined' ? k : 1 / 3;// 計算選中效果分別在 x 軸、y 軸方向上的位移（未選中，則位移均為 0）let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 計算高亮效果的放大比例（未高亮，則比例為 1）let hoverRate = isHovered ? 1.05 : 1;// 返回曲面參數(shù)方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20},x: function (u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y: function (u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z: function (u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u);}if (u > Math.PI * 2.5) {return Math.sin(u) * h * .1;}return Math.sin(v) > 0 ? 1 * h * .1 : -1;}};},// 監(jiān)聽鼠標(biāo)事件，實現(xiàn)餅圖選中效果（單選），近似實現(xiàn)高亮（放大）效果。bindListen(myChart) {let that = this;let selectedIndex = '';let hoveredIndex = '';// 監(jiān)聽點擊事件，實現(xiàn)選中效果（單選）myChart.on('click', function (params) {// 從 option.series 中讀取重新渲染扇形所需的參數(shù)，將是否選中取反。let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;let k = that.option.series[params.seriesIndex].pieStatus.k;let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;// 如果之前選中過其他扇形，將其取消選中（對 option 更新）if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[selectedIndex].pieData.startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[selectedIndex].pieData.value);that.option.series[selectedIndex].pieStatus.selected = false;}// 對當(dāng)前點擊的扇形，執(zhí)行選中/取消選中操作（對 option 更新）that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[params.seriesIndex].pieData.value);that.option.series[params.seriesIndex].pieStatus.selected = isSelected;// 如果本次是選中操作，記錄上次選中的扇形對應(yīng)的系列號 seriesIndexisSelected ? selectedIndex = params.seriesIndex : null;// 使用更新后的 option，渲染圖表myChart.setOption(that.option);});// 監(jiān)聽 mouseover，近似實現(xiàn)高亮（放大）效果myChart.on('mouseover', function (params) {// 準(zhǔn)備重新渲染扇形所需的參數(shù)let isSelected;let isHovered;let startRatio;let endRatio;let k;// 如果觸發(fā) mouseover 的扇形當(dāng)前已高亮，則不做操作if (hoveredIndex === params.seriesIndex) {return;// 否則進行高亮及必要的取消高亮操作} else {// 如果當(dāng)前有高亮的扇形，取消其高亮狀態(tài)（對 option 更新）if (hoveredIndex !== '') {// 從 option.series 中讀取重新渲染扇形所需的參數(shù)，將是否高亮設(shè)置為 false。isSelected = that.option.series[hoveredIndex].pieStatus.selected;isHovered = false;startRatio = that.option.series[hoveredIndex].pieData.startRatio;endRatio = that.option.series[hoveredIndex].pieData.endRatio;k = that.option.series[hoveredIndex].pieStatus.k;// 對當(dāng)前點擊的扇形，執(zhí)行取消高亮操作（對 option 更新）that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[hoveredIndex].pieData.value);that.option.series[hoveredIndex].pieStatus.hovered = isHovered;// 將此前記錄的上次選中的扇形對應(yīng)的系列號 seriesIndex 清空hoveredIndex = '';}// 如果觸發(fā) mouseover 的扇形不是透明圓環(huán)，將其高亮（對 option 更新）if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {// 從 option.series 中讀取重新渲染扇形所需的參數(shù)，將是否高亮設(shè)置為 true。isSelected = that.option.series[params.seriesIndex].pieStatus.selected;isHovered = true;startRatio = that.option.series[params.seriesIndex].pieData.startRatio;endRatio = that.option.series[params.seriesIndex].pieData.endRatio;k = that.option.series[params.seriesIndex].pieStatus.k;// 對當(dāng)前點擊的扇形，執(zhí)行高亮操作（對 option 更新）that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;// 記錄上次高亮的扇形對應(yīng)的系列號 seriesIndexhoveredIndex = params.seriesIndex;}// 使用更新后的 option，渲染圖表myChart.setOption(that.option);}});// 修正取消高亮失敗的 bugmyChart.on('globalout', function () {// 準(zhǔn)備重新渲染扇形所需的參數(shù)let isSelected;let isHovered;let startRatio;let endRatio;let k;if (hoveredIndex !== '') {// 從 option.series 中讀取重新渲染扇形所需的參數(shù)，將是否高亮設(shè)置為 true。isSelected = that.option.series[hoveredIndex].pieStatus.selected;isHovered = false;k = that.option.series[hoveredIndex].pieStatus.k;startRatio = that.option.series[hoveredIndex].pieData.startRatio;endRatio = that.option.series[hoveredIndex].pieData.endRatio;// 對當(dāng)前點擊的扇形，執(zhí)行取消高亮操作（對 option 更新）that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[hoveredIndex].pieData.value);that.option.series[hoveredIndex].pieStatus.hovered = isHovered;// 將此前記錄的上次選中的扇形對應(yīng)的系列號 seriesIndex 清空hoveredIndex = '';}// 使用更新后的 option，渲染圖表myChart.setOption(that.option);});},//這是一個自定義計算的方法fomatFloat(num, n) {var f = parseFloat(num);if (isNaN(f)) {return false;}f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 冪   var s = f.toString();var rs = s.indexOf('.');//判定如果是整數(shù)，增加小數(shù)點再補0if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + n) {s += '0';}return s;},},// 準(zhǔn)備待返回的配置項，把準(zhǔn)備好的 legendData、series 傳入。
}
</script>
<style lang="scss" scoped>
//餅圖(外面的容器)
.container {width: 90%;height: 100%;padding-top: 15px;
}
//餅圖的大小
.chartsGl {height: 200px;width: 380px;
}
//餅圖底座（我也想給你們底座圖片 可是我不知道咋給）
.buttomCharts {background: center top url("../imgs/u111.png") no-repeat;background-size: 100% 100%;height: 95px;width: 204px;margin-top: -141px;margin-left: 21%;
}.ybjgtzz {overflow-y: auto;padding: 10px;height: 250px;box-sizing: border-box;
}
</style>

四、常修改的參數(shù)

1、修改3d餅圖大小，在大概244行的位置，grid3D的對象里面，修改distance屬性，即可調(diào)整

值越小，圖越大?

?

2、修改3d餅圖視角高度，在大概161行的位置，修改函數(shù)的第二個參數(shù)

?

3、修改3d餅圖顏色，直接在data中的optionData里面修改就行了

?4、修改餅圖位置，這個常用，也是在grid3D這個屬性里面設(shè)置，在大概240行的位置

在3d餅圖中設(shè)置下面這兩屬性是沒用的，所以這里請注意一下，記得去grid3D里面修改他的位置

?

?最后乘上官方文檔例子：echarts圖表集