echarts 绘制力导向地图
2024-04-22 06:42:49
引入地图
import china from 'echarts/map/js/china'配置项
var geoCoordMap = {'上海': [121, 30],'江苏': [118.78, 32.04],'东莞': [113.8953, 22.901],'东营': [118.7073, 37.5513],'中山': [113.4229, 22.478],'临汾': [111.4783, 36.1615],'临沂': [118.3118, 35.2936],'丹东': [124.541, 40.4242],'丽水': [119.5642, 28.1854],'乌鲁木齐': [87.9236, 43.5883],'佛山': [112.8955, 23.1097],'保定': [115.0488, 39.0948],'兰州': [103.5901, 36.3043],'包头': [110.3467, 41.4899],'北京': [116.4551, 40.2539],'北海': [109.314, 21.6211],'南京': [118.8062, 31.9208],'南宁': [108.479, 23.1152],'南昌': [116.0046, 28.6633],'南通': [121.1023, 32.1625],'厦门': [118.1689, 24.6478],'台州': [121.1353, 28.6688],'合肥': [117.29, 32.0581],'呼和浩特': [111.4124, 40.4901],'咸阳': [108.4131, 34.8706],'哈尔滨': [127.9688, 45.368],'唐山': [118.4766, 39.6826],'嘉兴': [120.9155, 30.6354],'大同': [113.7854, 39.8035],'大连': [122.2229, 39.4409],'天津': [117.4219, 39.4189],'太原': [112.3352, 37.9413],'威海': [121.9482, 37.1393],'宁波': [121.5967, 29.6466],'宝鸡': [107.1826, 34.3433],'宿迁': [118.5535, 33.7775],'常州': [119.4543, 31.5582],'广州': [113.5107, 23.2196],'廊坊': [116.521, 39.0509],'延安': [109.1052, 36.4252],'张家口': [115.1477, 40.8527],'徐州': [117.5208, 34.3268],'德州': [116.6858, 37.2107],'惠州': [114.6204, 23.1647],'成都': [103.9526, 30.7617],'扬州': [119.4653, 32.8162],'承德': [117.5757, 41.4075],'拉萨': [91.1865, 30.1465],'无锡': [120.3442, 31.5527],'日照': [119.2786, 35.5023],'昆明': [102.9199, 25.4663],'杭州': [119.5313, 29.8773],'枣庄': [117.323, 34.8926],'柳州': [109.3799, 24.9774],'株洲': [113.5327, 27.0319],'武汉': [114.3896, 30.6628],'汕头': [117.1692, 23.3405],'江门': [112.6318, 22.1484],'沈阳': [123.1238, 42.1216],'沧州': [116.8286, 38.2104],'河源': [114.917, 23.9722],'泉州': [118.3228, 25.1147],'泰安': [117.0264, 36.0516],'泰州': [120.0586, 32.5525],'济南': [117.1582, 36.8701],'济宁': [116.8286, 35.3375],'海口': [110.3893, 19.8516],'淄博': [118.0371, 36.6064],'淮安': [118.927, 33.4039],'深圳': [114.5435, 22.5439],'清远': [112.9175, 24.3292],'温州': [120.498, 27.8119],'渭南': [109.7864, 35.0299],'湖州': [119.8608, 30.7782],'湘潭': [112.5439, 27.7075],'滨州': [117.8174, 37.4963],'潍坊': [119.0918, 36.524],'烟台': [120.7397, 37.5128],'玉溪': [101.9312, 23.8898],'珠海': [113.7305, 22.1155],'盐城': [120.2234, 33.5577],'盘锦': [121.9482, 41.0449],'石家庄': [114.4995, 38.1006],'福州': [119.4543, 25.9222],'秦皇岛': [119.2126, 40.0232],'绍兴': [120.564, 29.7565],'聊城': [115.9167, 36.4032],'肇庆': [112.1265, 23.5822],'舟山': [122.2559, 30.2234],'苏州': [120.6519, 31.3989],'莱芜': [117.6526, 36.2714],'菏泽': [115.6201, 35.2057],'营口': [122.4316, 40.4297],'葫芦岛': [120.1575, 40.578],'衡水': [115.8838, 37.7161],'衢州': [118.6853, 28.8666],'西宁': [101.4038, 36.8207],'西安': [109.1162, 34.2004],'贵阳': [106.6992, 26.7682],'连云港': [119.1248, 34.552],'邢台': [114.8071, 37.2821],'邯郸': [114.4775, 36.535],'郑州': [113.4668, 34.6234],'鄂尔多斯': [108.9734, 39.2487],'重庆': [107.7539, 30.1904],'金华': [120.0037, 29.1028],'铜川': [109.0393, 35.1947],'银川': [106.3586, 38.1775],'镇江': [119.4763, 31.9702],'长春': [125.8154, 44.2584],'拉萨': [113.0823, 28.2568],'安徽': [117.27, 31.86],'天津': [117.2, 39.13],'河南': [113.65, 34.76],'河北': [114.48, 38.03],'辽宁': [123.38, 41.8],'内蒙古自治区': [111.65, 40.82],'广东': [113.23, 23.16],'陕西': [108.95, 34.27],'山东': [117, 36.65],'广西': [108.33, 22.84],'海南': [110.35, 20.02],'福建': [119.3, 26.08],'江西': [115.89, 28.68],'吉林': [125.35, 43.88],'甘肃': [103.73, 36.03],'黑龙江': [126.63, 45.75],'四川': [104.06, 30.67],'西藏': [91.11, 29.97],'湖北': [114.31, 30.52],'湖南': [113, 28.21],'宁夏': [106.27, 38.47],'山西': [112.53, 37.87]};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord]});}}return res;};var BJData = [[{name: '上海'}, {name: '杭州',value: 3003}],[{name: '上海'}, {name: '宁波',value: 116}],[{name: '上海'}, {name: '唐山',value: 65}],[{name: '上海'}, {name: '北京',value: 65}],[{name: '上海'}, {name: '武汉',value: 63}],[{name: '上海'}, {name: '苏州',value: 53}],[{name: '上海'}, {name: '绍兴',value: 51}],[{name: '上海'}, {name: '天津',value: 44}],[{name: '上海'}, {name: '秦皇岛',value: 42}],[{name: '上海'}, {name: '厦门',value: 42}],[{name: '上海'}, {name: '无锡',value: 42}],[{name: '上海'}, {name: '南京',value: 25}]];var color = ['#307dc9', '#71dab6', '#71dab6'];var bj_map_series = [];[['上海', BJData]].forEach(function (item, i) {bj_map_series.push({name: item[0],type: 'lines',zlevel: 1,label: {normal: {show: true,}},effect: {show: true,period: 6,trailLength: 0.7,color: '#fff',symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: convertData(item[1])}, {name: item[0],type: 'lines',zlevel: 2,label: {normal: {show: true,formatter: function (e) {return e.data.toName}}},symbol: ['none', 'arrow'],symbolSize: 10,lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])}, {// name: item[0] ,type: 'map',// coordinateSystem: 'geo',zlevel: 2,geoIndex: 0,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function (val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function (dataItem) {return {name: dataItem[1].name,value: dataItem[1].value};})});});let mapChina = this.$echarts.init(document.getElementById('mapChina'))// 绘制图表mapChina.setOption({tooltip: {trigger: 'item'},geo: {map: 'china',roam: true,itemStyle: {normal: {areaColor: '#2b3132',borderColor: '#191a1b'},emphasis: {areaColor: '#000'}}},series: bj_map_series});效果图
echarts 绘制力导向地图相关推荐
- 用Echarts画力导向图，节点文字随鼠标缩放而缩放
项目场景: 用Echarts画力导向图,节点文字随鼠标缩放而缩放 解决方案: 用原生函数getZr()或_zr()实现,例子如下: this.nodes=[],//节点数据 this.links=[] ...
- echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
- D3 v3版本绘制力导向图更新节点时JS控制台报错 ：Error: circle attribute cx: Expected length, NaN解决办法
D3的v3版本,很古老了. 拿来绘制力导向图,画布初始化的代码如下: //代码不完整,仅作演示以说明问题 //节点数组var nodes = [ { name: "sssss" , ...
- VUE echarts绘制省级/市级地图自动轮循tooltip
效果图 绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
- echarts 绘制县级市地图 数据可视化
背景: 上头给了我一个使用兰溪市地图进行相关的数据可视化任务,我自然想到了以前用过的echarts,但使用过发现他自带的能实现的只到地级市(例如金华市),而县级市的区划暂时没法实现. 本文以兰溪市(县 ...
- 利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果 简介D ...
- react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...
- vue中用echarts 绘制geo 中国地图
前言 由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
- Echarts 绘制单独省份地图
1. 文档介绍 采用node端http-server作为服务端,引用第三方插件Echarts 2.阅读对象 本篇文章要求开发者熟悉 HTML.JavaScript.CSS.Echarts.Nodejs ...
最新文章
- React是如何在后台运行的
- python程序的输入输出（acm的几个小程序）
- spring的aop注解配置(了解)
- verilog入门笔记
- netflix的准实验面临的主要挑战
- 第六节：用audio标签打造一个属于自己的HTML5音乐播放器
- 刚出道的黑客搞瘫美国输油管道！他们还边搞钱边捐款
- 构建线性表的c语言代码,数据结构严蔚敏C语言版—线性表顺序存储结构（顺序表）C语言实现相关代码...
- Android——倒计时跳转+sharedpreferences
- JAVA Cannot find class [×××] for bean with name ‘×ב defined in class path resource [×××] 问题解决方法
- java后台如何国际化,Java SpringMVC实现国际化整合案例分析（i18n）
- 如何用一款小工具大大加速MySQL SQL语句优化(附源码)
- Autodesk 3DSMax 2012 安装说明
- PPT绘图之AI助力论文图
- 【遥感科学】第三章 遥感成像原理
- 07-图6 旅游规划
- c语言中int和void,关于指针：void(*)void和int(*)int在C中的含义是什么？
- java 基础库_Java基础类库
- rx6600xt显卡相当于什么显卡
- JavaScript-深浅拷贝
热门文章
- 802.1q协议 VLAN的三种接口特性（Access、Trunk、Hybrid）简要分析
- 苹果再次确立其移动王者地位
- 北京大学计算机学院保研机试,北京大学软件与微电子学院计算机技术(专业学位)保研细则...
- 微信为什么打不开html,微信打不开怎么回事_手机微信打不开怎么办【图文】-太平洋电脑网PConline-太平洋电脑网...
- 不能bostype没有元数据异常_金蝶EAS_BOS工作笔记
- 【海岛吉他8】如何记住吉他指板？
- 数字化如何助力品牌发展，高端茶品牌竹叶青告诉你
- Google Earth Engine(GEE)——User memory limit exceeded（2）
- R语言swirl教程（R Programming）11——vapply and tapply
- BUCK型开关电源中的损耗与效率的计算