溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue中怎么使用echarts和echarts-gl實現3D餅圖環形餅圖的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
npm install echarts npm install echarts-gl
注意：我不知道版本差異會不會有影響（可以指定版本 也可以借鑒我的）
指定版本命令 加個@后面跟版本號即可
npm install echarts-gl@2.0.9
成功之后可以在package.json中檢查是否安裝成功（如上圖）
引入位置：我沒有在main.js中全局引用，而是哪個頁面用到就引入哪里
代碼：
import * as echarts from 'echarts' import 'echarts-gl';
注意：我沒有封裝起來（你也可以先直接在頁面中實現，然后在考慮封裝需求）
1、有一個裝餅圖的容器（可以都復制走 為了成功實現效果）
<!-- 餅圖 --> <div class="container"> <div class="chartsGl" id="charts"></div> <!-- 餅圖下面的底座 --> <div class="buttomCharts"></div> </div>
2、對應樣式
//餅圖(外面的容器)
.container {
width: 100%;
height: 100%;
}
//餅圖的大小
.chartsGl {
height: 200px;
width: 400px;
}
//餅圖底座（我也想給你們底座圖片 可是我不知道咋給）
.buttomCharts{
background: center top url(/src/assets/images/bg/buttom-charts.png) no-repeat;
background-size: cover;
height: 78px;
width: 180px;
margin-top: -155px;
margin-left: 18%;
}3、餅圖數據
data() {
return {
//餅圖數據+顏色
optionData: [
{
name: '休閑室',//名稱
value: 19,//值
itemStyle: {//顏色 紫色
color: 'rgba(123, 167, 212,1)'
}
}, {
name: '羽毛球室',//藍色
value: 13,
itemStyle: {
color: 'rgba(98, 195, 250,1)',
}
}, {
name: '瑜伽室',//綠色
value: 15,
itemStyle: {
color: 'rgba(140, 189, 107,1)'
}},
{
name: '動感單車室',//橙色
value: 16,
itemStyle: {
color: 'rgba(245, 182, 94,1)'
}}
,
{
name: '兵乓球室',//黃色
value: 5,
itemStyle: {
color: 'rgba(237, 222, 111,1)'
}}
],
}
},4、鉤子中調用mouted
mounted() {
this.$nextTick(function() {
this.init();
});
},5、具體方法methods（為了你也方便修改樣式 我注釋盡量給到）
//初始化構建
init() {
//構建3d餅狀圖
let myChart = echarts.init(document.getElementById('charts'));
// 傳入數據生成 option ; getPie3D(數據，透明的空心占比（調節中間空心范圍的0就是普通餅1就很鏤空）)
this.option = this.getPie3D(this.optionData, 0.85);
//將配置項設置進去
myChart.setOption(this.option);
//鼠標移動上去特效效果
this.bindListen(myChart);
},//配置構建 pieData 餅圖數據 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);
});
// 為每一個餅圖數據，生成一個 series-surface(參數曲面) 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
//系統名稱
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
//是否為參數曲面（是）
parametric: true,
//曲面圖網格線（否）上面一根一根的
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
},
//設置餅圖在容器中的位置(目前沒發現啥用)
// center: ['50%', '100%']
};
//曲面的顏色、不透明度等樣式。
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);
}
// 使用上一次遍歷時，計算出的數據和 sumValue，調用 getParametricEquation 函數，
// 向每個 series-surface 傳入不同的參數方程 series-surface.parametricEquation，也就是實現每一個扇形。
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 = this.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
});
}
//(第二個參數可以設置你這個環形的高低程度)
let boxHeight = this.getHeight3D(series, 13);//通過傳參設定3d餅/環的高度
// 準備待返回的配置項，把準備好的 legendData、series 傳入。
let option = {
//圖例組件
legend: {
data: legendData,
//圖例列表的布局朝向。
orient: 'horizontal',
left: 10,
top: 140,
//圖例文字每項之間的間隔
itemGap: 15,
textStyle: {
color: '#A1E2FF',
},
show: true,
icon: "circle",
//格式化圖例文本（我是數值什么顯示什么）
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}`;
}
// 這個可以顯示百分比那種（可以根據你想要的來配置）
// 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}`;
// }
},
//移動上去提示的文本內容(我沒來得及改 你們可以根據需求改)
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 ></span>` +
`${ bfb }`;
}
}
},
//這個可以變形
xAxis3D: {
min: -1,
max: 1
},
yAxis3D: {
min: -1,
max: 1
},
zAxis3D: {
min: -1,
max: 1
},
//此處是修改樣式的重點
grid3D: {
show: false,
boxHeight: boxHeight, //圓環的高度
//這是餅圖的位置
top: '-20.5%',
left:'-15%',
viewControl: { //3d效果可以放大、旋轉等，請自己去查看官方配置
alpha: 30, //角度(這個很重要 調節角度的)
distance: 200,//調整視角到主體的距離，類似調整zoom(這是整體大小)
rotateSensitivity: 0, //設置為0無法旋轉
zoomSensitivity: 0, //設置為0無法縮放
panSensitivity: 0, //設置為0無法平移
autoRotate: false //自動旋轉
}
},
series: series
};
return option;
},
//獲取3d丙圖的最高扇區的高度
getHeight3D(series, height) {
series.sort((a, b) => {
return (b.pieData.value - a.pieData.value);
})
return height * 25 / series[0].pieData.value;
},
// 生成扇形的曲面參數方程，用于 series-surface.parametricEquation
getParametricEquation(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;
// 如果只有一個扇形，則不實現選中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通過扇形內徑/外徑的值，換算出輔助參數 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;
// 返回曲面參數方程
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;
}
};
},
//這是一個自定義計算的方法
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('.');
//判定如果是整數，增加小數點再補0
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + n) {
s += '0';
}
return s;
}, // 監聽鼠標事件，實現餅圖選中效果（單選），近似實現高亮（放大）效果。
bindListen(myChart) {
let that = this;
let selectedIndex = '';
let hoveredIndex = '';
// 監聽點擊事件，實現選中效果（單選）
myChart.on('click', function(params) {
// 從 option.series 中讀取重新渲染扇形所需的參數，將是否選中取反。
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;
}
// 對當前點擊的扇形，執行選中/取消選中操作（對 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;
// 如果本次是選中操作，記錄上次選中的扇形對應的系列號 seriesIndex
isSelected ? selectedIndex = params.seriesIndex : null;
// 使用更新后的 option，渲染圖表
myChart.setOption(that.option);
});
// 監聽 mouseover，近似實現高亮（放大）效果
myChart.on('mouseover', function(params) {
// 準備重新渲染扇形所需的參數
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果觸發 mouseover 的扇形當前已高亮，則不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否則進行高亮及必要的取消高亮操作
} else {
// 如果當前有高亮的扇形，取消其高亮狀態（對 option 更新）
if (hoveredIndex !== '') {
// 從 option.series 中讀取重新渲染扇形所需的參數，將是否高亮設置為 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;
// 對當前點擊的扇形，執行取消高亮操作（對 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;
// 將此前記錄的上次選中的扇形對應的系列號 seriesIndex 清空
hoveredIndex = '';
}
// 如果觸發 mouseover 的扇形不是透明圓環，將其高亮（對 option 更新）
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
// 從 option.series 中讀取重新渲染扇形所需的參數，將是否高亮設置為 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;
// 對當前點擊的扇形，執行高亮操作（對 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;
// 記錄上次高亮的扇形對應的系列號 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染圖表
myChart.setOption(that.option);
}
});
// 修正取消高亮失敗的 bug
myChart.on('globalout', function() {
// 準備重新渲染扇形所需的參數
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== '') {
// 從 option.series 中讀取重新渲染扇形所需的參數，將是否高亮設置為 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;
// 對當前點擊的扇形，執行取消高亮操作（對 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;
// 將此前記錄的上次選中的扇形對應的系列號 seriesIndex 清空
hoveredIndex = '';
}
// 使用更新后的 option，渲染圖表
myChart.setOption(that.option);
});
}
}以上就是“vue中怎么使用echarts和echarts-gl實現3D餅圖環形餅圖”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
