echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
安装echarts
yarn add echarts
效果图:
获取任意省市县数据来源json格式
注意:
这里在请求在写地图数据的时候,我采用的是JQ。使用axios的话会出现错误信息;
废话不多说,看代码效果:
<template><div id="container"></div>
</template><script>
import echarts from "echarts";
import $ from "jquery";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {data() {return {};},mounted() {this.MapData();},methods: {MapData() {var myChart = echarts.init(document.getElementById("container"));$.get("https://geo.datav.aliyun.com/areas_v2/bound/110000_full.json",(result) => {console.log(result);echarts.registerMap("北京市", result);var option = {tooltip: {trigger: "item",},title: {text: "北京地图",x: "center",},geo: {map: "北京市",label: {},roam: true,itemStyle: {},},series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},symbolSize: function(val, params) {return 8;},data: [],},],};myChart.setOption(option);}).catch((err) => {console.log(err);});},},
};
</script><style>
#container {width: 100%;height: 100vh;margin: 0 auto;
}
</style>
把不同省份的市合并在一起
合并json文件链接
geojson使用介绍
echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]相关推荐
- echarts 绘制中国地图(中英文转换)
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
- 使用Echarts绘制geo地图(案例)
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据 链接: ...
- vue echarts绘制市级地图下钻(带注释)
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例 首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
- Echarts绘制各省地图
Echarts 绘制全国地图 近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...
- vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
- Vue环境下用ECharts绘制中国地图,并实现拖动、缩放与各省份自动轮播高亮显示
}, { name: "福建", value: 20, }, { name: "贵州", value: 74, }, { name: "广东" ...
- R语言绘制中国地图:着色省份、标注省份名称
今天分享一个可以直接使用的中国地图,相较于其他R语言绘制的地图,有以下优点: 1.包含十段线 http://xzqh.mca.gov.cn/map 2.标注省份名称 缺点:南海岛礁未绘制小地图 重点 ...
- vue3.0使用echarts完成中国地图以及各省份地图
在做数据页面的时候,很多时候需要地图来标注数据,但是怎样使用地图呢? 1,先安装echarts包 yarn add echarts 2,在main.js中引入 import echarts from ...
- 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
序 看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图 使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
最新文章
- 【原创】MyEclipse反编译添加jadclipse_3.3.0 曲折的完美解决
- Solr4.7从数据库导数据
- 非常好用的一些软件和网站
- php四种标量,php的标量数据类型和复合数据类型,php四种标量
- 高效实用Kafka-Kafka是什么
- poi之Excel下载之详细设置
- android 模拟器 锁屏,如何在模拟器中测试Android锁屏小部件?
- excel自动排班表_Excel教程:3秒搞定排班表模板
- 如何判断工作簿中是否存在某个工作表
- C#随机生成姓名、电话类
- mysql ansi sql标准_Mysql数据库隔离级别(ANSI SQL92规范,行锁,间隙锁)
- 蒙特卡罗(Monte Carlo)方法计算圆周率π
- excel中多列内容显示不全
- 网络安全风险与防范方法
- Upload上传@20210412
- 黑暗逃生服务器显示无,《黑暗逃生》常见问题解决方法 游戏进不去?
- python程序化 k线指定时间更新_Python项目Keylogger(定时器)
- 山洪灾害监测系统产品详细说明
- 理财知识心得记录-1
- AI算法工程师的笔记本环境配置
热门文章
- Go语言如何捕获fatal致命错误并输出到日志
- stackoverflow愚人节彩蛋效果
- RuntimeError: cuda runtime error (8) : invalid device function at /pytorch/torch/lib/THC/generic/THC
- 聊一聊28岁程序员被裁,我的思考和建议
- FileExistsError: [WinError 183] 当文件已存在时,无法创建该文件。: 'D:/tjn/tra
- 华理2019信号与系统考研模拟试题(含数字信号处理)
- Web应用——驾培管理系统之个人管理(作者:小圣)
- 网站带不带www真的不一样,很多新手不知道区别会被坑死的
- day05循环结构while循环嵌套控制条件语句方法(函数)
- 桌面图标注册表对应项