Echarts-gl geo3D设置regions区域高度

一、问题描述

首先VUE页面中展示3D地图，点击区域时，该区域凸起。

二、安装依赖

需要安装echarts-gl
这里直接使用npm install echarts-gl，安装的版本是2.0.8，

注意此处有坑！！

此时使用import将依赖局部导入页面，发现地图展示不出来，然后在main.js全局引入，同样不生效！！

（1）只好安装低版本

npm install  echarts-gl@1.1.0 -S

（2）import引入依赖

import 'echarts-gl'

这个时候，根据我们自己写的geo3D配置，就可以展示地图了

三、设置区域regions

我们要实现点击某块区域，该区域呈凸起状态，也就是高度要比全局高度regionHeight大。按照官方文档的说法，通过regions设置区域样式

其中包括区域名、高度、边框等配置项。尝试后发现区域样式都可以设置成功，只有高度不生效！！！

原因竟是官方文档字段有错，regions中的regionHeight要替换为height才生效！！

最终效果如下：

Echarts-gl geo3D设置regions区域高度相关推荐

Echarts 设置面积区域图（areaStyle核心）
第011个点击查看专栏目录 Echarts折线区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用.区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据.通过 areaStyle 设 ...
ECharts 根据不同的X轴区域，设置不同区域的背景色
let myChart = echarts.init(document.getElementById(idName));let option = {tooltip: {trigger: 'axis', ...
echarts 极坐标设置分隔区域颜色
echarts 极坐标设置分隔区域颜色借用echarts 官网上的一个极坐标案例,如下图实现如下图的效果,在y轴上每一段设置颜色,形成渐变背景效果设置代码: radiusAxis: {split ...
echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款
(题图是使用 ECharts GL 渲染的纽约市建筑群) ECharts GL (后面统一简称 GL)为 ECharts 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见 ...
android获取导航栏宽高,Android获取屏幕的宽高度、状态栏、标题栏、导航栏、编辑区域高度...
目录 0.相关文章: 1.获取屏幕款高度代码: /** * 获取屏幕宽度 * * @param context 上下文对象 * @return int */ public static int ge ...
html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...
偶然看到这个页面浏览量显示的东东,很有意思,自己做了一个. 代码如下:html> 页面浏览量顶部横条显示 $(function(){ $(window).scroll(function() { ...
js获取可视区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
网上看到一张图效果非常好,斜45度角模式的3d地图,用在大屏模式上非常有科技感,高端大气上档次. 于是,研究了下怎么做,发现Echarts GL能做出相似的描边3D效果,地图可以加载浙江天地图(如下图 ...
Android完美获取状态栏高度、标题栏高度、编辑区域高度的获取
日常开发中我们经常会因为绘图.绘制自定义组件.定位组件或者是计算布局高度需要减去状态栏高度等需要来获取Activity界面中状态栏.标题栏的高度.但很多人马上要拿起来就用还是会遇到各种各样的问题,一时 ...

Echarts-gl geo3D设置regions区域高度

一、问题描述

二、安装依赖

三、设置区域regions

Echarts-gl geo3D设置regions区域高度相关推荐

最新文章

热门文章