【Echarts】绘制世界地图和中国省份

文章目录

部分代码
截图
地图经纬度资源下载

部分代码

# 参数设置
lineOptions: {backgroundColor: 'transparent',title: {text: this.title,left: 'center',top: "5",textStyle: {color: '#333',fontSize: '20'}},geo: {map: 'worldAndChina', // china/worldcenter: [xxx,xxxx], // 视角中心点，经纬度zoom: 5, // 当前视角缩放比例, china:1；world:3,roam: true,silent: true,top: "top",label: {normal: {show: true,}},itemStyle: {normal: {areaColor: '#ACBDEF99',borderColor: '#fff'},emphasis: {areaColor: '#ACBDEF',}},},grid: {containLabel: true,left: "10",right: "10%",bottom: "10"},toolbox: {feature: {restore: {icon:"path://M744.825185 959.604364c99.432617-180.095751 116.152417-454.878025-274.385231-445.671339l0 221.86404L134.765845 400.102491 470.439954 64.394612l0 217.134319C938.120562 269.358751 990.225267 694.347025 744.825185 959.604364L744.825185 959.604364 744.825185 959.604364zM744.825185 959.604364"},saveAsImage: {},}},tooltip: {triggerOn: 'mousemove',confine: true, // 是否限制在图表区域extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",backgroundColor: "#dde4ed",padding: 10,textStyle: {color: "#000"},position:"right",},series: []
},

## 渲染绘制
let echartsBox = document.getElementById("echartsMap");
let myChart = window.echarts.init(echartsBox);myChart.showLoading({text: "数据加载中 请稍后...",textStyle: {fontSize: 20}});metricData= [{name: el,value: el.prop_lon_lat, // 此处为经纬度
}]
// 填充数据
let echartsOptions = this.lineOptions
echartsOptions.series.push({type: 'effectScatter',name: 'test',coordinateSystem: 'geo',symbol: "circle", // 标记的图形symbolSize: 7,showEffectOn: 'render',data: metricData,itemStyle: {color: "#00a65a",},
}),myChart.clear();
this.$nextTick(() => {myChart.setOption(echartsOptions, true);this.pointClick(myChart);// 监听地图缩放事件，// 由于缩小地图的时候，地图文字存在堆在一起的情况，故判断zoom，控制label的展示和消失// 该部分参考：https://juejin.im/post/5dca2e5b5188255719075f64myChart.on('georoam', (params) => {//获取最新的option配制const { center, zoom } = myChart.getOption().geo[0];echartsOptions.geo.zoom = zoom;echartsOptions.geo.center = center;if(zoom<3 && this.mapIsLarge){echartsOptions.geo.label.normal.show = false;myChart.setOption(echartsOptions, true);this.mapIsLarge = false;}else if(zoom>=3 && !this.mapIsLarge){echartsOptions.geo.label.normal.show = true;myChart.setOption(echartsOptions, true);this.mapIsLarge = true;}});
});

截图

地图经纬度资源下载

【Echarts】绘制世界地图和中国省份相关推荐

Vue3.x使用Echarts绘制世界地图并进行定点
Vue3.x使用Echarts绘制世界地图并进行定点一.需求绘制世界地图并根据返回经纬度数据进行定点将定点数据展示在世界地图内二.解决绘制世界地图,利用Echarts图表组件时间,需要世界地 ...
Echart系列 | 绘制世界地图含中国各个省份（地图篇）（一）
步骤一先绘制一张世界地图,这一步为基础工程,代码+效果图附下: world.json 链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:o ...
Vue Echarts绘制世界地图
1.绘制世界地图如下: 2,开始绘制地图 //安装Echarts npm install echarts --save 3.在Main.js中引入word.js世界地图 import '../node ...
echarts 绘制世界地图中国地图
1.下载世界地图和中国地图加载包网上找了很长时间,分享 world.js china.js 下载地址: 链接:https://pan.baidu.com/s/1itbfiTMNMkcbLfUs0N ...
echarts绘制完整的中国地图
echarts完整的中国地图效果图 html部分 js部分效果图 html部分给一个盒子必须给宽高<template><div class="home" ...
Echarts世界地图以中国为中心
世界地图常用的展示方式有两种,分别以太平洋和大西洋为中心,一个中国在右侧,一个中国在左侧偏中间, 目前使用Echarts绘制世界地图,出来的都是西半球地图,中国在右边, 想要实现世界地图以中国为中心, ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
matlab绘制世界地图（含国界）、中国地图（含省界），可下载m_map和shp文件
matlab绘制世界地图(含国界).中国地图(含省界),可下载m_map和shp文件 1.m_map安装包下载和官方网址 2.绘制世界地图(包含国界和不含国界) 3.绘制中国地图(包含省界) 本人习惯 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...

【Echarts】绘制世界地图和中国省份

文章目录

部分代码

截图

地图经纬度资源下载

【Echarts】绘制世界地图和中国省份相关推荐

最新文章

热门文章

【Echarts】 绘制世界地图和中国省份

文章目录

部分代码

截图

地图经纬度资源下载

【Echarts】 绘制世界地图和中国省份相关推荐

最新文章

热门文章

【Echarts】绘制世界地图和中国省份

【Echarts】绘制世界地图和中国省份相关推荐