vue2使用echarts做中国地图

news/2024/4/24 7:20:57/文章来源:https://blog.csdn.net/weixin_49213878/article/details/129167476

如何在vue组件中引入中国地图

1、将echarts安装到vue中
1.1在组件中引入import *as echarts from ‘echarts’
1.2在组件中准备一个盒子(有宽高)用于放置地图

2、使用地图必须要china.js引入到组件里面
import ‘…/地图js/china.js’
2.1china.js到网上下载
百度网盘china.js

3、因为在组件里面,所以要在methods定义一个函数
,在这个函数里面
3.1 // 基于准备好的dom,初始化echarts实例
var myChart =echarts.init(document.getElementById(‘main’));
3.2 // 指定图表的配置项和数据
这里面的数据从echarts社区里面获取
3.3 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4.echarts社区有
4.1、PPChart
地址:http://ppchart.com/#/

4.2、DataInsight
地址:http://analysis.datains.cn/finance-admin/index.html#/chartLib/all

4.3、isqqw
地址:https://www.isqqw.com/

4.4、makeapie
地址:https://www.makeapie.cn/echarts

4.4、Chart.Top
地址: http://chart.365api.cn/#/

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

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

相关文章

文案女王彭芳如何转变为“百万发售系统”创始人?我们来探个究竟!

智多星老师 她的输出跟智多星老师几乎毫无二致,是抄袭还是纯属巧合呢? 你们问的这个问题我也想知道,为了了解真相,我让我的一个学生把那个叫“彭芳老师”的视频给我看,当看到她的简介时,我非常震惊&#…

Elasticsearch在Linux中的单节点部署和集群部署

目录一、Elasticsearch简介二、Linux单节点部署1、软件下载解压2、创建用户3、修改配置文件4、切换到刚刚创建的用户启动软件5、测试三、Linux集群配置1、拷贝文件2、修改配置文件3、分别修改文件所有者4、启动三个软件5、测试四、问题总结1、在elasticsearch启动时如果报错内存…

numpy的常见数据类型

常见数据类型介绍Python 原生的数据类型相对较少, bool、int、float、str等。这在不需要关心数据在计算机中表示的所有方式的应用中是方便的。然而,对于科学计算,通常需要更多的控制。为了加以区分 numpy 在这些类型名称末尾都加了“_”。类型…

ES mapping 详解

