React中如何使用echarts寫出3d旋轉(zhuǎn)扇形圖
更新時間：2024年11月23日 10:02:33 作者：苦逼的猿寶
這篇文章主要給大家介紹了關(guān)于React中如何使用echarts寫出3d旋轉(zhuǎn)扇形圖,介紹了如何使用React、TypeScript、Less和Echarts來構(gòu)建高效、可維護的前端應(yīng)用代碼結(jié)構(gòu),并提供了相關(guān)代碼示例,需要的朋友可以參考下
效果
技術(shù)
React + TypeScript + Less + Echarts
代碼塊
import * as echarts from "echarts";
import React, { useEffect, useRef } from "react";
import "echarts-gl";
import "./index.less";
const LeftEcharts = () => {
const chartDom = useRef(null);
useEffect(() => {
const myChart = echarts.init(chartDom.current);
// 數(shù)據(jù)源
const optionsData: any = [
{
name: "IT運營管控團隊",
value: 1000,
itemStyle: {
color: "#dd4b3d",
},
},
{
name: "業(yè)務(wù)支撐團隊",
value: 600,
itemStyle: {
color: "#dd9c3c",
},
},
{
name: "計費結(jié)算團隊",
value: 900,
itemStyle: {
color: "#f6bb50",
},
},
{
name: "數(shù)據(jù)應(yīng)用運營團隊",
value: 800,
itemStyle: {
color: "#5ec7f8",
},
},
{
name: "Paas組件運營團隊",
value: 400,
itemStyle: {
color: "#31dda1",
},
},
{
name: "云數(shù)安全團隊",
value: 300,
itemStyle: {
color: "#637aff",
},
},
];
// 生成扇形的曲面參數(shù)方程，用于 series-surface.parametricEquation
function 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;
// 如果只有一個扇形，則不實現(xiàn)選中效果。
// if (startRatio === 0 && endRatio === 1) {
// isSelected = false;
// }
isSelected = false;
// 通過扇形內(nèi)徑/外徑的值，換算出輔助參數(shù) k（默認值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 計算選中效果分別在 x 軸、y 軸方向上的位移（未選中，則位移均為 0）
let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.cos(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 * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 生成模擬 3D 餅圖的配置項
function getPie3D(pieData: any, internalDiameterRatio) {
let series: any = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData: any = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 為每一個餅圖數(shù)據(jù)，生成一個 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem: any = {
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: 1 / 10,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle: any = {};
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);
}
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 = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
legendData.push(series[i].name);
}
return series;
}
const series: any = getPie3D(optionsData, 0.6);
series.push({
name: "pie2d",
type: "pie",
label: {
opacity: 1,
fontSize: 14,
lineHeight: 20,
textStyle: {
fontSize: 14,
color: "#fff",
},
show: false,
position: "center",
},
labelLine: {
length: 10,
length2: 10,
show: false,
},
startAngle: 2, //起始角度，支持范圍[0, 360]。
clockwise: false, //餅圖的扇區(qū)是否是順時針排布。上述這兩項配置主要是為了對齊3d的樣式
radius: ["50%", "60%"],
center: ["62%", "50%"],
data: optionsData,
itemStyle: {
opacity: 0,
},
});
// 準備待返回的配置項，把準備好的 legendData、series 傳入。
const option = {
legend: {
show: true, // 顯示圖例
tooltip: {
show: true, // 顯示圖例的提示信息
},
orient: "vertical", // 圖例的排列方向
data: ["IT運營管控團隊", "業(yè)務(wù)支撐團隊", "計費結(jié)算團隊", "數(shù)據(jù)應(yīng)用運營團隊", "Paas組件運營團隊", '云數(shù)安全團隊'], // 圖例的內(nèi)容
top: 20, // 圖例距離頂部的距離
itemGap: 10, // 圖例項之間的間距
itemHeight: 20, // 圖例項的高度
itemWidth: 24, // 圖例項的寬度
right: "5%", // 圖例距離右邊的距離
textStyle: { // 圖例的文本樣式
color: "#fff", // 文本顏色
fontSize: 10, // 文本字體大小
rich: {
name: {
width: 60, // 名稱部分的寬度
fontSize: 14, // 名稱部分字體大小
color: "#B0D8DF", // 名稱部分顏色
fontFamily: "Source Han Sans CN", // 名稱部分字體
},
value: {
width: 50, // 數(shù)值部分的寬度
fontSize: 4, // 數(shù)值部分字體大小
padding: [0, 5, 0, 5], // 數(shù)值部分的內(nèi)邊距
color: "#fff", // 數(shù)值部分顏色
fontFamily: "Source Han Sans CN", // 數(shù)值部分字體
},
A: {
fontSize: 20, // A部分的字體大小
color: "#B0D8DF", // A部分顏色
fontFamily: "Source Han Sans CN", // A部分字體
},
rate: {
width: 60, // 比率部分的寬度
fontSize: 14, // 比率部分字體大小
padding: [0, 5, 0, 10], // 比率部分的內(nèi)邊距
color: "#579ed2", // 比率部分顏色
fontFamily: "Source Han Sans CN", // 比率部分字體
},
},
},
formatter: function (name) { // 格式化圖例項的顯示內(nèi)容
let total = 0; // 總值
let target; // 目標值
for (let i = 0; i < optionsData.length; i++) {
total += optionsData[i].value; // 計算總值
if (optionsData[i].name === name) { // 查找目標值
target = optionsData[i].value;
}
}
let arr = [
"{name|" + name + "}", // 名稱
"{value|" + "}", // 數(shù)值（未賦值需補充）
"{rate|" + ((target / total) * 100).toFixed(1) + "%}", // 比率
];
return arr.join(""); // 返回格式化后的字符串
},
},
animation: true, // 開啟動畫效果
tooltip: {
backgroundColor: "rgba(64, 180, 176, 0.6)", // 提示框的背景顏色
borderColor: "rgba(64, 180, 176, 0.6)", // 提示框的邊框顏色
textStyle: {
color: "#fff", // 提示文本顏色
fontSize: 24, // 提示文本字體大小
},
formatter: (params) => { // 格式化提示框內(nèi)容
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d" // 排除特定系列
) {
return `${params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
};"></span>${option.series[params.seriesIndex].pieData.value + "萬人"
}`; // 返回系列名稱和數(shù)值
}
},
},
labelLine: {
show: true, // 顯示標簽連接線
lineStyle: {
color: "#7BC0CB", // 標簽連接線顏色
},
normal: {
show: true, // 正常狀態(tài)顯示
length: 10, // 連接線長度
length2: 10, // 連接線第二段長度
},
},
label: {
show: true, // 顯示標簽
position: "outside", // 標簽位置
formatter: " \n{c}\nwppm3vysvbp%", // 標簽格式
textStyle: {
color: "rgba(176, 216, 223, 1)", // 標簽文本顏色
fontSize: 24, // 標簽字體大小
},
},
xAxis3D: {
min: -1, // x軸最小值
max: 1, // x軸最大值
},
yAxis3D: {
min: -1, // y軸最小值
max: 1, // y軸最大值
},
zAxis3D: {
min: -1, // z軸最小值
max: 1, // z軸最大值
},
grid3D: {
show: false, // 是否顯示3D網(wǎng)格
boxHeight: 1, // 3D盒子的高度
left: -40, // 3D圖形左邊距
top: -10, // 3D圖形頂部邊距
width: "50%", // 3D圖形寬度
viewControl: {
distance: 280, // 視距
alpha: 20, // 視角的俯仰角
beta: 15, // 視角的旋轉(zhuǎn)角
autoRotate: true, // 是否自動旋轉(zhuǎn)
rotateSensitivity: 1, // 旋轉(zhuǎn)靈敏度
zoomSensitivity: 0, // 縮放靈敏度
panSensitivity: 0, // 平移靈敏度
},
},
series: series, // 數(shù)據(jù)系列
};
myChart.setOption(option);
}, []);
return (
<div className='left-echarts'>
<div className='left-top-nav'>
團隊概況
</div>
<div style={{ width: "496px", height: "270px", position: "relative" }}>
<div ref={chartDom} style={{ width: "100%", height: "100%", zIndex: "5" }}></div>
<div className="bg"></div>
</div>
</div>
);
};
export default LeftEcharts;總結(jié)
到此這篇關(guān)于React中如何使用echarts寫出3d旋轉(zhuǎn)扇形圖的文章就介紹到這了,更多相關(guān)React echarts寫3d旋轉(zhuǎn)扇形圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇javaScript 鏈接打印機,打印小票的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
為一個字符串進行URL編碼很容易,只需要調(diào)用encodeURI,傳入要編碼的字符串即可,而且實現(xiàn)的方法不止這一個,下面這篇文章主要給大家介紹了關(guān)于js對url進行編碼解碼的三種方式,需要的朋友可以參考下2023-02-02
JavaScript中異步編程的實現(xiàn)方式詳細講解
JavaScript異步編程是一種讓程序在處理耗時任務(wù)時不阻塞主線程的技術(shù),它通過回調(diào)函數(shù)、Promise和async/await等機制來實現(xiàn)任務(wù)的并發(fā)執(zhí)行,這篇文章主要介紹了JavaScript中異步編程的實現(xiàn)方式,需要的朋友可以參考下2025-10-10
這篇文章介紹了js控制不同的時間段顯示不同的css樣式的實例代碼，有需要的朋友可以參考一下2013-11-11
前端請求后端接口報錯blockedmixed-content的原因以及解決辦法
blocked:mixed-content是一個安全警告,表示當前頁面加載的資源存在混合內(nèi)容,這篇文章主要介紹了前端請求后端接口報錯blockedmixed-content的原因以及解決辦法,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)源碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
在前端對圖片添加水印,通常是為了保護版權(quán)、標識來源或防止未經(jīng)授權(quán)的使用,這篇文章主要介紹了前端圖片添加水印的主流實現(xiàn)方案,文中的示例代碼講解詳細,有需要的小伙伴可以了解下2026-03-03
layui使用templet格式化表格數(shù)據(jù)的方法
今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
回車直接實現(xiàn)點擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實現(xiàn)點擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下2014-02-02
從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
這篇文章主要介紹了從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法,本文結(jié)合JQuery源碼和js高級程序設(shè)計再次探究apply方法與call方法,需要的朋友可以參考下2014-09-09