echarts地图使用教程（在echarts使用地图的坐标）

：暂无数据 2026-08-23 11:50:13 ：0

大家好,今天小编来为大家解答以下的问题，关于echarts地图使用教程，在echarts使用地图的坐标这个很多人还不知道，现在让我们一起来看看吧！

本文目录

在echarts使用地图的坐标
怎么将echarts地图用在自己的网页上
Echarts 地图省份的颜色自定义如何设置
echarts如何实现点击地图某个区域，某个区域放大，望贴出代码
使用echarts实现自定义区域地图
如何用ECharts动态在地图上标识点

在echarts使用地图的坐标

但是有的时候我们想要使用的地方还是不够，我们需要在添加一些地图的坐标：我们添加的方法如下：

3.进入到如下的页面

找到地点然后进行定点，复制当前坐标的值：

怎么将echarts地图用在自己的网页上

1、首先下载安装腾讯地图，进入主界面之后点击底部“我”。
2、点击开启零流量模式，使用的时候需要开启。
3、进入零流量模式说明，可以看到官方说的真正的零流量。前往下载离线地图。

Echarts 地图省份的颜色自定义如何设置

1、首先将省份和颜色的关系描述起来，写到js中。

2、然后在地图实现方法中从数据库中获取数据，然后将数据作为变量代Echarts的option中的data值。

3、在注入这些值的时候进行判断，根据不同的选择情况，从关系描述的js中获取值，看看选择条件是否在范围之内，如果是，则加上itemStyle属性。

4、然后对不同的下拉选择进行判断，当点击查询按钮的时候，将这些值传递到定义的全局变量中。

5、接着写这个地图的点击事件，其中search_map()方法是重新查询后台数据，生成地图所需要的数据，regionList是定义的变量，用来存放要选中的区域块的值。

6、最后展示效果，各个省份都用颜色设置出来了。

echarts如何实现点击地图某个区域，某个区域放大，望贴出代码

网页链接这个上面写的不知是不是你要的效果。供参考

import echarts from ’echarts/lib/echarts’;

import ’echarts/lib/chart/map’;

/*geojson文件很大，生产环境中，应该放在public文件夹中，并异步加载*/

import { geoJson } from ’./regionJsonXc’;

import { sqJson } from ’./regionJsonXc’;

let defaultBlue = ’#25ade6’;

let darkBlue = ’#186396’; //详细地图，线条颜色暗一些

// 配置option，一定要查看echarts官方配置文档

