echarts3.0--地图和其点击事件及地图内文字内容样式位置控制

最新推荐文章于 2024-06-11 21:36:57 发布
最新推荐文章于 2024-06-11 21:36:57 发布
阅读量5.4w 收藏 45
点赞数 8
分类专栏： ---echarts-3.0 js 文章标签： echarts3.0地图 坐标 区县级json坐标数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21386275/article/details/79039024
版权

echarts的很多属性在不同的图中都是共用的，在本文中没有找到想要的，可以在我博客其他关于echarts3中看看，可能就找到了。

准备工作：
①到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.htm
②准备地图的坐标文件，就是本文示例中引用的beijing.js文件
说明：
代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger
地图中文字位置控制说明：
在我们自己准备的坐标文件中，在下载示例shenzhen.js文件中，搜索“cp”，即每个地区坐标的开头{"type":"Feature","id":"440308","properties":{"cp":[114.2712600002325,22.608372999871885],"name":"盐田区"} 中的cp中的坐标，没有的话，自己添加，这个坐标就是控制地图中文字显示的位置。
**全国区县级json数据及完整示例下载地址：**http://download.csdn.net/download/qq_21386275/10218492

本文的示例效果图：
这里写图片描述
示例代码：

<!DOCTYPE html>
<html style="height: 90%">
<head>
<meta charset="utf-8">
<title>自定义市县地图 | 带点击事件 | 地图颜色内容及样式控制 | </title>
</head>
<body style="width: 60%;height: 100%;margin-left: calc(20% - 2px);padding: 10px;border: 1px solid #e3e3e3;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);">
    <div id="main" style="height: 100%"></div>
    <script type="text/javascript" src="echarts.js"></script><!-- 引用echarts 3.0版本 -->
    <script type="text/javascript" src="beijing.js"></script><!-- 引用自定义市县地图 -->
    <script type="text/javascript">
        //初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '北京',
                link: 'http://echarts.baidu.com/',
                subtext: '各区、县地图'
            },
            tooltip: {
                trigger: 'item',
				formatter:function (params) {
				    var res = '';
					res+=params['data'].name+'</br>';
					res+='用户数' +' : '+params['data'].value2+'</br>';			
					return res;
				}
                //formatter: '{b}<br/>{c}'
            },//鼠标放在地图上时，显示的内容及样式控制
			visualMap: {
				show: false,//色系条是否显示
				min: 0,
				max: 45000,//取其区间值就代表色系inRange中的一种颜色
				left: 'left',
				top: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: true,
				inRange:{
					color: ['#42a8be','#00a69c', '#95ea95'],//上色范围
				}
			},//给地图上色
            series: [{
                name: '北京市',
                type: 'map',
                mapType: 'beijing',
                selectedMode : 'single',
                label: {
                    normal: {show: true},
                    emphasis: {show: true}
                },
				itemStyle: {
					normal: {
						borderColor: '#fff',
						areaColor: '#fff',
						borderWidth: 2,
					},//正常样式
					emphasis: {
						areaColor: 'red',
						borderWidth: 1,
						borderColor: 'yellow',
					}//鼠标事件区块样式
				},
                data:[
                {name: '怀柔区', value: 40500,value2:1024},
                {name: '延庆区', value: 23000,value2:1024},
                {name: '顺义区', value: 22500,value2:1024},
                {name: '通州区', value: 40500,value2:1024},
                {name: '朝阳区', value: 45000,value2:1024},
                {name: '昌平区', value: 37000,value2:1024},
                {name: '门头沟区', value: 40500,value2:1024},
                {name: '石景山区', value: 0,value2:1024},
                {name: '海淀区', value: 11161,value2:1024},
                {name: '丰台区', value: 15000,value2:1024},
				{name: '房山区', value: 20000,value2:1024},
				{name: '密云区', value: 25000,value2:1024},
				{name: '平谷区', value: 30000,value2:1024},
				{name: '西城区', value: 35000,value2:1024},
				{name: '东城区', value: 36000,value2:1024},
				{name: '大兴区', value: 45000,value2:1024},
				],//value的值是上面visualMap属性中设置的颜色色系区间的值，即0~45000
				label: {
					normal: {
						show: true,
						formatter:function(val){
							var area_content =  '{a|' + val.name + '}' + '-' + '{b|' + val.data.value2 + '}';
							return area_content.split("-").join("\n");
						},//让series 中的文字进行换行
						rich: {
							a: {
								color: 'black'
							},
							b: {
								color: 'yellow',
								fontFamily: 'Microsoft YaHei',
								fontSize: 14,
							}
						},//富文本样式,就是上面的formatter中'{a|'和'{b|'
					},
					emphasis: {show: true}
				},//地图中文字内容及样式控制
            }]
        };
		myChart.setOption(option, true);
		myChart.on('click', function(params){
			alert(1);
			console.log(params);//此处写点击事件内容
		});//点击事件，此事件还可以用到柱状图等其他地图
    </script>
