Echarts 改变地图文字颜色大小,以及鼠标经过颜色

series: [
							// 定义地图类型,数据
							{
								name: "china",
								type: "map",
								mapType: "china",
								data: provinces,
								itemStyle: {
									normal: {
										borderWidth: 1, //边际线大小
										borderColor: '#00ffff', //边界线颜色
										areaColor: '#09295b' //默认区域颜色
									},
									emphasis: {
										show: true,
										areaColor: '#3066ba', //鼠标滑过区域颜色
										label: {
											show: true,
											textStyle: {
												color: '#fff'//鼠标经过字体颜色
											}
										}
									}
								},
								label: {
									normal: {
										show: true,
										textStyle: {
											fontSize: 12,//字体大小
											fontWeight: 'bold',
											color: 'red'//字体颜色
										}
									},
									emphasis: {
										show: true
									},
								}
							},

						]

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要使用 ECharts 在点击地图改变颜色,你可以使用 ECharts 的事件监听功能来实现。下面是一个实现的示例代码: ```javascript // 初始化地图实例 var myChart = echarts.init(document.getElementById('map')); // 地图配置项 var option = { // ... 其他配置项 // 添加地图点击事件监听 series: [ { type: 'map', map: 'china', // 设置各个区域的样式 itemStyle: { // 默认样式 normal: { // 设置默认填充颜色 areaColor: '#ccc' }, // 鼠标悬停样式 emphasis: { // 设置悬停时填充颜色 areaColor: '#ff0000' } }, // 添加点击事件监听 events: { 'click': function (params) { // 获取点击的区域名称 var name = params.name; // 获取当前地图样式配置 var itemStyle = option.series[0].itemStyle; // 遍历配置项,根据区域名称设置对应的颜色 for (var i = 0; i < itemStyle.length; i++) { if (itemStyle[i].name === name) { itemStyle[i].areaColor = '#ff0000'; // 设置点击时填充颜色 } else { itemStyle[i].areaColor = '#ccc'; // 设置其他区域的填充颜色 } } // 更新地图配置项 myChart.setOption(option); } } } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 在上面的示例代码中,我们通过 `events` 配置项添加了点击事件监听。当用户点击地图上的某个区域时,会触发 `click` 事件并执行相应的回调函数。在回调函数中,我们通过 `params` 参数获取点击的区域名称,并根据名称修改对应区域的填充颜色。最后,使用 `myChart.setOption(option)` 来更新地图的配置项,从而实现颜色改变

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值