在react中用echarts实现3d地球

1.安装echarts,和3d,去官网看如何安装就行
2.导入import echarts from 'echarts'

import echartsGL from 'echarts-gl'

3.render组件里面写div.

render() {return (<div className="middleEarth"><div id="box" className="earth-middle"style={{ width: '100%', height:'400px' ,marginTop:'250px'}}></div><div className="earth-bottom"><div className="dizuo"></div></div></div>)}

4.在componentdidmount里配置

loadPie() {let canvas = document.createElement('canvas');let mapChart = echarts.init(canvas, null, {width: 4096,height: 2048});let pOp = {geo: {map: 'china',label: {fontSize: 12},itemStyle: {areaColor: 'transparent',borderColor: '#00FDFF'},emphasis: {areaColor: 'transparent'},// regions: [//    {//         name: "南海诸岛",//       value: 0,//         itemStyle: {//          normal: {//                 opacity: 0,//               label: {//                  show: false//               }//             }//         }//     }// ],top: 0,left: 0,right: 0,bottom: 0,boundingCoords: [[-180, 90],[180, -90]]},data: []}mapChart.setOption(pOp);let option = {globe: {globeRadius: 50,globeOuterRadius: 50,baseTexture: require('../../../../static/images/pic6.png'),heightTexture: require('../../../../static/images/pic6.png'),displacementScale: 0.04,//地球顶点唯一的大小 displacementQuality: 'medium',shading: 'realistic',realisticMaterial: {    //roughness属性用于表示材质的粗糙度，0为完全光滑，1完全粗糙，中间的值则是介于这两者之间roughness: 0.2,},// environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//    offset: 0, color: '#00aaff' // 天空颜色// }, {//  offset: 0.7, color: '#998866' // 地面颜色// }, {//    offset: 1, color: '#998866' // 地面颜色// }], false),light: { // 光照阴影main: {color: '#fff', // 光照颜色intensity: 1.2, // 光照强度shadow: false, // 是否显示阴影alpha: 40,beta: -30},ambient: {intensity: 0.5}},viewControl: {projection: 'perspective',alpha: 90,beta: 0,center: [0, 0, 0], // 视角targetCoord: [110.46, 10.92],autoRotate: true,autoRotateAfterStill: 10,distance: 110 // 视距},postEffect: {enable: true,depthOfField: {         //景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊enable: false,focalDistance: 50}},layers: [{type: 'blend',texture: mapChart}]},series: [{type: 'scatter3D',coordinateSystem: 'globe',label: {show: false},emphasis: {label: {show: false}},data: []}]}const myChart = echarts.init(document.getElementById('box'));myChart.setOption(option);}

componentDidMount() {this.loadPie()}

在react中用echarts实现3d地球相关推荐

Vue中使用Echarts构建3D地球层+模拟时钟
文章目录前言一.Echarts示例二.使用步骤 1.引入库 2.完整代码总结前言 Echarts官网上的例子大多是原生js,那么我们在vue项目中该如何使用?本文举两个例子. 一.Ech ...
vue引入echarts实现3D地球旋转不设置背景图片
效果图: 1.安装 echarts cnpm install echarts -S 或 npm install echarts -S 2.安装 echarts-gl cnpm install ec ...
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
【vue前端】Echarts 3D地球照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件
使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...
3d地球散点图加路径lines3D的实现，带有散点即路径的立体地球
一. globe+lines3D+scatter3D 效果图: 安装 npm install echarts echarts-gl 代码 <template><div id=&quo ...
前端用echarts-gl实现旋转的3D地球
通过echarts-gl中的globe来实现一个3D地球需要引用的js: echarts.min.js echarts-gl.min.js world.js 废话不多,代码如下: <div i ...
【实战篇】40 # 如何实现3D地球可视化？
说明 [跟月影学可视化]学习笔记. 如何实现一个 3D 地球学习笔记源码实现:https://github.com/kaimo313/visual-learning-demo 整体实现效果如下: 1 ...
js 3d地球飞机环绕飞行动画js特效
下载地址 js实现的3d地球飞机环绕飞行动画特效 dd:
echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...

在react中用echarts实现3d地球

在react中用echarts实现3d地球

在react中用echarts实现3d地球相关推荐

最新文章

热门文章