分享一个常见大屏组件

index.js

`import React, { useEffect, useRef } from 'react' import styles from './index.less' import img from '../animal/center_ring_01.png' import * as echarts from 'echarts'; import ReactEcharts from 'echarts-for-react'; import * as THREE from 'three'; import img1 from '../../img/testImg/imgmap.webp'

export default function index() { const setOptionPie = (item) => { const transData = (value) => { const d = []

        Array.from({ length: 100 / 2 }).forEach((e, i) => {
            if (i < value / 2) {
                d.push({
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: item.color,
                        },
                    }
                });
            } else {
                d.push({
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: 'rgba(48, 72, 103, 1)',
                        },
                    },
                });
            }
            d.push({
                value: 1,
                itemStyle: {
                    normal: {
                        color: 'rgba(48, 72, 103, 0)',
                    },
                },
            });
        });
        console.log(d,'d');
        return d;
    };

    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        series: [
            {
                radius: ['90%', '88%'],
                center: ['50%', '50%'],
                type: 'pie',
                color: 'rgba(48, 72, 103, 1)',
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                },
                hoverAnimation: false,
                data: [1],
            },
            {
                radius: ['60%', '58%'],
                center: ['50%', '50%'],
                type: 'pie',
                color: 'rgba(48, 72, 103, 1)',
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                },
                hoverAnimation: false,
                data: [1],
            }, {
                type: 'pie',
                radius: ['80%', '65%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                },
                data: transData(item.value),
            },
        ],
    };
};
useEffect(() => {
    const camera = new THREE.PerspectiveCamera(70, 500 / 500, 0.01, 10);
    camera.position.z = 1;

    const scene = new THREE.Scene();

    const img2 = new THREE.TextureLoader().load(img1);
    const geometry = new THREE.SphereGeometry(0.15, 32, 32);
    const planematerial = new THREE.MeshBasicMaterial({
        map: img2,
        side: THREE.DoubleSide
    })
    const mesh = new THREE.Mesh(geometry, planematerial)
    mesh.position.z = 0.5
    scene.add(mesh)

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(500, 500);
    renderer.setAnimationLoop(animation);
    const dom = document.getElementById('three')
    // console.log(dom, 'dom')
    dom.appendChild(renderer.domElement)
    function animation(time) {
        mesh.rotation.y = time / 1000;
        renderer.render(scene, camera);
    }
}, [])



return (
    <div className={styles.main}>
        <div className={styles.circle} id='three'>
        </div>
        {/* <div></div> */}
        <div className={styles.canvas}>
            <img src={img} className={styles.circle1}></img>
            <ReactEcharts option={setOptionPie({ color: 'yellow', value: 60 })} className={styles.echaets} style={{ width: 400, height: 400 }} />
        </div>
    </div>
)

}

index.less

.main { width: 500px; height: 500px; background-color: 0x000000; position: relative; margin-left:500px;

.circle { width: 500px; height: 500px; position: absolute; top: 0; left: 0; }

.canvas {

width: 500px;
height: 1000px;
position: relative;
transform: rotateX(75deg);

.circle1 {
  position: absolute;
  top: 0;
  width: 500px;
  height: 500px;
  animation: rotate 8s linear 0s infinite;
  z-index: -1;
}

.echaets {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
}

} }

@keyframes rotate { 0% { transform: rotateZ(0); }

100% { transform: rotateZ(360deg); } }