vue项目引入中国地图

news2024/9/28 3:22:42

先安装有china.js的版本

npm install echarts@4.8 --save  //以前的版本有china.js


<template>
  <div class="mapMain">
      <div id="map" style="width: 30vw; height: 30vw;" />
  </div>
</template>

<script>

//引入文件
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import 'echarts/map/js/china.js'


//中国地图区域
export default {
  name:'ditumap',
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 基于准备好的dom,初始化echarts实例
      let chinaMap = echarts.init(document.getElementById("map"));// 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data:[
              {name:'新疆', selected:true}
            ]
          }
        ]
      })
    },
  }
}
</script>

 


实现效果如上,


main.js需要先引入echarts


import * as Echarts from 'echarts'  //引入echarts

 


 package.json也需要引入对应的依赖(使用命令行下载会自动导入,)


 


到这里就已经实现可用了,希望可以帮助到各位小伙伴


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AIGC 实践——七鱼客服机器人业务指标波动分析

智能客服机器人的业务指标&#xff0c;最常见的就是解决率&#xff0c;解决率的高低直接关系到客户采购机器人的价值。解决率很高&#xff0c;客户可以省下很多成本开销&#xff0c;如果解决率很低&#xff0c;那么就没有必要采购这个客服机器人。所以&#xff0c;智能客服机器…

电机应用开发-直流有刷电机电流环控制实现

目录 直流有刷电机电流环控制实现 硬件设计 直流电机电流环控制-位置式PID实现 编程要点 配置ADC可读取电流值 配置基本定时器6产生定时中断读取当前电路中驱动电机的电流值并执行PID运算 配置定时器1输出PWM控制电机 ADC数据处理 编写位置式PID算法 直流电机电流环控…

jquery实现:多个输入框字数统计示例

一、实现效果&#xff1a; 二、代码实现&#xff1a; 每个输入框添加了相同的类名 inputField 并且每个输入框旁边的字数统计使用相同的类名 charCount。 然后使用 jQuery 的类选择器 $(‘.inputField’) 来选中所有具有该类名的输入框&#xff0c;并为它们绑定了 input 事件。…

【学历是敲门砖】如果你想有个好的起点,不妨冲一冲计算机考研,这本书将会助你一臂之力

目录 计算机考研难点 《计算机考研精炼1000题》揭秘问答 1. 为什么是1000题&#xff1f; 2. 有什么优势&#xff1f; 3. 编写团队水平如何&#xff1f; 4. 题目及解析品质如何&#xff1f;可以试读吗&#xff1f; 购买链接 高质量的学习提升圈子 京东热卖下单链接&…

本地MinIO存储服务通过Java程序结合Cpolar内网穿透进行远程访问

[本地MinIO存储服务通过Java程序结合Cpolar内网穿透进行远程访问] 前言 MinIO是一款高性能、分布式的对象存储系统&#xff0c;它可以100%的运行在标准硬件上&#xff0c;即X86等低成本机器也能够很好的运行MinIO。它的优点包括高性能、高可用性、易于部署和管理、支持多租户…

C++中在一个cpp文件中引用另外一个cpp文件的方法

C中在一个cpp文件中引用另外一个cpp文件 可以通过导入cpp文件或者.h文件来实现&#xff0c; 类似python中的import 导入 下面距离说明下 创建1个func1.cpp 内容如下&#xff1a; #include<iostream> using namespace std;int sum (int num1, int num2) {return (num1…

Nginx反向代理实现负载均衡+Keepalive实现高可用

目录 实现负载均衡 实现高可用 实现负载均衡 Nginx的几种负载均衡算法&#xff1a; 1.轮询&#xff08;默认&#xff09; 每个请求按照时间顺序逐一分配到下游的服务节点&#xff0c;如果其中某一节点故障&#xff0c;nginx 会自动剔除故障系统使用户使用不受影响。 2.权重…

珠江啤酒坚持创新,“酿”造电子化采购平台

珠江啤酒 广州珠江啤酒股份有限公司&#xff08;简称“珠江啤酒”&#xff09;是一家以啤酒酿造产业和啤酒文化产业“双主业”协同发展、包装产业配套发展的大型现代化国有控股企业。2010年&#xff0c;在深交所上市&#xff0c;下属企业16家&#xff0c;其中啤酒企业12家&…

UE5 UI教程学习笔记

