echarts 3d地图

         var option = {title: {show:false,text: '地图',left: 'center',top: 20,textStyle:{color:'#fff',fontSize:24}},geo3D: {map: 'guangdong',viewControl: {center: [-10, 0, 10]},// environment:'#333',environment: 'js/echarts/bg/bg.png', // 背景贴图// environment: 'js/echarts/Milkyway/Milkyway_BG.jpg', // 背景贴图// environment: 'js/echarts/Milkyway/Milkyway_preview.jpg', // 背景贴图// 配置为垂直渐变的背景// environment: {//  type: 'linear',//     x: 0,//     y: 0,//     x2: 1,//    y2: 1,//    colorStops: [{//        offset: 0,//        // 0f378f 83caff f42419//       color: '#0f378f' // 0% 处的颜色//     }, {//      offset: 1,//        // 00091a 1E9FFF 9f0304//       color: '#00091a' // 100% 处的颜色//   }],//   globalCoord: false // 缺省为 false// },light: {main: {// color: '#fff', //光照颜色intensity: 1, //光照强度shadow: true, // 阴影shadowQuality: 'medium',//阴影质量 ultra //阴影亮度alpha: 50, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。beta: 90 // 主光源绕 y 轴，即左右旋转的角度。},ambient: { // 环境光intensity: 0.5 // 环境光反射},// 光源ambientCubemap: {diffuseIntensity: 1,texture: 'js/echarts/Mono_Lake_B_Ref.hdr',// texture: 'js/echarts/Milkyway/Milkyway_small.hdr',// texture: './hdr/Milkyway_small/Milkyway_Light.hdr',}},// 地板groundPlane: {show: false},// realisticMaterial: {//   roughness: 0.2,//   metalness: 0,// },// postEffect: {//   enable: true,//   SSAO: {//     enable: true,//     radius: 2,//    intensity: 1,//   },// },// viewControl: {//   distance: 135,//   minDistance: 110,//   maxDistance: 180,//   alpha: 50,//   minAlpha: 30,//   beta: 75,// },// 边距label:{// opacity:0.4,},itemStyle: {// 196 3 16// 0f378f 83caff f42419borderColor: 'rgba(131,202,255,0.8)',// borderColor: 'rgba(255,255,255,0.1)',borderWidth: 1,opacity:1,// opacity:0.4,// color:'rgba(1,144,255,0.2)',// normal: {//    areaColor: '#031525',//   borderColor: '#FFFFFF',// },},emphasis: {itemStyle:{color:'rgba(1,144,255,1)',// color:'#c40310'}},shading:'realistic', // 真实渲染引擎 有光照效果// 材质贴图 配置realisticMaterial:{detailTexture:'js/echarts/bg/bg.png',// metalness:1// roughness:1}},series: [{type: 'scatter3D',coordinateSystem: 'geo3D',data: shiGeoCoordMap,symbol: 'pin',symbolSize: 30,itemStyle: {color: '#c40310',borderColor: '#fff',borderWidth: 1},label: {show: true,// formatter: '{b}',formatter: function(item) {var name = item.name || '';// if (name != '茂名市') {//     return ''// } else {//    return name// }return name},position: 'right',textStyle: {color: '#000',backgroundColor: '#fff',fontSize: 24}}}, {type: 'lines3D',coordinateSystem: 'geo3D',effect: {show: true,period: 2, // 飞行时长trailWidth: 7,trailLength: 0.5,trailColor: '#f00',opacity:1,trailOpacity: 1, // 尾迹的不透明度},// polyline:true,lineStyle: {show: false,color: '#fff',opacity: 0,},data: linesData}]};

echarts 3d地图相关推荐

echart 广州3d_vue echarts 3D地图+省+弹窗
先看效果图 image.png image.png 首先下载echarts 插件,3d地图需要依赖echarts-gl npm install echarts --save npm install e ...
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...
Echarts 3D地图图表
需求:实现如图所示的3D地图图表 (1)原本使用的highcharts没有3d地图的功能,搜索插件也没有可替代的方案,选择echarts理由是在地图方面百度拥有毋庸置疑的实力 https://blog ...
vue echarts 3D地图+省+弹窗
先看效果图首先下载echarts 插件,3d地图需要依赖echarts-gl npm install echarts --save npm install echarts-gl --save 创建e ...
echarts 3d地图_独占进博会800m2展厅！3D炫酷光影秀带你邂逅金山往事..._政务_澎湃新闻...
流水悠悠,青砖黛瓦记忆中的江南,是一种天然的古典韵味,好像只要身临其境,就能梦回江南的曲水流觞.炊烟袅袅...... 金山如画醉美枫泾如何把来参加进博会的观众直接带至枫泾? 答案一共 ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
echarts 3d地图-成都
<template><div class="right_main_under"element-loading-text="拼命加载中"elem ...
echarts 3D地图点击事件
由于echarts3D地图为非数据区域所以需要别的方法去绑定点击事件 1.配置的series中添加 { type: 'map3D', //新增一条数据区域图标 map: 'china', itemS ...
＜可视化：Echarts 3D地图（map3D）组件案例 - 中山市举例＞
文章目录

echarts 3d地图

echarts 3d地图

echarts 3d地图相关推荐

最新文章

热门文章