nested 类型??? _all _routing; ES-mapping Elasticsearch根据业务创建映射mapping结构分析:keyword和text(一)_elasticsearch keyword mapping_周全全的博客-CSDN博客 0.Mapping样例 {"mapping…

【MySQL进阶】 锁

😊😊作者简介😊😊 : 大家好,我是南瓜籽,一个在校大二学生,我将会持续分享Java相关知识。 🎉🎉个人主页🎉🎉 : 南瓜籽的主页…

[手把手教你]实现简单的登录跳转以及tab栏的动态渲染

需求:实现login登录页输入用户名和密码, 匹配失败显示提示信息, 成功则跳转到index主页index页面中各组件通过嵌套路由实现,点击一级菜单可以动态显示二级菜单1.使用vite搭建项目安装初始化npm init vuelatest选择配置进入项目目录,安装模块npm i, 启动项目npm run dev2.项目目…

S5P6818_系统篇(2)源码编译及烧录

源码获取 源码获取和操作流程 1.下载liunux下的系统制作脚本,可以烧录系统和构建镜像 git clone https://github.com/friendlyarm/sd-fuse_s5p6818.git 如果出现git错误可使用如下方法: git config --global http.sslverify false 2.阅读该工具rea…

软件测试5年,一路走来的艰辛路程

前言 不论你是什么时候开始接触测试这个行业的,你首先听说的应该是功能测试。通过一些测试手段来验证开发做出的代码是否符合产品的需求?当然你也有自己对功能测试的理解,但是最近两年感觉功能测试好像不太受欢迎,同时不少同学真的…

Linux 基础知识之文件系统

目录一、文件系统1.文件种类2.Linux和Windows文件后缀的不同3.查看文件类型3.绝对路径与相对路径二、系统分区三、目录结构一、文件系统 1.文件种类 Linux中一切皆文件。目光所及,皆是文件。文件的种类共有七种,每种文件都有自己的独特标识:…

SCADA-1-组态前期需求调研篇

近期有朋友找到我,说scada组态系统开源的很少,不少开发者借此售卖这种软件,我回了句:这有什么难的,不就是拖拖拽拽,再绑定上数据源,实现动态效果嘛。。。(先装了个X)一、…

【C++】类和对象入门必知

面向过程和面向对象的初步认识类的引入类的定义类的访问限定符封装类的作用域类的实例化类对象模型this指针C语言和C实现Stack的对比面向过程和面向对象的初步认识 C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解…

3717: yuyu学数数

描述yuyu开始学数数了,她要爸爸给他一些火柴棍,她要拼出很多数来。yuyu每次说要拼什么数字,爸爸就得想想要给她几根,好累啊,于是就只好写程序了。输入输入数据有多组,每组占一行,每行一个非负整…

版本控制软件SVN

SVN学习 1 版本控制软件定义及用途 版本控制软件是为适应软件配置管理的需要,控制软件的修改,减少混乱,提高软件生产效率,其是软件质量保证的重要环节软件配置管理是对软件修改进行标识、组织和控制的技术,用来协调和…

数据结构:循环队列的实现(leetcode622.设计循环队列)

目录 一.循环队列简单介绍 二.用静态数组实现循环队列 1.数组循环队列结构设计 2.数组循环队列的堆区内存申请接口 3.数据出队和入队的接口实现 4.其他操作接口 5.数组循环队列的实现代码总览 三.静态单向循环链表实现循环队列 1.链表循环队列的结构设计 2.创建静…

Linux服务:Nginx服务配置及相关模块

目录 一、Nginx配置文件 1、主配置文件解析 2、子配置文件启用 二、子配置文件使用 1、创建虚拟主机实验 2、基于端口虚拟主机实验 三、Nginx模块 1、access模块 2、自定义错误页面 3、状态页开启 一、Nginx配置文件 1、主配置文件解析 ①yum安装主配置文件位置&…

攻击者失手,自己杀死了僵尸网络 KmsdBot

此前,Akamai 的安全研究员披露了 KmsdBot 僵尸网络,该僵尸网络主要通过 SSH 爆破与弱口令进行传播。在对该僵尸网络的持续跟踪中,研究人员发现了一些有趣的事情。 C&C 控制 对恶意活动来说,最致命的就是夺取对 C&C 服务…

Anaconda环境配置

1.进入清华大学镜像网站Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror,下载稳定版Anaconda3-5.2.0,如下图。2.放到整理好的文件夹中,双击安装包进行安装。3.安装过程中需要改变的默认值如下&#xff…

【数据库】redis数据持久化

目录 数据持久化 一, RDB 1, 什么是RDB 2,持久化流程 3, 相关配置 案例演示: 4, 备份和恢复 1、备份 2、恢复 3,优势 4, 劣势 二,AOF 1,什么是A…

说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系

原生组件 fiber 原生组件 fiber,指的就是 type 为 “span”、“div” 的 fiber。 1.fiber.stateNode 指向真实 DOM 节点;2.node["__reactFiber$" randomKey] 指向对应 fiber,使用随机数是防止和业务代码的属性名冲突,…

Scala模式匹配详解(第八章:基本语法、模式守卫、模式匹配类型)(尚硅谷笔记)

模式匹配第 8 章 模式匹配8.1 基本语法8.2 模式守卫8.3 模式匹配类型8.3.1 匹配常量8.3.2 匹配类型8.3.3 匹配数组8.3.4 匹配列表8.3.5 匹配元组8.3.6 匹配对象及样例类8.4 变量声明中的模式匹配8.5 for 表达式中的模式匹配8.6 偏函数中的模式匹配(了解)第 8 章 模式匹配 Scal…