天天看点

echarts地图配置

仓库地址:
注:建议使用<code>echarts</code>绘制地图安装4.9版本的,5.x的<code>select</code>选中指令能调到你头秃
echarts地图配置
功能描述:该页面可配置区块<code>未选中</code>、<code>高亮</code>情况下的<code>贴图</code>、<code>区块颜色</code>、<code>边框颜色</code>、<code>地图阴影</code>,<code>文字颜色</code>等的配置,并添加<code>点击事件</code>可以获取区块名称
echarts地图配置
echarts地图配置

自定义颜色+点击事件

自定义颜色

自定义颜色实现思路:需要将<code>series</code>中<code>map</code>的<code>geoIndex</code>设置为0(即把地图上面的图层关掉),然后对<code>geo</code>进行图层设置(去除掉了<code>series</code>的地图图层就会展示地图<code>geo</code>中的设置,那些个<code>label</code>、<code>itemStyle</code>都在<code>geo</code>中配置),并在<code>geo</code>中添加<code>regions</code>数组(后面会贴代码),改数组会对指定区域进行颜色配置

点击事件

点击事件实现思路:不同于上面<code>tooltip</code>加点击事件,这里讲的是在<code>echarts</code>中添加点击事件点击事件想要获取到数据,需要在<code>series</code>中<code>map</code>的<code>data</code>设置值(<code>name</code>为注入<code>echarts</code>地图的名字,其他数据根据需求来)

上代码

visualMap着色

实现思路

visualMap着色实现思路:series中map需带name、value值,本质根据value大小进行着色,需在options中添加visualMap,进行最大、最小、颜色等的配置,达到我们想要的效果

贴代码

echarts地图配置

先写一个弹框组件

再在需要用的地方引入

具体调用处的<code>tooltip</code>中引入<code>popDemo1</code>组件导出<code>html</code>代码块

echarts地图配置
注:本人并不建议用这种,因为不能放大、缩小、拖拽,这些操作会造成点位偏移。

核心代码如下