微信小程序 - eCharts- 展示中国地图
2024-05-20 06:17:59
GitHub Demo 地址:
jh-weapp-demo实现一些常用效果、封装通用组件和工具类
小程序码
效果图：
js 代码：
import * as echarts from '../../../ec-canvas/echarts';
import geoJson from '../../../ec-canvas/mapData.js';const app = getApp();
let myChart1 = null;
let myChart2 = null;Page({/*** 页面的初始数据*/data: {ec1: {lazyLoad: true},ec2: {lazyLoad: true},},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: 'eCharts- 中国地图'})this.requestData()},requestData() {var mapDataArr = [{name: "北京",value: this.randomData(),// selected: true},{name: "天津",value: this.randomData(),},{name: "上海",value: this.randomData(),},{name: "重庆",value: this.randomData(),},{name: "河北",value: this.randomData(),},{name: "河南",value: this.randomData(),},{name: "云南",value: this.randomData(),},{name: "辽宁",value: this.randomData(),},{name: "黑龙江",value: this.randomData(),},{name: "湖南",value: this.randomData(),},{name: "安徽",value: this.randomData(),},{name: "山东",value: this.randomData(),},{name: "新疆",value: this.randomData(),},{name: "江苏",value: this.randomData(),},{name: "浙江",value: this.randomData(),},{name: "江西",value: this.randomData(),},{name: "湖北",value: this.randomData(),},{name: "广西",value: this.randomData(),},{name: "甘肃",value: this.randomData(),},{name: "山西",value: this.randomData(),},{name: "内蒙古",value: this.randomData(),},{name: "陕西",value: this.randomData(),},{name: "吉林",value: this.randomData(),},{name: "福建",value: this.randomData(),},{name: "贵州",value: this.randomData(),},{name: "广东",value: this.randomData(),},{name: "青海",value: this.randomData(),},{name: "西藏",value: this.randomData(),},{name: "四川",value: this.randomData(),},{name: "宁夏",value: this.randomData(),},{name: "海南",value: this.randomData(),},{name: "台湾",value: this.randomData(),},{name: "香港",value: this.randomData(),},{name: "澳门",value: this.randomData(),},{name: '南海诸岛',value: this.randomData(),}];this.init_echarts1(mapDataArr)// this.init_echarts2(chartData)},/*** 生成1000以内的随机数*/randomData() {return this.createRandomNumber(0, 10000)},createRandomNumber(begin, end) {var num = Math.round(Math.random() * (end - begin) + begin);return num;},//中国地图init_echarts1: function (chartData) {this.chart1Componnet = this.selectComponent('#mychart1');this.chart1Componnet.init((canvas, width, height, dpr) => {myChart1 = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});echarts.registerMap('china', geoJson); // 绘制中国地图myChart1.setOption(this.getChart1Option(chartData));return myChart1;});},//横柱状图init_echarts2: function (chartData) {this.chart2Componnet = this.selectComponent('#mychart2');this.chart2Componnet.init((canvas, width, height, dpr) => {myChart2 = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});myChart2.setOption(this.getChart2Option(chartData));return myChart2;});},getChart1Option: function (chartData) {var option = {tooltip: {trigger: 'item',formatter: function (e) {// console.log(e)var name = e.name ? e.name : '获取中';var value = e.value ? e.value : '暂无数据'return `${name}:\n人数(万人):${value} `}},// 地理坐标系组件geo: [{type: "map", //图表类型mapType: 'china',roam: false, // 可以缩放和平移aspectScale: 0.8, // 比例layoutCenter: ["50%", "43%"], // position位置layoutSize: 340, // 地图大小，保证了不超过 370x370 的区域label: {// 图形上的文本标签normal: {show: true,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}},emphasis: { // 高亮时样式color: "#333"}},itemStyle: {// 图形上的地图区域normal: {borderColor: "rgba(0,0,0,0.2)",areaColor: "#005dff"},emphasis: {areaColor: "#38BC9D", //鼠标选择区域颜色areaColor: 'red',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},}}],//图例visualMap: {type: "piecewise", //类型为分段型。splitNumber: 5, //对于连续型数据，自动平均切分成几段。默认为5段。 连续数据的范围需要 max 和 min 来指定。pieces: [{min: 8000,label: ">8000",// color: "#FF0000",//里面可以加颜色}, // 不指定 max，表示 max 为无限大（Infinity）。{min: 6000,max: 7999,label: "6000-7999"},{min: 4000,max: 5999,label: "4000-5999"},{min: 2000,max: 3999,label: "2000-3999"},{min: 1,max: 1999,label: "1-1999"}, // 表示 value 等于 123 的情况。// {// value: 0,// label: "0"// } // 不指定 min，表示 min 为无限大（-Infinity）。],textStyle: {fontSize: 8},realtime: false,calculable: false,inRange: {color: ['lightskyblue', 'yellow', 'orangered'],},orient: "horizontal",bottom: 10,left: 10,right: 10,itemHeight: 10,itemWidth: 8,},//图例// visualMap: {// min: 0,// max: 10000,// left: 'left',// top: 'bottom',// itemWidth: 19,// itemHeight: 60,// text: ['高', '低'], // 文本，默认为数值文本// calculable: true,// // inRange: {// // color: ['#0055A4', '#007ADE', '#0085EF', '#0D91F9', '#62ADFB']// // },// },//工具条toolbox: {show: false,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},series: [{name: '报名人数',type: 'map', //图表类型mapType: 'china',// selectedMode: 'multiple',label: {normal: {show: true,fontSize: 8,},emphasis: {show: true}},itemStyle: {normal: {borderColor: '#38BC9D',areaColor: '#fff',},emphasis: {areaColor: '#38BC9D',borderWidth: 0}},data: chartData}]};return option},})
json 代码：
{"usingComponents": {"ec-canvas":"../../../ec-canvas/ec-canvas"}
}
wxml 代码：
<view class="chartBg"><ec-canvas id="mychart1" canvas-id="mychart1" ec="{{ ec1 }}"></ec-canvas><!-- <ec-canvas id="mychart2" canvas-id="mychart2" ec="{{ ec2 }}"></ec-canvas> -->
</view>wxss 代码：
.chartBg {width: 100%;
}ec-canvas {margin-top: 5px;width: 100%;height: 40%;background-color: white;
}#mychart1 {width: 100%;height: 600rpx;margin-left: 0%;margin-right: 0%;display: block;
}
#mychart2 {width: 100%;height: 400rpx;margin-left: 0%;margin-right: 0%;display: block;
}微信小程序 - eCharts- 展示中国地图相关推荐
- 微信小程序+Echarts实现中国地图
一.版本说明 微信开发者工具: v1.02.1911180 二.下载文件 2.1.在微信小程序中使用 ECharts 官方地址,参考这里: 小程序+Echarts 的官方Demo 源码参考这里 2.2 ...
- 微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图 官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
- 微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
- 微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
- 腾讯小程序 java编写_微信小程序 使用腾讯地图SDK详解及实现步骤
微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
- echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 1 ...
- 微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划 申请key 下载sdk 实现代码 遇到的问题 申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
- 微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
- 【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数 效果图 0 小程序开发背景 前段时间在上学校的软件开发与实践B课程 因为赶上了工大百年 ...
- 微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍 网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了 微信小程序中接入使用腾讯地图插件详细教程,并提供了 基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
最新文章
- html页面在微信分享php,详解html静态页面实现微信分享思路的示例代码分析
- Github 上 36 个最实用的 Vue 开源库
- 国一B题方案解析：轴距仅210mm的四旋翼有多稳？
- 797B. Odd sum
- 怎么让PHP网页显示时有表格的效果,html的table用法(让网页的视觉效果显示出来)...
- 强悍的 vim 实用功能
- ***编程DIY (Delphi版) - 第2篇 单实例运行
- ubuntu 20.04 设定固定IP地址碰到的坑
- class_view_decorate
- grub引导项修复详解_grub2修复引导 · LINCHUAN的小站
- GOOGLE搜索秘籍--高级搜索：site，link，inurl，allinurl，intitle，allintitle
- 淘宝taobao.com步3721后尘晋升新网骚
- zapya_快牙(com.dewmobile.kuaiya) - 5.9.7 (CN) - 应用 - 酷安网
- Cuckoo Sandbox
- oschina使用方法
- CFA一级学习笔记--权益（二）--头寸与杠杆
- 求两个数的平均值（三种方法）
- C++实现Kingdomrush小游戏
- 2022 ICPC 南京站
- matlab三维矩阵变换，交换维度，交换两行