微信小程序使用echarts地图自定义markPoint标点图标symbol

原创 已于 2024-02-29 16:41:20 修改 · 1.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #echarts #小程序

于 2024-02-29 16:39:40 首次发布
文章讲述了在微信小程序中引入并使用echarts实现全国地图的效果时遇到的错误，主要关注了`Image`对象的定义问题，发现升级echarts到5.4.x及以上版本会出现放大缩放问题，而5.1.2版本则正常。作者还分享了解决方法，即降级echarts版本以实现双指缩放功能。

微信小程序中使用echarts

参考文档： 《微信小程序使用echarts显示全国地图》 《如何在微信小程序开发中使用echarts以及踩坑记录(最全教程)》

实现效果

在这里插入图片描述

新的问题

按照参考文档在微信小程序中成功引入echarts效果如下
在这里插入图片描述

在这里插入图片描述
小程序报错 ReferenceError: Image is not defined
定位问题： echarts.js文件中的 new Image
在这里插入图片描述
微信小程序中创建Image改为了：
在这里插入图片描述
解压echarts.js文件修改如下
在这里插入图片描述

最后我的 echarts.js文件是 5.1.2版本。
关于不能放大和缩放问题（小程序）
实测是echarts版本的问题，5.4.x，5.3.x都有问题，当我选择用5.1.2版本就可以双指放大缩小了！

微信小程序——Echarts使用（保姆式教程）
不迁怒，不贰过。小知识，大智慧。
06-17 1万+
一、Echarts 简介 二、小程序中引入 Echarts 1、下载echarts插件 2、定制图形，生成 echarts.min.js 文件 3、替换 echarts.js 文件 三、小程序中使用 Echarts
微信小程序使用echarts显示全国地图
YourNikee的博客
11-17 2936
首先可以看一下echarts官方的实例 也可以直接使用我参照了官方实例的方法： 1、下载echarts小程序组件并放置到具体项目 下载地址 将项目拉到本地之后，找到文件中的 ec-canvas 文件夹，并将其整个复制到你的小程序项目中 我新建了一个component文件夹放置这个组件 2、下载全国地图 链接 打开的网站可以查询全国的所有省市区，暂未验证是否为最新国标库。 搜索你想要的地图节点，选择 JSON API(包含子域)，我这里以全国地图为例 将文本框内的链接复制并在新窗口打开，因为这个文件原本
echarts地图自定义区域(并添加标记)
前端阿皓
09-10 9245
一、安装echarts???? npm i echarts --save 二、引入注册???? // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 三、绘制自定义区域并下载geojson???? 1、打开网站 http://geojson.io/ 2、项目中新建map.json，将geojson的内容复制到map.json里面 四、使用???? 1、将map.json引入到当前页面 import
echarts：map3D如何设置不同的symbol
1111111111
05-16 5074
上篇文章我们处理了map3D散点图的点击问题，发现只有一个散点的时候，点击会失效，把所有数据放在一个散点图里就可以了，那么新的问题又来了，所有数据都放一块了，该如何根据数据设置不同的symbol，这种需求很常见，比如这12条数据可以分成医院、学校和宾馆三类，每一类使用不同的symbol，但是翻看了文档，scatter3D的symbol并不支持回调函数，想要分别给散点设置symbol，那就得用循环来设置，但是使用循环设置的话，每张散点图上只有一条数据，点击又会失效…… 解决思路： 既然只有一个散点的图
微信小程序地图标记点marker，点击标记点显示详细信息
qq_42097490的博客
05-25 2万+
项目中想要实现的效果在地图上显示所有数据标点，点击显示详情信息，首先看一下图片是否符合各位的需求，在这里也是学习加深一下 直接上代码： wxml: <map id="myMap" scale="9" bindcontroltap="controltap" latitude="{{centerY}}" longitude="{{centerX}}" markers="{{markers}}" bindlabeltap="markertap" bindregiοnchange="regionchang
echarts 自定义 markPoint 的 symbol 样式
热门推荐
river、的博客
05-30 11万+
/** * 获取文本宽高 * @param text 文本 * @param fontSize 代表汉字的大小，英文字会自动按照默认值 * @returns {{width: *, height: *}} */ function textSize(text,fontSize) { var span =...
echarts 地图绘制自定义标记
qq_37299479的博客
04-04 7020
echarts map 自定义标记
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
微信小程序引入ECharts，并自定义动态修改表内参数配置
weixin_42966151的博客
04-11 1412
ECharts官方并没有给出小程序的相关参考，但是有大神做出了ECharts-小程序版，可以直接引用。
微信小程序Echarts覆盖正常组件问题解决
01-03
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。  尝试解决的思路：  z-index：Echarts使用的是微信...
echarts 之 markPoint标注自定义
qq_34811855的博客
09-27 3027
echarts 之 markPoint标注自定义
echarts 自定义 markPoint 的 symbol 样式--更改图标
ZhomyHui的博客
09-07 3303
1、echarts的本地静态文件引入 async drawLineZzqwd() { if (!document.getElementById('myChart_zzqwd')) { return } ***const symbolImg2 = 'image://' + require('@/assets/images/warning.png')*** const myChart2 = this.$echarts.init(document
ECharts标注markPoint 自定义
qq_36456342的博客
10-29 1万+
在写折线图时需要默认或者标注最大值 最小值以及自定义的值 等等 如图所示需要标注当前时间 直接贴代码 标注最大值，最小值 series: [{ data: [], type: 'line', markPoint: { data: [ {name...
echarts 地图自定义图标_Echarts3.0 地图自定义图标
weixin_39792803的博客
12-22 1449
Echarts是大家常用的可视化工具，想必大家用的也是得心应手，但是有时候偏偏会遇到些奇怪的想法，比如：我要在地图上插????。刚开始想到的居然不是用Echarts，而是百度的另一款产品百度地图，但是集成之后，还需要对特定行政单位外的区域添加遮罩层，并且地图自带的路网等也不好去除，于是又回来折腾Echarts。强调一下，本篇文章使用的是 Echarts 3.X，现阶段Echarts已经更新到4.X的版本...
echarts markPoint标注自定义 图片、自定义内容 、文字文本、标注便宜距离
m0_54281425的博客
11-21 6012
markPoint: { label: { color: '#FFF', // 文字颜色 padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离 show: true, formatter: '10:30' // 自定义文字内容 }, data: [{ ty..
在echarts柱状图两侧添加亮灯圆点图标—markPoint用法
Cindy_liusongyuan的博客
09-13 9493
在echarts柱状图两侧中添加亮灯圆点图标 需求背景 本需求是项目实际开发需求，亮灯圆点作为预警风险情况，分布在柱状图的两侧， 如下图所示： 从无到有的开发思路 （1）首先，本主之前未做过类似的开发需求，但是既然客户提出这样的需求，我们就尽量满足。我在echarts官方案例中，找到一个具有相似特点的例子，不知道大家看过之后会对我的需求有什么联系， 如下图所示： （2）...
echarts 地图制作 自定义标点
weixin_42489478的博客
05-22 2736
目录下新建一个zhengjiang.js文件。点击需要省份地图，下载坐标。
echarts折线图自定义打点标记小工具
最新发布
YJLTF的博客
04-08 1839
把长方形压扁成线模拟了一番自定义打点标记，记录下来备用。实现自定义打点标记，索性用。
Echarts--markPoint属性
m0_55969466的博客
12-23 1万+
使用很简单，在series对象中添加markPoint对象即可，属性可以设置官方提供的几种基本图形，也可以自己添加对应的图案使用，文本属性也可以设置，同其他一样。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值