</body>
</html>
笨小孩丶
关注
  • 8
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
【Echart地图】jQuery+html5基于echarts.js中国地图点击弹出下级城市地图（附完整源码下载）
赏樱看雪撸代码
08-10 2065
Echarts实现可点击中国地图，基于Echarts实现可查看下级城市的地图，jQuery+html5基于echarts.js中国地图点击弹出下级城市地图，中国地图及下级城市展示。
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)， 引入省份js文件
xingchen678的博客
09-04 7754
项目源码附js/json地图数据（下载项目源码后请使用Npm install 来安装相关依赖） 效果 使用前请使用npm(cnpm)安装echarts，详情见官网。 本文作为笔记demo只引入5个省(市)，根据需求可以引入更多。 main.js // The Vue build version to load with the `import` command // (runtime-on...
Echarts 绘制地图（中国、省市、区县），保姆级教程！
最新发布
共同学习，共同成长
06-11 6186
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
echarts3 地图文字位置设置
fairyier
05-29 2万+
如图，感觉echarts地图中省份名字位置默认是居中（基于长方形居中）的，导致很多文字几在一堆，难看死了开始在文档里面找相应的配置项，许久没找到，然后看网友说：打开js文件，搜索对应区县的名字，紧跟着名字后面有个类似"cp":[103.xxxxxx,30.xxxxxx]这样的东东，这个就是显示名字的坐标了，改了它就行。注意改了之后要清空缓存。我是在vue项目中使用的vue-echarts-v3 ，...
echarts-legend中如何配置图标和文字的位置（前后位置）、文字颜色、图标形状、图标宽高、图标间距离、图标中文字和图形的间距
热门推荐
qq_37899792的博客
04-28 3万+
代码在最下方 一.文字在后图标在前，如下图(默认情况下，当不配置legend中的align属性时） 代码如下 align:"left"或者不配置align 二.文字在前图标在后，如下图 代码如下 align:"right" 代码如下 var option = { tooltip: { trigger: 'axis', ...
vue中使用echarts地图
m0_59627269的博客
07-22 5965
echarts地图，不同数据地图区域显示不同的颜色
echarts map （echarts地图）使用总结
HurryUpp的博客
12-11 1万+
echarts 地图的各种使用场景
05 【eCharts样式定制系列】自定义地图
X北辰北的博客
01-15 2272
描述 项目的UI设计稿中，大屏展示模块有地图模块，原本项目使用的是我们ArcGIS JS API初始化后的一个地图服务图层，不过为了美观考虑，最后决定大屏模块的地图使用eCharts来自定义，UI设计稿中的地图如下： 通过查看UI设计图发现，通过JS API来实例化一个地图图层服务来实现这个模块的话，就需要重新制作一份暗夜色的地图，然后发布服务，前端调用实现，这个过程有点繁琐，所以我们接下...
echarts 3D地图，地图区域点击触发事件
10-16
综上所述，ECharts 3D 地图结合点击事件和数据加载，能提供交互式且富有洞察力的地图展示。通过细心配置，我们可以实现各种定制化的需求，如动态数据更新、多维度数据分析等，为用户提供直观的数据探索体验。在实际...
echarts3.0引入百度地图.rar
07-16
ECharts 3.0 版本是其一个重要版本，引入了更多特性、优化和性能提升。 在 ECharts 3.0 中引入百度地图，意味着开发者可以将 ECharts 的图表功能与百度地图的地理信息相结合，创建出既有数据分析又有地理位置展示的...
vue cli3.0结合echarts3.0与地图的使用方法示例
10-17
在本文中，我们将深入探讨如何在Vue CLI 3.0环境下结合ECharts 3.0实现地图的可视化。Vue CLI 3.0 是一个现代化的工具链，用于快速搭建 Vue.js 应用程序，它提供了丰富的插件系统和优化选项。而ECharts 是一个基于 ...
echarts-map点击显示省地图
04-09
6. **代码实现**：编写JavaScript代码，初始化ECharts实例，配置地图数据、样式和事件监听器。示例代码可能如下： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { ...
echarts3.0-radar-tooltips单轴数据显示
02-08
echarts3.0-radar-tooltips单轴数据显示
echarts地图,和地图点击事件 地图加点击事件 修改地图选中区颜色
weixin_50885665的博客
12-16 2585
笔记：Echarts地图 被选中更改颜色一系列配置_skyseey的博客-CSDN博客_echarts地图选中颜色 echarts地图,和地图点击事件_小鱼爱小于的博客-CSDN博客_echarts 地图点击事件ECharts map地图点击切换变颜色 - 掘金
vue中利用Echarts实现飞线（飞机）地图样式
qq_44727672的博客
08-25 2751
vue中利用Echarts实现飞线地图样式
使用echarts百度地图并更改地图样式
weixin_52921391的博客
03-20 4140
科技感
echarts地图自定义tooltip样式
JiAyInNnNnN123的博客
05-20 7135
效果图： 自定义tooltip样式 tooltip: { position: ['50%', '50%'], trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)', extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', zInde
echarts地图示例
m0_51431448的博客
04-04 5661
地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件 各个地区的json文件链接数据可视化平台(各个地区的json文件) 示例1 <template> <div :id="id" style="width: 100%;height: 100%;">111</div> </template> <script setup> import * as echarts from "echarts"; impor....
echarts地图点击事件
08-12
ECharts 是一款基于 JavaScript 的数据可视化库，可以用于创建各种类型的交互式图表，包括地图。要实现 ECharts 地图的点击事件，可以按照以下步骤进行操作： 1. 首先，确保已经引入了 ECharts 的 JavaScript 文件。可以通过在 HTML 文件中引入 `<script>` 标签来实现，例如： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> ``` 2. 创建一个包含地图的容器。在 HTML 文件中添加一个 `<div>` 元素，用于承载地图，例如： ```html <div id="mapContainer" style="width: 600px; height: 400px;"></div> ``` 3. 编写 JavaScript 代码来配置和渲染地图。在 `<script>` 标签中编写 JavaScript 代码，例如： ```javascript // 初始化地图容器 var mapContainer = document.getElementById('mapContainer'); // 创建 ECharts 实例 var myChart = echarts.init(mapContainer); // 定义地图的配置项 var option = { // 设置地图类型 series: [{ type: 'map', map: 'china' }] }; // 使用配置项渲染地图 myChart.setOption(option); // 监听地图的点击事件 myChart.on('click', function (params) { // 在控制台输出点击的区域名称 console.log(params.name); }); ``` 在上述代码中，我们通过调用 `echarts.init()` 方法来创建一个 ECharts 实例，并将其绑定到之前创建的地图容器上。然后，定义了地图的配置项，包括设置地图类型为 'china'。最后，通过调用 `myChart.on('click', ...)` 方法来监听地图的点击事件，当点击地图上的区域时，会在控制台输出对应区域的名称。 这样，当用户点击地图上的区域时，就会触发相应的点击事件，你可以在事件处理函数中编写自己的业务逻辑来处理用户的点击操作。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值