Echart5.0，自定义地图图片纹理，自定义label背景图显示多个点，增加自定义图片图层点

最新推荐文章于 2024-08-14 10:04:32 发布
最新推荐文章于 2024-08-14 10:04:32 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： echart 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/130666158
版权
本文介绍了如何在Echart5.0中实现自定义地图背景，展示多个标签，并添加自定义图片图层点。在项目需求中，利用Echart创建世界/中国/省份地图，地图具有独特的纹理效果，标签展示丰富，同时包含自定义图片的特定标记点。
摘要由CSDN通过智能技术生成
功能背景

项目需要使用Echart实现一个世界/中国/省份地图,需要自定义地图背景纹理，同时显示多个标签，并且显示自定义的图片的点。

效果图

在这里插入图片描述
1、地图背景图片
2、标签内部左侧行政区缩写背景图片
3、标签下方的钻石图标也是背景图片
4、目前标签的背景是rgb颜色，其实也可以和下方钻石图标同理使用自定义背景图的

代码实现 这里只展示了option的代码
var img = require('../assets/img/diamand2.png')
了解本专栏 订阅专栏 解锁全文 超级会员免费看
_小郑有点困了
关注
专栏目录
订阅专栏
vue使用echart自定义标签以及颜色（echart 5.0以上版本）
_小郑有点困了的博客
09-16 801
常规样式 UI画的样式效果 细节在于这个小圆点的颜色要和饼图块的颜色一致，这在5.0（echarts版本）之前的版本是可以使用这一段代码实现的。 label:{ formatter: params => {//● return ( '{icon|▅}{name|' +params.name+ '}{value|' + params.value + '}' ); },
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
热门推荐
qq_38718629的博客
09-16 3万+
最近公司项目中在使用Echarts绘制图表时，由于默认的label标签不能满足设计稿需求，所以研究了对label标签进行格式化的方案，了解到可以使用formatter内容格式器对标签内容进行调整，formatter支持字符串模板和回调函数两种形式，下面以饼图为例对formatter格式化标签label标签遇到的情况记录如下。
Echarts之地图自定义lable文本标签&去掉小点
ZT的专栏
05-18 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省名称居中显示</title> </head> <body> <div id="map" style="width: 600px;height: 500px; float: left;"> </di
一键换肤（Echarts 自定义主题）
最新发布
不同场景下的水平居中
08-14 571
先使用主题色（初始化），再配置的 option，option 里的颜色覆盖了主题里的颜色。如果是多主题切换，则可以将各个主题的颜色整合在一个文件，分别注册。这样的话，就可以对应官方示例中的这种（深色/浅色模式）例如：修改背景、标题等，可按照设计师需求来更改。如果以上主题不满足使用，可以自己自定义主题。复制到项目中（ theme.json ），配置好之后，下载主题。这是因为执行先后顺序。
echarts 设置地图外边框、地图背景渐变以及在地图上打点.js
05-13
主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图：https://blog.csdn.net/qq_36437172/article/details/106099547
Echarts地图之——如何给地图添加背景图片
在车上在路上的博客
03-21 4849
我们这里把背景加到了和原地图相同位置的底部（top,left,zoom等设置相同，geo的被上层覆盖），同时把原本的地图itemstyle背景设置为了transparent，这样做的目的是：保证原本的地图可以设置高亮、选中等的时候背景不会受到影响。因为如果给整张地图加一个背景是会有错位的情况的，所以这种做法不推荐，只是提供一种如何这么做的方式，而且我们这里的这张背景图片正好颜色比较相似就把边界的横线模糊掉了，没那么明显。是不是感觉并没有上面的红线错位的感觉，只能说我的这张地图颜色深边界感不明显。
echarts map地图添加背景图
xiaohuli_hyr的博客
05-14 983
给map地图添加了一个阴影3d的效果，添加一张背景图，给人感觉有3d的效果。在mounted方法里面给地图添加背景图。
echarts 为地图添加背景图片
day_z的博客
04-07 4799
在script中定义： var domImg = document.createElement("img"); domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px"; domImg.src = `图片转换为base64的编码` 在地图配置项geo中： itemStyle:{ normal:{ areaColor: { image: domImg, .
echarts中设置地图背景图片
qq_37708668的博客
10-19 3415
1、实现效果 2、配置属性 var domImg = document.createElement('img') domImg.style.height = domImg.height = domImg.width = domImg.style.width = '100px' domImg.src = `data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAA…`//图片转换的base64格式太长了此处省略部分 itemStyle: { normal: {
android5.0自定义带动画的RadioPreference
09-15
假如你需要RadioPreference或者一个带特殊功能的Preferece，当然你会选择了自定义一个Preference控件，但是会发现，自定义的Preference中Switch,CheckBox,Radio的动画效果没掉了，实在捉急。其实是因为android在...
ThinkPHP5.0框架控制器继承基类和自定义类示例
10-18
如果需要对控制器进行更多的自定义处理，可以创建一个自定义的基控制器类。这个自定义基控制器可以放置一些全局需要的方法，然后其他所有控制器类继承这个自定义的基控制器。下面展示了一个自定义基控制器类的例子：...
echarts地图插入背景图片
weixin_48728002的博客
09-08 1414
{ image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' } HTMLImageElement ： var img =document.createElement("img") img.src = 'base64格式的image' ...
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
别人笑我太疯癫 我笑他人看不穿 流水落花春去也 游戏人间
09-30 1万+
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-28 2891
echarts 除了 tooltip，其它的标签暂时都不支持 html tooltip: { show: true, backgroundColor: "transparent", formatter: function (params) { var htmlStr = ''; htmlStr += '<div c
ECHARTS 之CANVAS设置地图背景图
hsany330的专栏
07-14 1479
实现效果如下： echarts效果实现参考：echarts地图连线动效之（一） 接下来说这个背景图是如何利用canvas实现的： 首先在初始化echarts后增加下面代码： `` var chart = echarts.init(document.getElementById("beijing")); var img = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('
echarts设置geo地图背景图片
linlinzzzzz的博客
09-14 1459
2.把图片放在echarts配置项里。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值