echarts 全国地图视觉映射组件

最新推荐文章于 2024-06-18 11:24:55 发布
最新推荐文章于 2024-06-18 11:24:55 发布
阅读量1.1k 收藏 9
点赞数 1
分类专栏： Echarts 文章标签： echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32195805/article/details/124151901
版权

今天优化了之前开发好的地图功能，增加了视觉映射组件及地图上显示数据。
在这里插入图片描述
接下来我们看下代码：

视觉映射组件：

visualMap: {
		min: 0, //最小值
		max: 1000, //最大值
		orient: "vertical", //图例模式
		left: 26,
		bottom: 26,
		showLabel: true, //显示图例文本
		precision: 0, //数据展示无小数点
		itemWidth: 20, //图例宽度
		itemHeight: 15, //图例高度
		textGap: 10, //图例间距
		inverse: true, //数据反向展示
		hoverLink:false,
		inRange: { //选中图例后背景半透明
			color: ['rgba(3,4,5,0.4)'],
		},
		pieces: [{
				gt: 1001,
				label: ">1000次",
				color: "#7b1c1c",
			},
			{
				gte: 500,
				lte: 1000,
				label: "500-1000次",
				color: "#bd4141",
			},
			{
				gte: 100,
				lte: 499,
				label: "100-499次",
				color: "#e76262",
			},
			{
				gte: 10,
				lte: 99,
				label: "10-99次",
				color: "#ff9595",
			},
			{
				gte: 1,
				lte: 9,
				label: "1-9次",
				color: "#ffc1c1",
			},
			{
				lte: 0,
				label: "0次",
				color: "#ffe5e5",
			},
		],
	},

lt 小于， gt 大于，lte 小于等于，gte 大于等于

地图上展示数值

series: [{
	itemStyle: {
			normal: {
				label: {
					 show: true,
					 formatter:'{c}' + '次'+'\n{b}',
				 },	
			},
		},
}]

全部代码如下：

echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('chinaMap'));
var data1 = [
	{
		name: '北京',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '上海',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '天津',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '重庆',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '河北',
		lable1: '异常次数',
		value: '10',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '山东',
		lable1: '异常次数',
		value: '2',
		lable2: '异常终端',
		numbar: '8'
	},
	{
		name: '陕西',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '山西',
		lable1: '异常次数',
		value: '200',
		lable2: '异常终端',
		numbar: '100'
	},
	{
		name: '辽宁',
		lable1: '异常次数',
		value: '2000',
		lable2: '异常终端',
		numbar: '1000'
	},
	{
		name: '吉林',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '黑龙江',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '宁夏',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '江苏',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '河南',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '安徽',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '浙江',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '湖南',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '湖北',
		lable1: '异常次数',
		value: '620',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '甘肃',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '青海',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '西藏',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '新疆',
		lable1: '异常次数',
		value: '2000',
		lable2: '异常终端',
		numbar: '1000'
	},
	{
		name: '内蒙古',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '贵州',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '四川',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '江西',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '福建',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '广东',
		lable1: '异常次数',
		value: '20',
		lable2: '异常终端',
		numbar: '10'
	},
	{
		name: '广西',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '云南',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0',
	},
	{
		name: '海南',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '香港',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '澳门',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	},
	{
		name: '台湾',
		lable1: '异常次数',
		value: '0',
		lable2: '异常终端',
		numbar: '0'
	}
];
chart.setOption({
	tooltip: {
		trigger: 'item',
		padding: [10, 15],
		backgroundColor: '#fff',
		borderWidth: .25, //区域边框宽度
		borderColor: '#666', //区域边框颜色
		shadowColor: '#d2d2d2', //底色阴影
		shadowOffsetX: 5,
		shadowOffsetY: 5,
		textStyle: {
			color: '#000',
			fontSize: 16,
			fontWeight: 'bolder'
		},
		formatter: function(val) {
			return val.data.name + '<div class="bjMap">' +
				'<div class="">' +
				'<p>' + val.data.lable1 + ':' + '</p>' +
				'<p>' + val.data.value + '次' + '</p>' +
				'</div>' +
				'<div class="">' +
				'<p>' + val.data.lable2 + ':' + '</p>' +
				'<p>' + val.data.numbar + '次' + '</p>' +
				'</div>' +
				'</div>'
		}
	},
	visualMap: {
		min: 0, //最小值
		max: 1000, //最大值
		orient: "vertical", //图例模式
		left: 26,
		bottom: 26,
		showLabel: true, //显示图例文本
		precision: 0, //数据展示无小数点
		itemWidth: 20, //图例宽度
		itemHeight: 15, //图例高度
		textGap: 10, //图例间距
		inverse: true, //数据反向展示
		hoverLink:false,
		inRange: { //选中图例后背景半透明
			color: ['rgba(3,4,5,0.4)'],
		},
		pieces: [{
				gt: 1001,
				label: ">1000次",
				color: "#7b1c1c",
			},
			{
				gte: 500,
				lte: 1000,
				label: "500-1000次",
				color: "#bd4141",
			},
			{
				gte: 100,
				lte: 499,
				label: "100-499次",
				color: "#e76262",
			},
			{
				gte: 10,
				lte: 99,
				label: "10-99次",
				color: "#ff9595",
			},
			{
				gte: 1,
				lte: 9,
				label: "1-9次",
				color: "#ffc1c1",
			},
			{
				lte: 0,
				label: "0次",
				color: "#ffe5e5",
			},
		],
	},
	geo: {
		map: 'china',
		zoom: 1.2,
		roam: false,
		itemStyle: {
			normal: {
				borderWidth: 2, //设置外层边框
				borderColor: '#444',
				shadowColor: '#d2d2d2', //底色阴影
				shadowOffsetX: 0,
				shadowOffsetY: 10
			}
		}
	},
	series: [{
		type: 'map',
		map: 'china',
		zoom: 1.2,
		selectedMode: false,
		label: {
			normal: {
				show: true, //显示省份标签
				textStyle: {
					color: "#000",
					fontSize:13
				} //省份标签字体颜色
			},
			emphasis: { //对应的鼠标悬浮效果
				show: true,
				textStyle: {
					color: "#fff"
				}
			}
		},
		itemStyle: {
			normal: {
				borderWidth: .35, //区域边框宽度
				borderColor: '#444', //区域边框颜色
				areaColor: "#ffe5e5", //区域颜色
				label: {
					 show: true,
					 formatter:'{c}' + '次'+'\n{b}',
				 },	
			},
			emphasis: {
				borderWidth: .5, //鼠标滑过区域，区域边框宽度
				areaColor: "#4a1111", //鼠标滑过区域背景色
				borderWidth: 1, //鼠标划过区域 区域边框
			}
		},
		data: data1
	}],
});
window.addEventListener("resize", function() {
	echarts.init(document.getElementById('chinaMap')).resize();
});
小青年一枚
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts实现中国地图、省市地区地图
weixin_44389116的博客
07-07 9385
【代码】Echarts实现全国、省市地区地图
Echarts地图添加引导线效果(labelLine)
12-13
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例： 如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts3-mapFile 1、初始化地图： 2、 声明label数据： 配置需要铺设的label，value值为坐标点，注释的四个区，需要用连线连接到地图外面，在后面会有单独配置，所以在此label
echarts市级区域地图数据展示
常小胖的博客
08-24 6326
一、原理 引用对应市区json数据（比如我就是引用的河南省驻马店市的数据），通过百度地图坐标拾取器获取地区的经纬度，将数据填在对应位置（我下面有注释），再配置下样式颜色之类的渲染上就可以了 二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果 我的echarts个人主页 三、效果图 四、直接上代码，解释在注释里 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char
echarts map （echarts地图）使用总结
HurryUpp的博客
12-11 1万+
echarts 地图的各种使用场景
Echart地图组件的使用
暗夜91的博客
04-25 1万+
1、基本应用（中国地图+世界地图） ​ echarts中想要使用地图首先需要准备地图对应的js文件，js文件可以到github上克隆下来，地址为： https://github.com/Luna829/incubator-echarts ，地图的js文件存放在 map/js路径下。 1）效果要求： 2）代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
快速上手echarts，一分钟生成你的图表，在Vue中使用echarts地图等常用类型，
2301_80868127的博客
03-06 1009
以Vue2为例，下载完成后在main.js文件中引入我们的echarts库，由于Vue2的特性所致，我们可以获取到Vue全局对象，所以我们。可以看到一个图表就生成了，具体的数据大家可以参考官网提供的示例，里面包含了大部分的图表配置，也可以查看配置手册定制自己的图表，以上就实现了一个地图组件了，echarts作为非常热门的可视化库，在前端开发中常常会有它的身影，所以你学会了吗~~做完这些，后面配置就一样了，唯一变化是在setOption参数对象中多了一个地图的配置对象。进行注册地图，方法接收两个参数，
echarts的使用——绘制地图（包括省份 城市），实现轮播高亮
weixin_39150852的博客
06-06 1万+
echars geomap
Vue结合ECharts绘制省市地图：数据驱动区域颜色展示，支持省市下钻与经纬度打点功能
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-17 5577
通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系，能够标示地球上的任何一个位置。经度和纬度常合称为经纬度，把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。本文以吉林省地图为例，来实现吉林省及所有市的切换效果。
Echarts 使用视觉映射组件（visualMap）
qWwolf的博客
04-12 3428
consttime=newDate('2010-01-0100:00:00'); constdata=[]; constdata1=[]; for(leti=0;i<12;++i){ data.push([time.getTime(),i*10+Math.random()*100]); data1.push([time.getTime(),i*10+Math.random()*100]); time...
使用 Echarts 插件完成中国地图
weixin_62897746的博客
12-05 5034
大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用 地图分为：世界地图，中国地图，省份地图，市区地图 引入中国地图代码 import geoJson from "echarts/map/json/china"; 注册地图 this.$echarts.registerMap("china", geoJson);
Echarts 地图使用，以及tooltip轮播使用
qinjinhua_的博客
10-09 5058
echarts地图使用 tootip
vue 使用 Echarts做地图及飞线效果
qq_42164957的博客
12-15 2534
vue 使用 Echarts做地图及飞线效果
Echarts绘制geo地图属性设置大全（一）
sleepwalker_1992的专栏
09-23 1万+
Echarts绘制geo地图属性设置大全（以中国地图为例）
ECharts 绘制图表时，有五种方式将数据映射到 X 和 Y 轴
最新发布
m0_61998604的博客
06-18 492
这是最基本、最直接的数据格式。你直接提供一个数组，其中每个元素代表一个数据点。数组形式适用于简单的折线图、柱状图等。这种方式更适用于数据点之间有更多属性需要表达的情况。每个数据点用一个对象表示，常用于散点图、气泡图等。是一种更高级的、以表格形式组织数据的方法。它支持更灵活的数据源分离，便于数据重用和数据映射控制。适用于具有多维数据的场景，例如热力图、矩阵等。每个数据点可以是一个包含多个维度的数组。在绘制地图或地理相关的数据时，可以使用 GeoJSON 格式的数据。
echarts做动态世界地图
CSDN_laoganma_com的博客
11-29 1453
网上找了好久，有一个版本出现了很多次。大家都说能用，但我还是调了好久才可以。贼气！这里记录下： 1.echarts版本 echarts官网上下的最早的版本是4.0.0 （截至2019.11.29），但是网上很多代码都是之前写的，用的版本也比较老。很气的是echarts版本不会向前兼容。。。这里提供我后来找的echarts代码： 链接：https://pan.baidu.com/s/1DPhh7H...
Echarts中visualMap组件详解（含注释）
热门推荐
刺心的博客
04-01 3万+
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlph...
echarts 标尺相关参数（visualMap属性设置）
三妹的博客
05-07 7648
一、效果图 二、设置代码 visualMap: { min: 0, max: 350, text: ['High', 'Low'],//两端的文本 realtime: false, calculable: true, ...
js代码：配置echarts中视觉映射组件宽高
04-20
要配置echarts中的视觉映射组件宽高，可以在option中设置visualMap参数的属性，例如： visualMap: { min: 0, max: 100, left: 'left', top: 'top', orient: 'vertical', calculable: true, seriesIndex: [2]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值