Echarts中mapselected事件的引用

冷不防 2022-05-23 04:06 135阅读 0赞

var option = {
    			title : {
    				text : '企业对外投资分布图',
    				left : 'center'
    			},
    			tooltip : {
    				trigger : 'item'
    			},
    			legend : {
    				orient : 'vertical',
    				left : 'left',
    				data : ['北京','上海','广东'],
    				selectedMode : false
    			},
    			visualMap : {
    				min : 0,
    				max : 2500,
    				left : 'left',
    				top : 'bottom',
    				text : [ '高', '低' ], // 文本，默认为数值文本
    				calculable : true
    			},
    			toolbox : {
    				show : true,
    				orient : 'vertical',
    				left : 'right',
    				top : 'center',
    				feature : {
    					mark : {
    						show : true
    					},
    					dataView : {
    						show : true,
    						readOnly : false
    					},
    					restore : {
    						show : true
    					},
    					saveAsImage : {
    						show : true
    					}
    				}
    			},
    			series : [ {
    				name : 'demo',
    				type : 'map',
    				mapType : 'china',
    				roam : true,
    				zoom : 0.7,
    				left : 0,
    				label : {
    					normal : {
    						show : false
    					},
    					emphasis : {
    						show : true
    					}
    				},
    				data : data
    			}, {
    				name : '2011全国GDP对比',
    				type : 'pie',
    				roseType : 'area',
    				tooltip : {
    					trigger : 'item',
    					formatter : "{a} <br/>{b} : {c} ({d}%)"
    				},
    				center : [ '800', '50%' ],
    				radius : [ 30, 100 ],
    				data : [ {
    					name : '北京',
    					value : 16251.93
    				}, {
    					name : '上海',
    					value : 19195.69
    				}, {
    					name : '广东',
    					value : 53210.28
    				} ]
    			} ]
    		};
    
    		myChart.setOption(option);
    
    		myChart.on("mapselected", function(param) {
    			var selected = param.selected;
    			var mapSeries = option.series[0];
    			var data = [];
    			var legendData = [];
    			var name;
    			for (var p = 0, len = mapSeries.data.length; p < len; p++) {
    				name = mapSeries.data[p].name;
    				//mapSeries.data[p].selected = selected[name];
    				if (selected[name]) {
    					data.push({
    						name : name,
    						value : mapSeries.data[p].value
    					});
    					legendData.push(name);
    				}
    			}
    			option.legend.data = legendData;
    			option.series[1].data = data;
    			myChart.setOption(option, true);
    		});

如果使用上面的方式显示的结果如图所示 ： 当点击地图的省份时无法将省份的数据加载到南丁格尔图中。大家能帮我看看错在哪儿吗（Echarts用的是4.x版本）

![70][]

[70]: /images/20220523/9c64904d28b84e0392031c9410a16876.png

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中安装与引用echarts示例

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第002个 [点击查看专栏目录][Link 1]

秒速五厘米/ 2024年03月27日 11:09/ 0 赞/ 64 阅读

相关（12）vue引用echarts

一、引用步骤： 1、先引入echarts库：如果用的页面比较多，可以在main.js中全局引入echarts库；如果用的页面不多，可以单独引入。这里采用全局引入：

布满荆棘的人生/ 2023年07月20日 12:15/ 0 赞/ 51 阅读

相关 echarts 引用地图的json

[echarts 中uploadedDataURL 中的json数据下载以及个省份地图json数据地址][echarts _uploadedDataURL _json_ _

r囧r小猫/ 2022年10月05日 09:46/ 0 赞/ 177 阅读

相关 Echarts - 图表绑定事件（事件处理）

前言 > `ECharts` 允许通过 `on` 方法来监听用户对图表的行为，且可以拿到 `item` 参数用以业务逻辑处理。例如，如下点击事件效果图，可获取相关

比眉伴天荒/ 2022年09月04日 05:42/ 0 赞/ 227 阅读

相关 Echarts中mapselected事件的引用

var option = { title : { text : '企业对外投资分布图', left : 'center'

冷不防/ 2022年05月23日 04:06/ 0 赞/ 136 阅读

相关 angularjs中引用echarts

首先声明本人angular版本为1.x 1.在html中给echarts图表所在的div设置宽度和高度 ![70][] 2.初始化echarts所在的dom元素 ![7

ゝ一世哀愁。/ 2022年05月15日 02:44/ 0 赞/ 207 阅读

相关 eCharts增加图例（legend）的点击事件--echarts-for-react

1. 功能需求：用户点击图例，进入下钻页面。 2. 背景使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触

╰半橙微兮°/ 2022年04月24日 08:12/ 0 赞/ 1371 阅读

相关 angularjs通过指令方式引用echarts

1. index.html引入 <script src="lib/echarts//echarts.js"></script> <script src=

Dear 丶/ 2022年04月13日 10:52/ 0 赞/ 235 阅读

相关关于Echarts设置点击事件

// 封装饼图代码 Publicshape:function(publicJsonArray,publicId){

淩亂°似流年/ 2021年09月17日 02:01/ 0 赞/ 445 阅读

相关 echarts外部触发echarts事件 VUE

//显示事件 listMousEnter(event){ event.target.style.backgroundColor='f00

左手的ㄟ右手/ 2021年09月07日 06:12/ 0 赞/ 843 阅读