uni-app 微信小程序之加载行政区图

文章目录

  • 1. 实现效果
  • 2. 实现步骤

1. 实现效果

请添加图片描述

2. 实现步骤

  1. 使用三方组件 ucharts echarts 高性能跨全端图表组件
  2. 页面导入引入的三方组件
    在这里插入图片描述
  3. 组件demo代码
<template>
	<view class="qiun-columns">
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">行政区域图</text>
				<text class="text-ABC text-blue">District</text>
			</view>
		</view>

		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasMap" id="canvasMap" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchMap"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasMap" id="canvasMap" class="charts" @touchstart="touchMap"></canvas>
			<!--#endif-->
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/components/u-charts/checker.js';
	var _self;
	var canvaMap = null;

	export default {
		data() {
			return {
				city: '',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行,如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(750);
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.request({
					url: 'https://cdn.xxx.com/dataV.json',//替换为你组件的组件行政区域
					data: {},
					success: function(res) {
						let cMap = {
							series: []
						};
						cMap.series =res.data.features;
						console.log(res.data)
						_self.showMap("canvasMap", cMap);
					},
					fail: () => {
						_self.tips = "网络错误,小程序端请检查合法域名";
					},
				});
			},
			showMap(canvasId, chartData) {
				canvaMap = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'map',
					fontSize: 11,
					padding: [0, 0, 0, 0],
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: '#666666',
							fillOpacity: 0.6
						}
					}
				});
			},
			touchMap(e) {
				canvaMap.showToolTip(e, {
					format: function(item) {
						console.log(item.properties)
						_self.city = item.properties.name;
						return `这里是:${item.properties.name}`
					}
				});
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;

	}

	.charts {
		width: 750upx;
		height: 750upx;
		padding: 30rpx 0;
		background-color: #FFFFFF;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/224031.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

管理和监控CentOS上的HTTP服务

CentOS作为一款稳定的开源服务器操作系统&#xff0c;为各种网络服务提供了优秀的支持。其中&#xff0c;HTTP服务是互联网上最常用的服务之一&#xff0c;它为人们提供了便捷的信息访问和交互方式。在CentOS上管理和监控HTTP服务是一项重要的任务&#xff0c;下面我们将介绍一…

华为配置风暴控制示例

组网需求 如下图所示&#xff0c;SwitchA作为二层网络到三层路由器的衔接点&#xff0c;需要防止二层网络转发的广播、未知组播或未知单播报文产生广播风 配置思路 用如下的思路配置风暴控制。 通过在GE0/0/1接口视图下配置风暴控制功能&#xff0c;实现防止二层网络转发的…

轻快小miniconda3在linux下的安装配置-centos9stream-Miniconda3 Linux 64-bit

miniconda与anaconda的区别&#xff1a; Miniconda 和 Anaconda 是用于管理环境和安装软件包的 Python 发行版。它们之间的主要区别在于以下几点&#xff1a; 1. 安装内容和大小&#xff1a; Anaconda&#xff1a; Anaconda 是一个完整的 Python 数据科学平台&#xff0c;包含…

10-tornado项目部署

1. python3的安装和配置 1.1 安装系统依赖包 sudo dnf install wget yum-utils make gcc openssl-devel bzip2-devel libffi-devel zlib-devel -y1.2 下载Python wget https://www.python.org/ftp/python/3.9.5/Python-3.9.5.tgz1.3 解压 tar xzf Python-3.9.5.tgz 1.4 安装…

Java实现TCP一对一通信,UDP协议实现群聊

实现服务端对话框&#xff1a; 其中可自行更改对话框大小样式等配置。 package com.ex.controller;import javax.servlet.http.HttpServletRequest; import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.io.*; import java.net.*; public class …

Centos服务器上根据端口号查询jar包,根据jar包查端口号

在开发springboot服务器时&#xff0c;经常会遇到其他人部署的java服务&#xff0c;需要自己维护&#xff0c;留下的信息又非常少。经常面临找不到jar包位置&#xff0c;或者不知道占用端口&#xff0c;不知道启动命令的问题。这里记录一下常用的centos服务器上的命令&#xff…

【桑基图】绘制桑基图

绘制桑基图 一、绘制桑基图&#xff08;1&#xff09;方法一&#xff1a;去在线网站直接绘制&#xff08;2&#xff09;方法二&#xff1a;写html之后在vscode上运行 二、遇到的问题&#xff08;1&#xff09;当导入一些excel的时候&#xff0c;无法绘制出桑基图 一、绘制桑基图…

ROS-ROS通信机制-参数服务器

文章目录 一、基础理论知识二、C实现三、Python实现 一、基础理论知识 参数服务器在ROS中主要用于实现不同节点之间的数据共享。参数服务器相当于是独立于所有节点的一个公共容器&#xff0c;可以将数据存储在该容器中&#xff0c;被不同的节点调用&#xff0c;当然不同的节点…

【LeetCode刷题】-- 79.单词搜索

79.单词搜索 方法&#xff1a;使用回溯 使用dfs函数表示判断以网格的(i.j)位置出发&#xff0c;能否搜索到word(k)&#xff0c;其中word(k)表示字符串word从第k个字符开始的后缀子串&#xff0c;如果能搜索到&#xff0c;返回true,反之返回false 如果board[i][j]≠word[k]&am…

李宏毅gpt个人记录

参考&#xff1a; 李宏毅机器学习--self-supervised&#xff1a;BERT、GPT、Auto-encoder-CSDN博客 用无标注资料的任务训练完模型以后&#xff0c;它本身没有什么用&#xff0c;GPT 1只能够把一句话补完&#xff0c;可以把 Self-Supervised Learning 的 Model做微微的调整&am…

分享一个Python网络爬虫数据采集利器

前言 你是否曾为获取重要数据而感到困扰&#xff1f;是否因为数据封锁而无法获取所需信息&#xff1f;是否因为数据格式混乱而头疼&#xff1f;现在&#xff0c;所有这些问题都可以迎刃而解。让我为大家介绍一款强大的数据收集平台——亮数据Bright Data。 作为世界领先的数据…

【Qt】QLineEdit显示输入十六进制,位数不足时按照规则填充显示及每两个字符以空格填充

问题 在实际开发中&#xff0c;有时候需要对输入进行限制&#xff0c;一是更加合理&#xff0c;二是防止出现误操作。 比如&#xff1a; 使用Qt进行应用程序开发时&#xff0c;对单行编辑框QLineEdit控件&#xff0c;设置只可输入十六进制。 限制输入的方式常用且经典的是使用…

限流算法,基于go的gRPC 实现的

目录 一、单机限流 1、令牌桶算法 3、固定窗口限流算法 4、滑动窗口 二、集群限流 1、分布式固定窗口 &#xff08;基于redis&#xff09; 2、分布式滑动窗口 一、单机限流 1、令牌桶算法 令牌桶算法是当流量进入系统前需要获取令牌&#xff0c;没有令牌那么就要进行限…

Docker+jenkins+gitlab实现持续集成

1.安装环境 服务器ip虚拟机版本192.168.5.132centos7.6192.168.5.152centos7.6 2. 安装docker 安装必要的一些系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2添加软件源信息&#xff0c;要确保centos7能上外网 yum-config-manager --add-repo http:…

什么是数据清洗、特征工程、数据可视化、数据挖掘与建模?

1.1什么是数据清洗、特征工程、数据可视化、数据挖掘与建模&#xff1f; 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.1节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵…

智篆商业的电商运营课程:超越传统,引领未来

智篆商业一直以来都是电商运营课程领域的领军者&#xff0c;其成功之处在于超越传统&#xff0c;不断引领未来。探究智篆商业的成功之道&#xff0c;我们将发现其可信度和培训专业性是学员信赖的根本原因。 首先&#xff0c;智篆商业注重构建强大的导师团队。导师们不仅拥有丰富…

持续集成交付CICD:Jenkins使用GitLab共享库实现自动更新前后端项目质量配置

目录 一、实验 1.Jenkins使用GitLab共享库实现自动更新后端项目质量配置 2.Jenkins使用GitLab共享库实现自动更新前端项目质量配置 二、问题 1.Sonarqube如何添加自定义质量阈 一、实验 1.Jenkins使用GitLab共享库实现自动更新后端项目质量配置 (1)修改GitLab的Sonar.gr…

HBase-架构与设计

HBase架构与设计 一、背景二、HBase概述1.设计特点2.适用场景2.1 海量数据2.2 稀疏数据2.3 多版本数据2.4 半结构或者非结构化数据 三、数据模型1.RowKey2.Column Family3.TimeStamp 四、HBase架构图1.Client2.Zookeeper3.HMaster4.HRegionServer5.HRegion6.Store7.StoreFile8.…

flink使用事件时间时警惕kafka不同分区的事件时间倾斜问题

背景 flink和kafka的消息组合消费模式几乎是实时流处理的标配&#xff0c;然后当在flink中使用事件时间处理时&#xff0c;需要注意kafka不同分区元素之间时间相差太大的问题&#xff0c;这样有可能会导致严重的数据堆积问题 kafka不同分区元素事件时间差异较大导致的问题 总…

分布式光伏电站监控运维系统的简单介绍-安科瑞黄安南

摘要&#xff1a;设计了一套更高性价比&#xff0c;且容易操作的电站监控系统。该系统融合了互联网和物联网&#xff0c;并为光伏电数据的传输构建了相应的通道&#xff0c;可支持云存储等功能&#xff0c;同时也为用户提供了多元化的查询功能。 关键词&#xff1a;分布式太阳能…