echart地图的小demo12.27

图形:

DataV.GeoAtlas地理小工具系列

点击以上链接进入--》

再点击箭头---》复制坐标到文件: 取名为 china.json中 (文件名自定义)  

<template><div class="map" ref="chartMap">地图</div>
</template>
<script>
import * as echarts from "echarts";
import chinaJSON from "./china.json";
export default {name: "",data() {return {data: [],};},methods: {drawChart() {// 注册地图echarts.registerMap("china", chinaJSON);let myChart = echarts.init(this.$refs.chartMap);myChart.setOption({backgroundColor: "#7E7667", //设置地图的背景颜色geo: [{type: "map",map: "china",roam: true, //地图是否可以拖拽移动,默认是不可以的zoom: 1.2, // 地图比例//地图的位置调试  距离容器上下左右的距离 有点类似内边距padding做挤压left: 150,top: 150,right: 150,bottom: 0,label: {show: true, //是否显示地图上的文字fontSize: 12, //文字大小color: "#fff", //文字颜色},itemStyle: {areaColor: "RGB(172,160,242,.2)", //地图每一个区块的颜色borderWidth: 2, //设置地图的外层边框宽度borderColor: "#F9CA3F", //设置地图的外层边框颜色shadowColor: "rgba(1,34,73,0.48)", //为地图设置阴影内容shadowBlur: 10,shadowOffsetX: -15,shadowOffsetY: 15,},emphasis: {label: {fontSize: 40, //高亮之后地图文字大小变化},itemStyle: {areaColor: "#F3511D", //高亮之后地图每一个区块的颜色},},},],series:[{type: 'lines',coordinateSystem: 'geo', //该系列使用的坐标系是地图z:99,//折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。zlevel: 2,//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。effect: {show: true,period: 2, //箭头指向速度,值越小速度越快delay:1,trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 10, //图标大小},lineStyle: {type: 'dotted', //线条样式color: 'rgba(79, 141, 245, 1)',width: 2, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: .3 //尾迹线条曲直度},data:[{coords: [[116.4551, 40.2539], [119.5313, 29.8773]]},{coords: [[117.29, 32.0581], [119.5313, 29.8773]]},{coords: [[114.3896, 30.6628], [119.5313, 29.8773]]},{coords: [[114.4995, 38.1006], [119.5313, 29.8773]]}]},]});},},created() {},mounted() {this.drawChart();},
};
</script><style lang="less" scoped>
.map {width: 100%;height: 100%;// background-color: aquamarine;
}
</style>

备注:里面的coords 是坐标

(简单地图小demo对我都是折磨,东找找西找找,第一次写地图,有点难)

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

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

相关文章

Python从入门到熟练

文章目录 Python 环境Python 语法与使用基础语法数据类型注释数据类型介绍字符串列表元组集合字典 类型转换标识符运算符算数运算符赋值运算符复合运算符 字符串字符串拼接字符串格式化 判断语句bool 类型语法if 语句if else 语句if elif else 语句 循环语句while循环for 循环r…

3D动态路障生成

3D动态路障生成 介绍设计实现1.路面创建2.空物体的创建3.Create.cs脚本创建 总结 介绍 上一篇文章介绍了Mathf.Lerp的底层实现原理&#xff0c;这里介绍一下跑酷类游戏的动态路障生成是如何实现的。 动态路障其实比较好生成&#xff0c;但是难点在哪里&#xff0c;如果都是平面…

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈

深入浅出图解C#堆与栈 C# HeapingVS Stacking第一节 理解堆与栈 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节 栈基本工作原理](https://mp.csdn.n…

SQL Server 索引和视图

CSDN 成就一亿技术人&#xff01; 难度指数&#xff1a;* * * CSDN 成就一亿技术人&#xff01; 目录 1.索引 什么是索引&#xff1f; 索引的作用&#xff1f; 索引的分类 1. 唯一索引 2. 主键索引 3. 聚集索引 4.非聚集索引 5.复合索引 6.全文搜索 索引的创建&am…

Linux系统——lv 逻辑卷

目录 一、概念 二、LVM的管理命令 三、新建逻辑卷 1、准备工作 2、创建物理卷 3、为卷组分配物理卷 4、从卷组创建逻辑卷 5、格式化逻辑卷&#xff0c;即确定文件系统的类型 6、挂载逻辑卷 四、扩容 1、相关命令 2、扩容根目录 一、概念 LVM 是 Logical Volume Man…

C语言之字符串处理

目录 字符串长度 显示字符串 数字字符的出现次数 大小写字符转换 字符串数组的参数传递 非字符串的字符数组 目前我们所学习到的是围绕字符串的处理&#xff0c;仅仅是生成字符串、读取并显示字符串&#xff0c;下面我学习更加灵活处理字符串的方式。 字符串长度 我们来看…

(12)Linux 常见的三种进程状态

&#x1f4ad; 前言&#xff1a;本章我们专门讲解进程的状态。我们先学习具体的 Linux 系统状态&#xff0c;再去介绍 OS 学科面对的概念如何理解 —— 运行态、终止态、阻塞态以及挂起态。 进程状态&#xff08;Process Status&#xff09; 什么是进程状态&#xff1f; 进程…

【node-express】实现省县市/区三级联动接口

省县市/区三级联动接口 介绍接口步骤代码部分 介绍 源码地址&#xff1a;https://github.com/thinkasany/nestjs-course-code/tree/master/demo/address 使用 navicat 导入sql文件&#xff0c;新增表&#xff0c;然后只需要一个接口 localhost:3001/region?parentId1, 不断的…

C++day2作业

把课上strcut的练习&#xff0c;尝试着改成class #include <iostream>using namespace std; class Stu { private:int age;string sex;int hign; public:int soce;void get_information();void set_information(); }; void Stu::set_information() {static Stu s1;cout …

案例195:基于微信小程序的购物商城系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

DDR3通信协议介绍篇

一.DDR3简介 DDR核心技术点就在于&#xff1a;(1)双沿传输。(2)预取prefetch. DDR的频率&#xff1a;(1)核心频率 (2)时钟频率 (3)数据传输频率&#xff1b;核心频率就是内存的工作频率&#xff1b;DDR1内存的核心频率是和时钟频率相同的&#xff0c;到了DDR2和DDR3时才有了时…

HTML 网页设计 简约风格 注册界面

成品如下 html <!DOCTYPE html> <html><head><meta charset"utf-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Science科幻注册界面</title><link href"…

uni-app uni.scss内置全局样式变量

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

【C语言】初识C语言

本章节主要目的是基本了解C语言的基础知识&#xff0c;对C语言有一个大概的认识。 什么是C语言 在日常生活中&#xff0c;语言就是一种人与人之间沟通的工具&#xff0c;像汉语&#xff0c;英语&#xff0c;法语……等。而人与计算机之间交流沟通的工具则被称为计算机语言&am…

.Net FrameWork总结

.Net FrameWork总结 介绍.Net公共语言运行库CLI的组成.NET Framework的主要组成.NET Framework的优点CLR在运行期管理程序的执行&#xff0c;包括以下内容CLR提供的服务FCL的组成 或 服务&#xff08;这个其实就是我们编码时常用到的类库&#xff09;&#xff1a;&#xff08;下…

[Angular] 笔记 12:模板驱动表单 - ngForm

Angular For Beginners - 16. Template Driven Forms (ngForm) Angular 以其表单模块而闻名。 Angular 有两种类型的表单&#xff1a; Template 以及 Reactive&#xff1a; Template 表单的特点&#xff1a;简单&#xff0c;神奇&#xff0c;一键点击。 Reactive 表单的特点&…

echarts中给图表X轴和Y轴加单位以及给tooltip(提示框)增加单位

左边没有单位&#xff0c;右图是增加单位的效果。 1.x轴y轴设置单位 增加单位不管是x轴还是y轴都可以设置name字段&#xff0c;设置完name后效果是红色箭头效果。如果想要蓝色箭头效果可以使用x轴y轴的都有的 axisLabel 属性里面有formatter配置项&#xff0c;formatter支持字…

绝缘电阻测试仪的读数方法有哪些?

绝缘电阻测试仪主要用于测量设备的绝缘电阻&#xff0c;电力工人经常使用它来测试电力设备&#xff0c;从来没有维护过电力设备的正常运行状态。在测试电力设备时&#xff0c;往往需要读取测试结果。绝缘电阻测试仪常用的读数方法有哪些&#xff1f;我一起来盘点一下。 常用的绝…

C语言—每日选择题—Day64

前言 两天没更新了&#xff0c;作者在复习期末考试&#xff0c;更新一波&#xff0c;祝大家都能顺利通过期末考试&#xff01;&#xff01;&#xff01; 指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博…

Python 爬取 哔站视频弹幕 并实现词云图可视化

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境介绍: python 3.8 解释器 pycharm 编辑器 第三方模块: requests >>> pip install requests protobuf >>> pip install protobuf 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命…