参考资料&#xff1a;https://item.taobao.com/item.htm?spma21n57.1.0.0.2b4f523cAV5i43&id716635137219&ns1&abbucket15#detail 基础工程&#xff1a;https://download.csdn.net/download/qq_17523181/88559312 1. 介绍 工程素材 2. 创建Widget UE5 UI系统的…

C语言运算符详解

详细介绍了C语言表达式、算术运算符、赋值运算符、关系运算符、条件结构、逻辑运算符、位运算符的语法和使用方法&#xff0c;并讨论了运算符的优先级。 1、表达式与算术运算符 在C语言中&#xff0c;表达式是一个类似数学中的算式&#xff0c;表达式由变量、字面值、常量、运…

前端开发工具集合

文章目录 Visual Studio Code (VS Code)安装及配置一、安装二、常用插件三、相关配置四、统一配置代码 Visual Studio Code (VS Code)安装及配置 一、安装 下载地址&#xff1a;https://code.visualstudio.com/ ?> VS Code 下载慢&#xff0c;解决办法请点击 双击下载文件…

@JsonCreator和@JsonValue

文章目录 1、正常反序列化的过程2、JsonCreator3、JsonValue4、应用&#xff1a;枚举类中校验传参以及优化前后端数据交互5、补充&#xff1a;ConstructorProperties 1、正常反序列化的过程 反序列化时&#xff0c;默认会调用实体类的无参构造来实例化一个对象&#xff0c;然后…

二叉树题目:具有所有最深结点的最小子树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;具有所有最深结点的最小子树 出处&#xff1a;865. 具有所有最深结点的最小子树 难度 5 级 题目描述 要求 给定…

web前端开发基础------外边距折叠现象

引言 在设置样式时&#xff0c;需要遵循先整体再细节&#xff0c;先通用样式再特殊样式的顺序进行设置 一&#xff0c;什么是外边距折叠现象呢&#xff1f; 外边距折叠 定义&#xff1a; 外边距折叠是指相邻的两个或者多个外边距&#xff08;margin&#xff09;在垂直方向会合并…

分布式锁之基于mysql实现分布式锁(四)

不管是jvm锁还是mysql锁&#xff0c;为了保证线程的并发安全&#xff0c;都提供了悲观独占排他锁。所以独占排他也是分布式锁的基本要求。 可以利用唯一键索引不能重复插入的特点实现。设计表如下&#xff1a; CREATE TABLE tb_lock (id bigint(20) NOT NULL AUTO_INCREMENT,…

最小二乘线性回归

​ 线性回归&#xff08;linear regression&#xff09;&#xff1a;试图学得一个线性模型以尽可能准确地预测实际值的输出。 以一个例子来说明线性回归&#xff0c;假设银行贷款会根据 年龄 和 工资 来评估可放款的额度。即&#xff1a; ​ 数据&#xff1a;工资和年龄&…

企业必看的大数据安全极速传输解决方案

在这个大数据时代&#xff0c;企业在享受大数据带来的便利同时&#xff0c;也面临着巨大的挑战&#xff0c;其中最主要的问题就是数据安全方面和传输方面&#xff0c;为了更好地满足企业大数据传输的需求&#xff0c;小编将深入分析企业对于大数据传输面临的挑战和风险以及大数…

[PTQ]均匀量化和非均匀量化

均匀量化和非均匀量化 基本概念 量化出发点&#xff1a;使用整型数据类型代替浮点数据&#xff0c;从而节省存储空间同时加快推理速度。量化基本形式 均匀量化&#xff1a;浮点线性映射到定点整型上&#xff0c;可以根据scale/offset完成量化/反量化操作。非均匀量化 PowersO…

containerd Snapshots功能解析

containerd Snapshots功能解析 snapshot是containerd的一个核心功能&#xff0c;用于创建和管理容器的文件系统。 本篇containerd版本为v1.7.9。 本文以 ctr i pull命令为例&#xff0c;分析containerd的snapshot “创建” 相关的功能。 ctr命令 ctr image相关命令的实现在cmd…

OpenAI“宫斗”新进展!Sam Altman将重返OpenAI担任首席执行官 董事会成员改动

在经过激烈的五天讨论和辩论之后&#xff0c;高调人工智能初创公司OpenAI宣布&#xff0c;其联合创始人之一Sam Altman将回归担任首席执行官。这一决定是对上周Altman突然被解雇的回应&#xff0c;该决定引起了极大的关注和讨论。 OpenAI表示&#xff0c;他们已经达成了与Altm…