Echarts 实现 西藏自治区地图
2024-07-02 08:48:48
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>西藏地图</title><!-- 引入 Bootstrap 文件 --><script src="js/bootstrap.min.js"></script><!-- cdn 引入 JQuery 文件 --><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- 引入 ECharts 文件 --><script src="js/echarts.min.js"></script><!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style>body {margin: 0;}.map_title {width: 1125px;height: 50px;line-height: 50px;}.map_title div:first-child {float: left;margin-left: 350px;font-size: 20px;color: #01479D;font-weight: bold;}.map_title div:nth-child(2) {float: right;margin-right: 15px;}.map_title div select {width: 120px;height: 30px;}.map_title div select:hover {background-color: #01479D;color: #fff;}.map_title div select option {background-color: '#fff';}</style>
</head><body><div class="tibet"><div class="map_title"><div>投资项目在线审批监管平台申报项目概览</div><div><select id="mnu-area" name="area"><option value="540000">西藏</option><option value="540100">拉萨市</option><option value="540200">日喀则市</option><option value="540300">昌都市</option><option value="540400">林芝市</option><option value="542200">山南地区</option><option value="542400">那曲地区</option><option value="542500">阿里地区</option></select><select id="mnu-year" name="year"><option value="all">全部</option><option value="2020" selected="">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option></select></div></div><div id="xizang_map" style="width: 1125px;height: 450px;"></div><!-- <img src="./json/tibet.json"></img> --></div><script>var xizang_map = echarts.init(document.getElementById('xizang_map'));// 引入地图数据// var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/540000_full.json";var uploadedDataURL = "./json/tibet.json";// 请求返回的数据var mapData = [{ name: '拉萨市', value: 219 },{ name: '日喀则市', value: 339 },{ name: '昌都市', value: 312 },{ name: '林芝市', value: 329 },{ name: '山南市', value: 89 },{ name: '那曲市', value: 189 },{ name: '阿里地区', value: 109 }];var COLORS = ["#003167", "#0050a3", "#005fca", "#077fff", "#3fbcff", "#77d0ff"];// 解析地图数据包$.getJSON(uploadedDataURL, function (geoJson) {echarts.registerMap('tibet', geoJson);var option = {// backgroundColor: '#fff',// title: {// text: '',// top: 20,// x: 'center',// textStyle: {// color: '#ccc'// }// },tooltip: {trigger: 'item',formatter: function (params) {return params.name + '<br/>' + '项目数:' + Math.ceil(Math.random() * 500) + '个' + '<br/>' + '总投资:' + Math.ceil(Math.random() * 200) + '亿元';},textStyle: {color: '#fff'},},// 视觉映射组件【展示效果类似于图例】visualMap: {// top bottom left right 组件离容器之间的距离type: 'piecewise',left: 50,bottom: 30,splitList: [{min: 1000,color: COLORS[0],label: '1000个以上'},{min: 301,max: 1000,color: COLORS[1],label: '301-1000个'},{min: 101,max: 300,color: COLORS[2],label: '101-300个'},{min: 21,max: 100,color: COLORS[3],label: '21-100个'},{min: 6,max: 20,color: COLORS[4],label: '6-20个'},{max: 5,color: COLORS[5],label: '5个或以下'}],},geo: {roam: true, // 是否开启鼠标缩放// zoom: 1.5,// 当前视角的缩放比例// aspectScale: 0.75, // 地图的长宽比},series: {type: 'map',map: 'tibet',label: {show: true,color: '#d87a80',fontSize: 12,},emphasis: {label: {color: '#fff'},itemStyle: {areaColor: '#fe9756',borderWidth: 0,}},data: mapData}};xizang_map.setOption(option);});</script>
</body></html>
难点:那曲市 文本标签位置显示 可以在 地区json中添加 “cp”:[88.7,32.5] 自己设置标签的显示位置
Echarts 实现 西藏自治区地图相关推荐
- spring结合Echarts实现中国地图大区、省、市、区/县的穿透
ECHARTS实现区域.省份.市.区县的数据穿透 前言 一.Echarts是什么? 二.实现效果 1.初始化地图展示 2.钻取 三.实现步骤 1.引入JS库 2.初始化HTML标签.存放Echarts ...
- Winform Echarts 显示百度地图的用法（3）
1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时 将WebBrow ...
- 【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
- eCharts二三维地图总结
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 最近多个项目中的登录页面陆续提出了不少地图需求,主要围绕地图的 ...
- 湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
- echarts实现中国地图和各省市地图
echarts实现中国地图 我会把china.js和各省市的js以及json上传资源,有需要的可以下载 首先引入echarts.js和china.js <!DOCTYPE html> &l ...
- Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
- echarts配合google地图，并自定义google地图的样式
前言 全网关于google地图配合echarts的使用找了很久,其实echarts结合百度地图使用会更方便一些.公司因为想要更国际化,所以更倾向于使用google地图 准备工作 要想使用google地 ...
- echarts使用百度地图
前情提要 获得百度地图授权的ak密钥 引入echarts的百度地图 准备好echarts百度地图需要的数据 自定义百度地图的样式 去掉百度地图的logo 一.获取百度地图的ak密钥 首先得注册成为百度 ...
最新文章
- java 连接池实例_功能完善的Java连接池调用实例
- 监控GoldenGate进程
- 后来，我再没被任何建筑类考试难倒过
- MOSS Farm Architecture
- Java 算法 入学考试
- linux中ifort不识别,pmemd编译安装问题之ifort不识别‘
- 深度剖析 | 基于大数据架构的BI应用
- 企业如何降低应用安全风险？
- hidden symbol `pthread_atfork'
- Matlab DIP(瓦)ch5图像复原练习
- Mac笔记本安装maven
- TortoiseGit配置SSH key
- 手机拍照反差对焦、相位对焦和激光对焦系统解析
- VMbox 安装 LInux系统流程
- 今日新闻快讯摘要十条
- saltstack常用操作（七）---beacons模块的使用
- 使用安全模式启动计算机,老司机教你电脑安全模式启动方法
- 如何保证数据在传输过程中的安全
- wifi搜索不到连接不上的问题(企业局域网wifi)
- Effective C++条款09：绝不在构造和析构过程中调用virtual函数