热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用EchartsforWeixin小程序实现中国地图及区域点击事件

本文介绍了如何使用EchartsforWeixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。

使用Echarts for Weixin 小程序实现中国地图及区域点击事件

1. 效果展示

本文使用了Echarts for Weixin作为绘图框架,具体API文档请参见官方文档

2. 条件准备

1. 从GitHub下载echarts-for-weixin项目。技术分享图片

  1. ec-canvas组件全部导入到你的小程序中,并将其作为组件引用。技术分享图片
  2. 在需要使用该组件的页面中注册该组件。show.json
    {
      "component": true,
      "usingComponents": {
          "ec-canvas": "../../../ec-canvas/ec-canvas"
      }
    }
    show.wxml
    
     
    
    show.wxss
    .box {
        width:100%;
        height:100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    } 
    #mychart-dom-map {
    position: relative;
    width: 100%;
    padding-top: 20rpx;
    height: 720rpx;
    }

3. 逻辑实现

3.1 引入地图数据

地图数据是绘制地图的关键,可以使用JSON或JS格式导入,小程序中使用JS更为方便。代码较长,托管在Gitee data.js

3.2 组件初始化

通过pageInstance绑定页面内事件,进行锚定。show.js

import * as echarts from '../../../ec-canvas/echarts.js';
import geoJson from 'data.js';
let chart = null;
let dataList = [{ name: 'china' }];
let pageInstance = {}

// 初始化数据
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart); // 容器初始化
  echarts.registerMap('china', geoJson); // 地图数据注册
  var option = {
    tooltip: {
      triggerOn: 'click',
      formatter: function (e, t, n) {
        pageInstance.BindEvent(e);
        return e.name
      }
    }, // 点击响应事件
    geo: {
      map: 'china',
      roam: false,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 120,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: '#f2d5ad',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      }
    }, // 地图颜色等配置
    series: [{
      name: '来源信息',
      type: 'map',
      geoIndex: 0,
      data: dataList
    }] // 对应点击事件响应
  };
  chart.setOption(option); // 返回初始化结果
  return chart;
}

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {},
  data: {
    ec: {
      onInit: initChart
    }
  },
  lifetimes: {
    created: function () {
      pageInstance = this;
    }
  },
  methods: {
    BindEvent(e) {
      // 点击事件锚定
      // e.name 是省份,可以在该事件内实现所需操作
    }
  }
})


推荐阅读
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • MATLAB实现n条线段交点计算
    本文介绍了一种通过逐对比较线段来求解交点的简单算法。此外,还提到了一种基于排序的方法,但该方法较为复杂,尚未完全理解。文中详细描述了如何根据线段端点求交点,并判断交点是否在线段上。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • 以下实例展示了locals( ... [详细]
author-avatar
蜃海
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有