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;
echart3d柱状图实现
于 2023-03-16 11:40:47 首次发布