[ECharts] EChart地图应用在小程序中的几个坑

最新推荐文章于 2024-06-11 21:36:57 发布
最新推荐文章于 2024-06-11 21:36:57 发布
阅读量2.1k 收藏 2
点赞数
文章标签： EChart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cargelzhong/article/details/81285056
版权

将官网Demo

http://gallery.echartsjs.com/editor.html?c=xBJDR584vG

结合ECharts官方小程序移植到自己的微信小程序中，出现如下报错

明明onLoad()和onReady()都已经重写为空...

苦苦追寻半天，原来是【B】区域这个属性在作祟！具体原因不明，注释掉之后正常使用。

另外，地图中粉色Tag标记中的值使用了data中的默认下标，添加图中A部分代码将维度修改到需求中的维度。

↓ 最后结果图

_Henrik
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
ECharts 百度地图扩展插件bmap.min.js，可以在百度地图上展现 点图，线图，热力图 等可视化。
07-02
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。建议大家使用以百度地图为底图的形式，需要引入扩展插件bmap.min.js,扩展主要提供了跟 geo 一样的坐标系和底图的绘制
小程序中使用Echart
03-29
最近有几个小程序用到了图表，把我一顿折腾。所以来讲一下使用图表时所遇到的问题。 我们所用到的是 ECharts 的微信小程序版本 ;它提供了一个小程序原生的组件，然后我们只需要在相关页面引用改组件就好了。 使用...
微信小程序用echarts引入中国地图
weixin_43488223的博客
06-07 1071
下载 下载GitHub 上的 ecomfe/echarts-for-weixin 项目 链接: link. 导入 下载好后解压，打开微信开发者工具，新建一个项目，把刚刚下载的文件导入 注：建议最好新建一个项目根据自己的需要绘制，绘制好后直接复制粘贴进自己的项目就可以了 删除pages文件中不必要的页面 因为我只需要地图，所以我只留了map这一个文件 注：要在文件夹中删除，删除后要修改app.json中的页面配置 下载China.js，放在map文件中吧 已经忘了在哪儿下载的了，网上应该到处都是，搜搜
Echarts 绘制地图（中国、省市、区县），保姆级教程！
最新发布
码喽的自我修养
06-11 4200
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
记录echarts展示地图的坑
qq_38783557的博客
05-27 228
echarts展示地图问题
uniapp+Echarts微信小程序实现中国地图
帅的一批的博客
08-26 6940
参考文章链接: https://www.jianshu.com/p/5537e5053dc1 先在uni-app新建项目，然后在命令行管理中进入到该目录下，执行 然后安装依赖 将下载后的三个库从node_modules剪切到项目的根目录下。开始在项目中使用echarts。 替换最新的 mpvue-echarts 组件echarts.vue 。源码地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/
echart的学习：4.地图在微信小程序下的使用
胡世林的博客
02-14 3786
这个系列的博客没什么大的用处，因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件，而写博客总结下经验 由于echart在小程序的使用已经有demo了， 再为了他专门写一篇博客也是浪费时间，所以就写一篇在微信小程序中的使用，直接在原有demo上修改 接下来，对比下两者的格式（以江苏省为例子） 所以将其修改格式，就变成了： 代码：（只修改了徐州市，其他的不变） ...
微信小程序版echart
03-22
微信小程序版ECharts是专为在微信小程序环境中高效、轻量级使用ECharts图表库而设计的解决方案。在开发微信小程序时，资源加载速度和应用体积是关键因素，因为这直接影响到用户体验。ECharts作为一款功能强大的数据...
微信小程序里绘制Echart的一些问题
03-29
基于本人所用框架是wepy,最近在微信小程序里需要绘制一些echarts图表，搜索很多都是原生代码集成，总之也是费了一番功夫，记录一下实践过程： 1.将echarts.js 和 wx-canvas.js 集成到项目里； 2.在page页中引入上述...
echarts-中国地图json文件
10-13
中国地图JSON文件的结构通常包含以下几个部分： 1. **地区编码**：每个行政区划都有一个唯一的编码，如“310000”代表上海市。这些编码与ECharts的`series`中的`name`属性匹配，用于关联地图上的区域与数据。 2. *...
基于mpvue小程序使用echarts画折线图的方法示例
12-04
在本文中，我们将深入探讨如何在基于mpvue的小程序中使用ECharts绘制折线图。首先，我们需要了解mpvue和ECharts的基本概念。 **mpvue** 是一个基于Vue.js的微信小程序开发框架，它允许开发者使用Vue的语法和思想来...
用Echarts请求百度地图api 小案例
小羽向前跑
02-07 1500
最终效果： 1.接收用户输入地点 2.点击查询 3.中国地图出现 4.用户输入的地点用圆点标记出来 5.并且右上角可以下载成图片 结构： 一层结构：my-demo文件夹 二层结构：map文件夹、bootstrap.css、china.js、echarts.min.js、jquery.min.js map.html所有代码： <!DOCTYPE html> ...
小程序EChart
c1173419450的博客
06-28 1972
可以与后台数据交互 一、正常流程（抄Echart官方的） 1、index.json 配置如下： { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 2、index.wxml 中，创建了一个 组件，内容如下： <ec-canvas id="mycha...
小程序使用echarts（超详细教程）
Hero_rong的博客
11-02 1778
小程序使用echarts第一步就是先引用到小程序里面，可以直接从文件很多，我们值下载 ec-canvas 就好，下载完成后，直接放在pages同级目录下。
小程序使用echarts和echarts配置项总结（全网最简单详细）
林靖焙的博客
06-22 6045
全网最简单详细的小程序使用echarts教程，干货满满！
微信小程序+echart
CheryW的博客
06-14 1879
微信小程序加载echart地图
微信小程序中使用echarts
热门推荐
ColdCoder的博客
09-16 2万+
体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载gitHub项目。 其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版
echarts 画中国地图
weixin_51666715的博客
04-25 2821
数据可视化平台，中国各省数据和坐标 阿里云可视化 效果 使用echart画中国地图，步骤如下 1.安装依赖 npm i echarts 创建一个js文件 当你可以访问https请求的时候则使用，如下代码 import axios from "axios"; export default axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json") 如果无法请求https接口，则直接导入 3。配置option配
小程序echarts地图放大缩小
04-18
在小程序中使用echarts地图进行放大缩小操作，可以通过以下步骤实现： 1. 引入echarts库：在小程序的页面中引入echarts库，可以通过npm安装或者直接引入CDN链接。 2. 创建canvas：在小程序的wxml文件中创建一个canvas标签，并设置宽高和id属性。 3. 获取canvas实例：在小程序的js文件中，通过wx.createCanvasContext方法获取canvas的上下文对象。 4. 初始化echarts：使用echarts.init方法初始化echarts实例，并将canvas的上下文对象传入。 5. 设置地图配置：通过echarts.setOption方法设置地图的配置项，包括地图类型、数据等。 6. 监听手势事件：通过canvas的touchstart、touchmove、touchend事件监听用户的手势操作。 7. 处理手势事件：根据用户手势的变化，调用echarts实例的setOption方法更新地图的缩放比例。 下面是一个示例代码： ```javascript // wxml文件 <canvas id="map" style="width: 100%; height: 100%;"></canvas> // js文件 const echarts = require('echarts'); Page({ onLoad: function () { const ctx = wx.createCanvasContext('map'); const chart = echarts.init(ctx); // 设置地图配置 const option = { // 地图配置项 }; chart.setOption(option); // 监听手势事件 let touchStartDistance = 0; let touchMoveDistance = 0; let scale = 1; let lastScale = 1; wx.onTouchStart((e) => { if (e.touches.length === 2) { touchStartDistance = this.getDistance(e.touches); } }); wx.onTouchMove((e) => { if (e.touches.length === 2) { touchMoveDistance = this.getDistance(e.touches); scale = touchMoveDistance / touchStartDistance * lastScale; chart.setOption({ geo: { zoom: scale } }); } }); wx.onTouchEnd(() => { lastScale = scale; }); }, // 计算两个触摸点之间的距离 getDistance(touches) { const x1 = touches.clientX; const y1 = touches.clientY; const x2 = touches.clientX; const y2 = touches.clientY; return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } }); ``` 这样就可以在小程序中使用echarts地图进行放大缩小操作了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值