echarts绘制完整的中国地图
2024-05-14 06:25:28
echarts完整的中国地图
- 效果图
- html部分
- js部分
效果图
html部分
给一个盒子 必须给宽高<template><div class="home" style="width:100vw;height:100vh;"><div style="width: 100%;height: 90%" ref="main"></div></div>
</template>
js部分
1. 获取json数据
2. 获取地理位置的坐标
3. 获取每个省区的名称
const chinaJson = require("@/assets/map/data-1528971808162-BkOXf61WX.json");//获取中国地图的json数据mounted() {// 另外发现的一个小tip，当注册中国地图用的不是’china’,是其他字符串，例如’CHINA’的时候，南海诸岛的会消失，这个可以当做一个工具，也可以当做一个重点用// 初始化echarts实例// this.chinachart = this.$echarts.init(this.$refs.main);let mychinachart = this.$echarts.init(this.$refs.main);this.$echarts.registerMap("china", chinaJson);var geoCoordMap = {台湾: [121.5135, 25.0308],黑龙江: [127.9688, 45.368],内蒙古: [110.3467, 41.4899],吉林: [125.8154, 44.2584],北京: [116.4551, 40.2539],辽宁: [123.1238, 42.1216],河北: [114.4995, 38.1006],天津: [117.4219, 39.4189],山西: [112.3352, 37.9413],陕西: [109.1162, 34.2004],甘肃: [103.5901, 36.3043],宁夏: [106.3586, 38.1775],青海: [101.4038, 36.8207],新疆: [87.9236, 43.5883],西藏: [91.11, 29.97],四川: [103.9526, 30.7617],重庆: [108.384366, 30.439702],山东: [117.1582, 36.8701],河南: [113.4668, 34.6234],江苏: [118.8062, 31.9208],安徽: [117.29, 32.0581],湖北: [114.3896, 30.6628],浙江: [119.5313, 29.8773],福建: [119.4543, 25.9222],江西: [116.0046, 28.6633],湖南: [113.0823, 28.2568],贵州: [106.6992, 26.7682],云南: [102.9199, 25.4663],广东: [113.12244, 23.009505],广西: [108.479, 23.1152],海南: [110.3893, 19.8516],上海: [121.4648, 31.2891],};var data = [{ name: "北京", value: 199 },{ name: "天津", value: 42 },{ name: "河北", value: 102 },{ name: "山西", value: 81 },{ name: "内蒙古", value: 47 },{ name: "辽宁", value: 67 },{ name: "吉林", value: 82 },{ name: "黑龙江", value: 666 },{ name: "上海", value: 24 },{ name: "江苏", value: 92 },{ name: "浙江", value: 114 },{ name: "安徽", value: 456 },{ name: "福建", value: 116 },{ name: "江西", value: 91 },{ name: "山东", value: 119 },{ name: "河南", value: 137 },{ name: "湖北", value: 116 },{ name: "湖南", value: 114 },{ name: "重庆", value: 91 },{ name: "四川", value: 125 },{ name: "贵州", value: 62 },{ name: "云南", value: 83 },{ name: "西藏", value: 9 },{ name: "陕西", value: 80 },{ name: "甘肃", value: 56 },{ name: "青海", value: 10 },{ name: "宁夏", value: 18 },{ name: "新疆", value: 180 },{ name: "广东", value: 123 },{ name: "广西", value: 59 },{ name: "海南", value: 1 },{ name: "台湾", value: 1 },];var convertData = function(data) {console.log(data);var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}console.log(res);return res;};const option = {// backgroundColor: {// type: "linear",// x: 0,// y: 0,// x2: 1,// y2: 1,// // colorStops: [// // {// // offset: 0,// // color: "#0f378f", // 0% 处的颜色// // },// // {// // offset: 1,// // color: "#00091a", // 100% 处的颜色// // },// // ],// globalCoord: false, // 缺省为 false// },title: {top: 20,text: "中国地图",subtext: "",x: "center",textStyle: {color: "#ccc",},},tooltip: {//提示框trigger: "item",backgroundColor: "rgb(0,0,0,.6)",show: true,// formatter: `<ul style="display:flex; width:300px;height:150px;">// <li style="width:50%;"><img style="width:130px;height:130px;" src="https://p0.meituan.net/business/3d776dc442d68d33f18fa64625d0ce1f949469.png" alt="图片加载失败"></li>// <li style="width:50%;"> 12355</li>// </ul>`,formatter: function(params) {console.log(params);if (typeof params.value[2] === "undefined") {return `<ul style="display:flex; width:300px;height:150px;"><li style="width:50%;"><img style="width:130px;height:130px;" src="https://p0.meituan.net/business/3d776dc442d68d33f18fa64625d0ce1f949469.png" alt="图片加载失败"></li><li style="width:50%;">${params.name} : ${params.value}</li></ul>`;} else {return `<ul style="display:flex; width:300px;height:150px;"><li style="width:50%;"><img style="width:130px;height:130px;" src="https://p0.meituan.net/business/3d776dc442d68d33f18fa64625d0ce1f949469.png" alt="图片加载失败"></li><li style="width:50%;">${params.name} : ${params.value[2]}</li></ul>`;}},},legend: {orient: "vertical",y: "bottom",x: "center",data: ["pm2.5"],textStyle: {color: "#fff",},},visualMap: {show: false,min: 0,max: 500,left: "left",top: "bottom",text: ["高", "低"], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {},},geo: {map: "china",show: true,roam: true,// label: {// normal: {// show: false,// },// emphasis: {// show: false,// },// },itemStyle: {normal: {areaColor: "#3a7fd5",borderColor: "#0a53e9", // 线shadowColor: "#092f8f", // 外发光shadowBlur: 20,},emphasis: {// 也是选中样式borderWidth: 2,borderColor: "#fff",areaColor: "#cdb418", //悬浮区背景// label: {// show: true,// textStyle: {// color: "#fff",// },// },},},},series: [{symbolSize: 5,label: {normal: {formatter: "{b}",position: "center",show: true,},emphasis: {show: true,},},itemStyle: {normal: {color: "#fff",},},name: "light",type: "scatter",coordinateSystem: "geo",data: convertData(data),},{type: "map",map: "china",geoIndex: 0,aspectScale: 0.75, // 长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false,},emphasis: {show: false,textStyle: {color: "#fff",},},},roam: true,itemStyle: {normal: {areaColor: "#031525",borderColor: "#FFFFFF",},emphasis: {areaColor: "#2B91B7",},},animation: false,data: data,},{name: "Top 5",type: "scatter",coordinateSystem: "geo",// symbol: "pin",// symbol:"image://http://110.40.201.242:8088/img/ic4.b10d6906.png",// 自定图标点图标//base64方式symbol:"image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGlQTFRFAC1HIEA+n4obz6YN/8MAj4EfYGUs77kEoIsakIIf37AJPzAAr4YAn3kAb1UAQDEAAAAAIBkAMCUAf2EAHxgAv5IA36oAz54AgGIAYEkADwwALyQA77YAEAwAX0kAj20A4LAJ0KcN8LoESf7p1AAAAPhJREFUeJzNk8FygzAMRO3iEhJjEBFgAm6S9v8/sitDgcyk7qWd6R5kzD5JNoyUUvolM0+VvWoF5YfntuiQIz/hg9CqSPnGHNUpDWQq7RvzfwBbzotDqOpVbgFcTY3sz1hAWV7U8gJ0srMUXwLgWI37+UkAL+kNSawE4AGiS78C/VbBCWDt2Fqa/AZIRk0S3dyC2FC3a2GhliTGFsbD3QPdVmGIAI/mAXBInYhGKSFAeONHACrP05WGEL8Wew44+O6aJe5oAwpTfQFQD4ua29qCveQGV6FFZb90Db/4N/8WuKf9958HRyf9D4xvnvJzGW9dfHOOe4H8TwI2HczD/MFKAAAAAElFTkSuQmCC",symbolSize: [30, 30],label: {normal: {show: true,textStyle: {color: "#fff",fontSize: 9,},// formatter(value) {// return value.data.value[2];// },formatter() {return "";},},},itemStyle: {normal: {// color: "red", // 标志颜色},},data: convertData(data),showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: true,zlevel: 1,},],};// this.chinachart.setOption(option);mychinachart.setOption(option);this.setinter = setInterval(() => {if (this.showTooltip == 10) {this.showTooltip = 0;} else {this.showTooltip = ++this.showTooltip;}mychinachart.dispatchAction({//默认打开提示框type: "showTip",seriesIndex: 0, // 显示第几个seriesdataIndex: this.showTooltip + 1, // 显示第几个数据});// mychinachart.dispatchAction({// //默认选中板块// type: "highlight",// seriesIndex: 1, // 显示第几个series// dataIndex: this.showTooltip + 1,// }); // dataIndex：默认选中项索引值// mychinachart.dispatchAction({// //取消选中板块// type: "downplay",// seriesIndex: 1,// dataIndex: this.showTooltip,// });}, 5000);},echarts绘制完整的中国地图相关推荐
- 【ECharts学习】—实现中国地图
[ECharts学习]-实现中国地图 使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取 点我跳转到百度网盘 提取码:clby <!DOCT ...
- 在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）
今天来复盘一下,如何使用Echarts绘制单个省份的地图,昨天在网上搜了很多教程,代码大差不差,但是运行的时候总出不来,经过自己的琢磨,里面也有很多需要注意的点,今天就以自身的问题来针对几个问题说一下 ...
- echarts最新版做中国地图（详细版+避雷版）
谨以此篇献 给那些在 用echarts做中国地图 很懊恼的程序媛(员) 真的不想让你们在走弯路 节省时间去刷刷抖音他不香吗?? 1.在echarts的官网上 根据命令安装 npm install ec ...
- 使用eCharts做了一个中国地图的各地之间的线路连接
1.具体代码路径 https://gallery.echartsjs.com/editor.html?c=x8DKVD1v2&v=4 2.js文件 https://download.csdn. ...
- 解决如何整理出乡镇级的地图json，以此使用echarts绘制出乡镇级的地图数据（国家级、省级、市级的地图信息也可以获取）
前言 最近接了一个林州的项目,需要用到林州的地图,地图上要显示林州市各个乡镇的地理范围,我也是在百度地图和高德地图上弄了半天,发现不行,最多显示到县级市的地图,没有乡镇级的地图,最后查阅了好多资料,才 ...
- 使用Echarts完成对中国地图的绘制
目录 前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结 前言 我们在使用代码绘画地图的时候通常 ...
- Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言 根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
- Vue + Echarts 实现中国地图多级钻取功能
传送门:本文完整代码地址 如果觉得有帮助,别忘了点亮 star 哦 说明: 本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能(基本版 未做过多功能拓展和样式优化 便于二次开 ...
- echarts引入中国地图并且下探到省
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.首先就是项目中引入地图包. 二.代码如下 1.项目中首先要引入json中国地图 2.免费地图数据 总结 前言 例如 ...
最新文章
- ply补全为立方体_ply 点云文件格式
- 分布式协调组件ZooKeeper的技术理论剖析-综合组件环境实战
- 浅谈权限管理的设计与实现
- EF Core 2.0使用MsSql/Mysql实现DB First和Code First
- Android面试题总结加强版（二）
- 数据结构---简单插入排序
- 08-开运算和闭运算
- Qt之QThread用法
- 实习成长之路——设计模式三：组合与继承有啥关系？为什么说多用组合少用继承？如何选择使用哪种方式？
- 啊哈C语言答案,啊哈c语言开头的题，哪位大佬来试试？
- 在win10系统上使用HiTool工具网口烧写Hi3516DV300开发板【踩坑总结：网络环境有限制】
- editplus破解源码
- Android Canvas.DrawLine绘制线段
- QMC解码-某音乐解码
- MAC出现:未能正确打开SANGFOR SSL Virtual网卡，暂时不能提供SSL CS服务，请联系管理员
- 电子工程师是怎样的成长之路？
- Android 安装的app
- AVR中C语言while语言,AVR单片机汇编语言程序实例
- 让3个线程打印ABC
- 坐标系标定与位姿估计（旋转矩阵）