echart3d柱状图实现

import * as echarts from 'echarts/core';
import { TooltipComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { Bar3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';
import {useEffect} from "react";

const LineThreeD= (props) => {
    useEffect(() => {
        echarts.use([
            TooltipComponent,
            VisualMapComponent,
            Grid3DComponent,
            Bar3DChart,
            CanvasRenderer
        ]);

        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom);
        let option;

        let hours = [ '1:00', '2:00', '3:00', '4:00', '5:00', '6:00',
            '7:00', '8:00', '9:00', '10:00', '11:00','12:00',
            '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00','24:00',];

        let station = props.stations;

        //双重遍历生成三维坐标【【1,2,3】，【4,5,6】】数据类型
        let data=[]
        for (let i=0;i<hours.length;i++){
            data.push(props.stations.map((value, index) => [i,index,Math.round(Math.random()*15+1)]))
        }

        const newArr = data.flat().map(item => item.flat());

        option = {
            tooltip: {
                //渲染坐标对应的数据
                formatter: function(value) {
                    return '车站: ' +station[value.value[1]].value+'<br/>'+
                        '客运量: ' +value.value[2]+'<br/>'+
                        '时间: ' +hours[value.value[0]]
                },
                textStyle:{
                    color:'#296ed1'
                }
            },

            visualMap: {
                max: 20,
                inRange: {
                    color: [
                        '#313695',
                        '#4575b4',
                        '#74add1',
                        '#abd9e9',
                        '#ffffbf',
                        '#fee090',
                        '#fdae61',
                        '#f46d43',
                        '#d73027',
                        '#a50026',
                    ]
                }
            },

            xAxis3D: {
                name:'时间',
                type: 'category',
                data: hours,
                nameGap:50,
                nameTextStyle:{
                    color:'#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                    },
                },
                axisLabel:{
                    color:'#fff',
                    // interval:0,
                },
            },

            yAxis3D: {
                name:'车站',
                type: 'category',
                data: station,
                nameGap:50,
                nameTextStyle:{
                    color:'#10ffea'
                },
                axisLine: {
                    lineStyle: {
                        color: '#10ffea',
                    },
                },
                axisLabel:{
                    color:'#fff',
                    interval:0,
                    margin:10,
                    fontSize: 9,
                },
                axisTick:{
                    length:6,
                    lineStyle:{
                        color:'#10ffea'
                    },
                },
            },

            zAxis3D: {
                name:'客运量',
                nameGap:30,
                type: 'value',
                nameTextStyle:{
                    color:'#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                    },
                },
                axisLabel:{
                    color:'#fff',
                },
            },

            grid3D: {
                boxWidth: 400,
                boxDepth: 900,
                top:'-5%',
                temporalSuperSampling:{
                    enable:'auto',
                },
                //3d视觉控制
                viewControl:{
                    projection:'perspective',
                    distance:900,
                    animation:true,
                    animationEasingUpdate:'cubicInOut',
                    rotateSensitivity:0.5,
                    zoomSensitivity:2,
                    minDistance:600,
                    maxDistance:1000,
                },
                light: {
                    main: {
                        intensity: 1.2
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [
                {
                    type: 'bar3D',
                    data: newArr.map(function (item) {
                        return {
                            name:'苹果园',
                            value: [item[0],item[1],item[2]],
                        };
                    }),
                    shading: 'color',
                    itemStyle: {
                        opacity: 1,
                        color: '#ffffff',
                    },
                    emphasis: {
                        label: {
                            fontSize: 20,
                            color: '#ffffff'
                        },
                        itemStyle: {
                            color: '#ffffff'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    },[props.stations])
    return (
        <div id = "main" style = { {  width: '100%', height:'100%',}}> </div>
    );
}
export default LineThreeD;