echarts中国省份地图加城市定位（打点）
2024-06-10 16:35:46
效果图：
Html代码
<template><div id="chinamap" :style="{width: '100%', height: '800px'}"></div>
</template>下载JSON文件
地图选择器
Vue页面引入json文件
import chinaFull from './chinaFull.json'注：你们在使用的时候，要把省份名称写全，比如：广东省，不要只写广东。
因为我的json是改动过了，我把"自治区" 、"市" 或 "省"给去掉了，所以我可以直接写广东而不用加“省”字。
完整代码
methods: {createChinaMap() {this.$echarts.registerMap('china', chinaFull);let myChart = this.$echarts.init(document.getElementById("chinamap"));// 地图默认中心let defaultCenter = [ 117.283042, 31.86119 ]// 仓库列表（定位）let warehouseList = [{name:"北京", value: [116.352963,40.409079], quantity: 159.5, unit: '吨'},{name:"上海", value: [121.463615,31.195908], quantity: 85.5, unit: '吨'},{name:"武汉", value: [114.311582,30.598467], quantity: 55.5, unit: '吨'},{name:"郑州", value: [113.631419,34.753439], quantity: 12.5, unit: '吨'},{name:"深圳", value: [114.064552,22.548457], quantity: 13.4, unit: '吨'},{name:"柳州", value: [109.434422,24.331961], quantity: 568.2, unit: '吨'},{name:"河池", value: [108.084407,24.692636], quantity: 876.2, unit: '吨'},{name:"来宾", value: [109.231766,23.745056], quantity: 133.2, unit: '吨'},{name:"梧州", value: [111.276157,23.507642], quantity: 235.2, unit: '吨'},]// 需要高亮的省let highlightAreaList = ["广西","广东","湖北","河南","上海", "北京"]// 标题let title = '仓库分布图'let option = {myChart: myChart,warehouseList: warehouseList,highlightAreaList: highlightAreaList,title: title,defaultCenter: defaultCenter}this.setOption(option)},/*** option = {* myChart: echarts对象 必须* warehouseList: 仓库信息* highlightAreaList： 需要高亮的省* center： 地图初始中心* }*/setOption(option) {option.highlightAreaObjList = this.buildHighlightAreaObjList(option.highlightAreaList)option.myChart.setOption({title: {text: option.title,// subtext: '',// 副标题// sublink: '' // 不标题连接},tooltip: {trigger: 'item',formatter: function(params) {if(Array.isArray(option.highlightAreaList) && option.highlightAreaList.indexOf(params.name) != -1 ) {return params.name + "<br>xxx仓库 159.3吨<br>xxx仓库 59.1吨"} else {return params.name}},},// 右边内置工具toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {show: false,},geo: {// 指定区域设置样式和regions: option.highlightAreaObjList ,center: option.center,map: 'china', silent: false, itemStyle: {color: '#eee', //地图颜色 borderColor: 'rgb(0, 0, 0)',// 边框颜色borderWidth : 1},label:{color: "rgb(0,0,0)", //文字颜色show: true,formatter: function(params) {return params.name},rich: {}},zoom : 1.6, //缩放roam: true, //鼠标可拖动、缩放},series: [{symbolSize: function (data) {return Math.sqrt(data[2]) / 5e2;},emphasis: {show: false,focus: 'item',itemStyle:{color: 'rgb(252, 1, 26)'}},tooltip:{formatter: function(params) {return params.name + " " + params.data.quantity + params.data.unit}},type: 'scatter',coordinateSystem: 'geo',symbolSize: 15,symbol: 'image://data:image/png;base64,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',// symbolRotate: 35,label: {show:true,normal: {formatter: function(params) {return params.name // return params.name + " " + params.data.quantity + params.data.unit},position: 'right',show: true}},data: option.warehouseList},]})},buildHighlightAreaObjList(highlightAreaList) {let objList = []if(Array.isArray(highlightAreaList)) {highlightAreaList.forEach(item => {objList.push({name: item,itemStyle: {color: 'red',areaColor: 'rgb(255, 223, 51)'}})})}return objList}}echarts中国省份地图加城市定位（打点）相关推荐
- vue中使用echarts实现中国地图加城市定位功能
首先这个是承接上个博客中创建的china.json,并在main.js的注册一下. initCityDataPic () {let obj = darkthis.$echarts.registerTh ...
- echarts中国地图3D各个城市标点demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
- Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
- 中国省份城市 数据表
-- phpMyAdmin SQL Dump -- version 2.11.5-rc1 -- http://www.phpmyadmin.net -- -- 主机: localhost -- 生成日 ...
- HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
- 中国省份城市级联选择--JavaScript
原文地址为: 中国省份城市级联选择--JavaScript 前一段做了一个小程序居然都用到列表框选择城市,一直都是在里面直接编辑项,这样没做一次都要写那么多的城市名,真是让人有崩溃的冲动,网上也有很多 ...
- echarts中国地图使省份选择性滑动或点击高亮
本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选.并且对省份进行选择性交互. 首先我们需要一个颜色集合,代表我们要设置多少种颜色.这里用到了dataRange. dataRange: ...
- uniapp、hbuilderx做微信小程序，获取当前城市定位（省份国家街道等）
获取用户当前位置分为3步 1.获取位置用户请求权限 2.获取经纬度 3.经纬度转换为城市 一.获取位置用户请求权限 获取权限的目的主要是因为避免转换不了城市的报错(可能出现不提示"需要先请求 ...
- echarts地图省份按顺序依次高亮demo(源码)
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/1 ...
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
最新文章
- 《中国人工智能学会通讯》——7.4 语义组合
- python twisted教程_python-twisted模块代码实例
- linux 编译内核几个常见问题解决方法
- 【TensorFlow-windows】扩展层之STN
- 《Hadoop海量数据处理：技术详解与项目实战（第2版）》一2.8 小结
- 刷题总结——art2（ssoj）
- java List转Map的三种方法（java8语法特性使用）
- 低代码工具让人人都是程序员？别再吐槽了，它能做这些事
- 进入32位保护模式之路
- c语言实现《学生管理系统》
- DB2数据库编目及连接
- 手把手教你配置国内镜像源
- Python高级配色 RGB
- 学而时习之语言篇: 我工作这么多年, 为什么不能准确读 “音标“ ?
- linux安装mysql菜鸟教程_[新手教程]Linux环境部署MYSQL过程
- JVM调优总结（4）-调优方法
- 台式计算机无线网卡,台式机无线网卡怎么选 台式机无线网卡选购指南
- Java项目：基于java+ssm生鲜超市进销存管理系统--计算机毕业设计
- 《死亡诗社》影评（作业）
- C语言编程 5.7 从键盘中输入一个英文字母，如果它是大写则转化为小写。如果它是小写则转化为大写，并将其ASCll码显示到屏幕上。