echarts 3D饼图组件

import { DirectionalLight, HemisphereLight, AmbientLight } from "three" import SeparateComponent from "@/components/SeparateComponent/index.js" import Viewer from "../ThreeViewer/index.js" import PieChart from "./Object3D/PieChart.js" import Base from "./Object3D/Base.js" import MousePicker from "../ThreeViewer/libs/MousePicker.js" import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js" // 空间三维饼图 const PieChart3D = class extends SeparateComponent { constructor(option = {}) { super(option) // 保留变量，便于控制台调试 window.pie = this } debuggerGUI() { this.gui = new GUI() let i = 0 for (const arc of this.pieChart.arcs.children) { const folder = this.gui.addFolder(i++) folder.addColor(arc.material, "color") } } // 初始化场景 init(container) { // 绑定 DOM 容器并创建三维场景 this.container = container this.viewer = new Viewer(container) // 注册交互事件 this.container.addEventListener("click", this._onclick) // 创建拾取器 this.picker = new MousePicker(this.container, this.viewer.camera) // 设置 home 视角 this.viewer.controller.enabled = false this.viewer.controller.enableDamping = true this.viewer.setHomeView({ position: [-4.620786360532119, 2.795874371458728, 0.387600336194976], target: [0.34561329527677576, -0.6700456614490823, -0.055261656292050175] }) this.viewer.toHomeView() // 加一个半球光源 this.hemiLight = new HemisphereLight(0xffffff, 0x444444) this.hemiLight.position.set(20, 20, 20) this.hemiLight.intensity = 2 this.viewer.scene.add(this.hemiLight) // 加一个平行光源 this.dirLight = new DirectionalLight(0xffffff) this.dirLight.position.set(1, 20.0, 1) this.dirLight.intensity = 2 this.viewer.scene.add(this.dirLight) // 添加环境光 this.ambiLight = new AmbientLight() this.ambiLight.intensity = 1 this.viewer.scene.add(this.ambiLight) // 添加三维环状饼图 this.pieChart = new PieChart({ counterclockwise: this.props.counterclockwise, remapping: (x) => x ** 0.3 }) this.viewer.scene.add(this.pieChart) // 更新饼图要素 this.pieChart.updateItems(this.props.values) this.pieChart.show().then(() => { // 显示完毕后执行的回调事件 if (isNaN(this.props.defaultChoiceIndex)) return this.choice(this.pieChart.arcs.children[this.props.defaultChoiceIndex]) }) // 添加基座 this.base = new Base() this.viewer.scene.add(this.base) // 注册帧率事件，用于制作动画 this.viewer.scene.onBeforeRender = () => { // 逐帧运行 this.pieChart.update(this.viewer.clock.frameTime) this.base.update(this.viewer.clock.frameTime) } // // 注册 GUI // this.gui = new GUI(this.container); // // 圆环高度 // this.gui.heightFolder = this.gui.addFolder('height'); // this.gui.heightFolder // .add(this.pieChart.scale, 'y', 0.001, 2.0, 0.01) // .onChange(); // this.gui.base = this.gui.addFolder('底座'); // // 地盘的圆盘底座 // this.gui.base.base = this.gui.base.addFolder('base'); // this.gui.base.base // .add(this.base.base.scale, 'x', 1.0, 4.0, 0.01) // .name('底盘大小') // .onChange((value) => { // this.base.base.scale.x = value; // this.base.base.scale.y = value; // }); // this.gui.base.base // .add(this.base.base.rotation, 'z', 0, Math.PI * 2.0, 0.01) // .name('底盘角度'); // this.gui.base.base // .add(this.base.base.position, 'y', -1.0, 1.0, 0.01) // .name('底盘海拔'); // this.gui.base.base // .addColor(this.base.base.material, 'color') // .name('底盘颜色'); // // 地盘箭头 // this.gui.base.arrow = this.gui.base.addFolder('arrow'); // this.gui.base.arrow // .add(this.base.arrow.scale, 'x', 1.0, 4.0, 0.01) // .name('箭头大小') // .onChange((value) => { // this.base.arrow.scale.x = value; // this.base.arrow.scale.y = value; // }); // this.gui.base.arrow // .add(this.base.arrow.rotation, 'z', 0, Math.PI * 2.0, 0.01) // .name('箭头角度'); // this.gui.base.arrow // .addColor(this.base.arrow.material, 'color') // .name('箭头颜色'); // // 横幅 // this.gui.base.banner = this.gui.base.addFolder('banner'); // this.gui.base.banner // .add(this.base.banner.scale, 'x', 0.1, 2.0, 0.01) // .name('横幅大小') // .onChange((value) => { // this.base.banner.scale.x = value; // this.base.banner.scale.z = value; // }); // this.gui.base.banner // .add(this.base.banner.scale, 'y', 0.1, 2.0, 0.01) // .name('横幅高度'); // this.gui.base.banner // .add(this.base.banner.position, 'y', 0.0, 0.5, 0.01) // .name('横幅海拔'); // // 平行光 // this.gui.dirLight = this.gui.addFolder('平行光'); // this.gui.dirLight // .add(this.dirLight.position, 'x', -20, 20, 0.01) // .name('光源 x'); // this.gui.dirLight // .add(this.dirLight.position, 'y', -20, 20, 0.01) // .name('光源 y'); // this.gui.dirLight // .add(this.dirLight.position, 'z', -20, 20, 0.01) // .name('光源 z'); // this.gui.dirLight // .add(this.dirLight, 'intensity', 0.0, 2.0, 0.01) // .name('光源强度'); // this.gui.dirLight.addColor(this.dirLight, 'color').name('光源颜色'); // // 半球光 // this.gui.hemiLight = this.gui.addFolder('半球光'); // this.gui.hemiLight // .add(this.hemiLight.position, 'x', -20, 20, 0.01) // .name('光源 x'); // this.gui.hemiLight // .add(this.hemiLight.position, 'y', -20, 20, 0.01) // .name('光源 y'); // this.gui.hemiLight // .add(this.hemiLight.position, 'z', -20, 20, 0.01) // .name('光源 z'); // this.gui.hemiLight // .add(this.hemiLight, 'intensity', 0.0, 2.0, 0.01) // .name('光源强度'); // this.gui.hemiLight.addColor(this.hemiLight, 'color').name('光源颜色'); // // 环境光 // this.gui.ambiLight = this.gui.addFolder('环境光'); // this.gui.ambiLight // .add(this.ambiLight, 'intensity', 0.0, 2.0, 0.01) // .name('光源强度'); // this.gui.ambiLight.addColor(this.ambiLight, 'color').name('光源颜色'); } choice(target) { if (!target) return const name = target ? target.name : undefined const value = target ? target.value : undefined // 遍历圆环子成员,标记目标高度 for (const item of this.pieChart.arcs.children) { if (item === target) { // 如果当前弧为鼠标选中弧度,拉高 item.originHeight = item.targetHeight item.targetHeight = 1.7 item.t = 0.0 } else { // 否则还原高度 item.originHeight = item.targetHeight item.targetHeight = 1.0 item.t = 0.0 } } // 触发回调事件 if (typeof this.props.onclick !== "function") return this.props.onclick(name, value)