漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化

简介: 漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化

Echarts地图整体渐变(1)

Echarts地图整体渐变(2)

Echarts地图卫星云图(3)

Echarts地图卫星云图(4)

Echarts地图冰雪效果(5)

Echarts地图蓝色天空(6)


Echarts地图冰雪奇缘(7)

Echarts地图冰雪奇缘(8)

代码属性

三维地理坐标系组件

geo3D =
        {
            show: false,
            type: 'map3D',
            name: 'map3D',
            map: map,//地图注册名称;
            viewControl: {
                // autoRotate: true,//自动旋转
                minBeta: -3600,//每次旋转3600/360=10圈
                maxBeta: 3600//每次旋转3600/360=10圈
            },
            zlevel: -20
        };


itemStyle属性的调整

            itemStyle: {
                //color: 'rgba(39,165,100,1)', // 图形的颜色
                areaColor: 'rgba(39,165,100,1)',//地图区域的颜色
                opacity: 1,//图形透明度
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.3)', // 地图边配色
            },


材质属性

            shading: 'realistic',
            realisticMaterial: {
                detailTexture: 'images/baixue.jpg',
                roughness: 0
            },


鼠标控制

            viewControl: {
                // autoRotate: true,
                minBeta: -3600,
                maxBeta: 3600
            },


光照效果

            light: {
                main: {
                    color: '#fff', //光照颜色
                    intensity: 1.2, //光照强度
                    shadowQuality: 'high', //阴影亮度
                    shadow: true, //是否显示阴影
                    alpha: 55,
                    beta: 10
                },
                ambient: {
                    intensity: 0.3
                }
            },


lockdatav Done!

相关文章
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
1944 1
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
1171 24
echarts地图数据信息流向图效果
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
5125 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2767 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1895 1
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
946 1
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
252 1
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作