echarts 地图增加背景图

新建一个img，背景图路径给src：

 let img = document.createElement('img')img.src = require('@/assets/img/chongqing.png')

在geo的 itemStyle 里面的 areaColor 配置，以及emphasis里面写入：

 itemStyle: {borderColor: "rgba(63, 218, 255, 0)",  // 边界颜色areaColor: {image: img,  // 背景图repeat: 'no-repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'}, // 区域颜色
// 鼠标移入时
emphasis: {areaColor: {image: img,repeat: `repeat-x` // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'},}

未免图片还没有加载完成报错，给图片添加onload：再setOption

 img.onload = () => {chongqingChart.setOption(option)}

最后实现效果：

背景图是我在网上随便截的一个图，框出的这个区域是从阿里云下载的json文件。具体查看：

echarts地图自定义点样式，缩放计算点聚合，自定义图例icon_甲乙 ^-^的博客-CSDN博客

echarts 地图增加背景图相关推荐

百度地图结合echarts地图运历图
百度地图结合echarts地图运历图关于各省显示车辆发车数量引入部分 <script src="~/Scripts/Echarts/Js/esl.js"></ ...
echarts圆柱形带背景图
项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用先给大家看看效果 1. 引入echarts yarn add echaets // 也可以npm下载,看个 ...
高德地图自定义背景图+自定义文字，marker自定义
mounted() {this.addMarker()}, //实例化marker addMarker() {let me = this;var position = new AMap.LngLat( ...
实时疫情数据+echarts地图+自定义背景
目前需求是在地图上展示全国各省的地图并展示实时疫情数据,以重庆为例展示各地前往重庆的数据迁移图效果如下 1.引入echart与china.json数据 //最新版echart必须要以此种方式引入 i ...
百度地图自定义背景图瓦片图制作流程
百度地图瓦片图制作流程 1.下载BaiduMapTileCutter.exe 链接: https://pan.baidu.com/s/1uxgiz8j9keQd19qz2byT5Q 提取码: cwva ...
echarts 地图密集迁移图
http://gallery.echartsjs.com/editor.html?c=xHJr-qVeWl var allData = { "citys": [{ "na ...
Echarts地图柱状图问题
1.Echarts地图柱状图问题需要根据功能修改自己所需的地图模块,当前功能是根据line和散点图进行处理,根据经纬度形成一个柱状图, 比如:需要两个或者多个柱状图 1.添加多个经纬度,添加多个柱状 ...
php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层？
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
echarts （二）之canvas设置地图背景图
实现效果如下: echarts效果实现参考:echarts地图连线动效之(一) 接下来说这个背景图是如何利用canvas实现的: 首先在初始化echarts后增加下面代码: `` var chart ...
echarts5.0引入地图，背景渐变色，航线图，地图阴影
效果图如下,文章末尾附全部代码: 参考: 1.航线图 Vue Echarts飞机航线图_Kinghiee的博客-CSDN博客 2.地图阴影 echarts中国地图实现阴影效果&自定义设置_K ...

echarts 地图增加背景图

echarts 地图增加背景图相关推荐

最新文章

热门文章