let option = {

// 地图配置

geo: {

show: true,

map: ’XC’,

label: {

normal: {

show: true,

color: ’#ccc’,

fontSize: 14,

emphasis: {

show: true,

color: ’#fff’

}

roam: true, // 滚轮滚动--放大或缩小

itemStyle: {

normal: {

label: {

show: true,

color: ’#fff’,

fontSize: 14,

areaColor: ’rgba(24,99,150,0.05)’,

borderColor: #186396,

shadowColor: #186396,

shadowBlur: 10,

emphasis: {

label: {

show: false,

color: ’#fff’,

shadowColor: ’#25ade6’,

shadowBlur: 10,

areaColor: ’rgba(24,99,150,0.5)’,

zoom: 1

series:

};

let myChart = null;

class XcMap extends Component {

state = {

option: option,

detail: false, // 是否使用详细地图

curMap:geoJson,

}

componentDidMount() {

this.draw(geoJson);

}

drawMap = (json) =》 {

const { option } = this.state;

let echartElement = document.getElementById(’xc-map’);

myChart = echarts.init(echartElement);

echarts.registerMap(’XC’, json);

myChart.setOption(option, true);

myChart.on(’georoam’, this.onDatazoom); // 缩放监听事件

}

获取zoom和center

zoom:地图缩放值，

center:中心位置，地图拖动之后会改变

getZoom = () =》 {

if(myChart){

let { zoom, center } = myChart.getOption().geo;

return { zoom, center }

}

return;

}

保存缩放值和中心位置，

saveZoom = () =》 {

let { zoom, center } = this.getZoom();

const { option } = this.state;

option.geo.zoom = zoom;

option.geo.center = center;

this.setState({option});

}

/**

* 地图缩小/放大

onDatazoom = () =》 {

const { detail, option } = this.state;

const { zoom } = this.getZoom();

const threshold = 1.7;

this.saveZoom(); // 地图缩放后，将缩放值和center保存在状态中

if (zoom 》= threshold && !detail) {

// 切换详细地图

option.geo.itemStyle.normal.borderColor = darkBlue;

option.geo.itemStyle.normal.shadowColor = darkBlue;

this.setState({

detail:true,

option,

curMap:sqJson

});

this.drawMap(sqJson);

} else if (detail && zoom 《 threshold) {

// 切换默认地图

option.geo.itemStyle.normal.borderColor = defaultBlue;

option.geo.itemStyle.normal.shadowColor = defaultBlue;

this.setState({

detail:false,

option,

curMap:geoJson

});

this.drawMap(geoJson);

}

render() {

const { position } = this.state;

return (《div》

《div id="xc-map" className={styles.map}》《/div》

《/div》);

}

export default XcMap;

使用echarts实现自定义区域地图

1.在线获取县级Json
***隐藏网址***
***隐藏网址***

***隐藏网址***

解析
源码

***隐藏网址***

***隐藏网址***

***隐藏网址***

ECharts可以很方便的在网页上绘制地图，图表，并且可以提供下载图像，放大，缩小，拖动等功能，今天主要说一下它的地图类型（type:＇map＇)是如何实现的．
首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里，它是一个JS的字典对象，由键／值对组成，键表示点的名称，值则表达它的坐标，由经纬度组成，它是一个数组，如它就表示了一个坐标．
地图类型的图表需要关注的元素
title：标题，显示这个地图所表示的名称
　 title: {
text: ’清大云点亮中国’,
subtext: ’Tsingda.Cloud’,
***隐藏网址***
x: ’center’,
y: ’top’,
textStyle: {
color: ’#fff’
}
}
toolbox：工具栏，显示一些显示的工具，放大，缩小，查看数据集，下载图像等
　　　　toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}
legend：图标显示，当series有多个地图时，这个值用到显示多个地图的图标，可以是横向显示和纵向显示
　　　　legend: {
x: ’left’,
y: ’top’,
data: ,//在线和离线对应的是series的名字
selectedMode: false,//选中悬浮
textStyle: {
color: ’#fff’
}
}
series：地图显示，用来叠放显示地图，你可以定义多个，它们之间的关系是第一个在最上面，以此类推．
series: [
//默认
{
name: ’底层模版’,
type: ’map’,
mapType: ’china’,
data: provinceMap,
geoCoord: source,
itemStyle: {
normal: {
color: bgColor,
borderColor: "#eee",
label: {
show: true,
textStyle: {
color: "#fff"
}
}
}, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
},
}］
markPoint：点标识，用来标识地图上的后，这些点通常是被存储在一个geoCoord对象上，这个对象是一个字典，这在文章开头已经介绍过．
markPoint: {//动态标记
large: true,//这个选项，悬浮自动失效
symbolSize: 2,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: ’rgba(37, 140, 249, 0.8)’,
color: onColor
}
},
data:
}
markPoint里的data对象是这个地图上需要显示的点，它是一个字符型数组，用来存储geoCoord里的键！
setOption:将地图对象添加到指定的地图对象上
var myChart = echarts.init(document.getElementById(’main’));
var option={};
myChart.setOption(option);
动态构建地图上的点标识markPoint
大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上，这样就可以动态在地图上标示点了
　　　　$.get("/map/GetOffMap", function (data) {

for (var i in data) {
option.series;
option.series.latitude });
}
myChart.setOption(option);