下载依赖

amcharts/amcharts5其中#xff0c;props.countryData的数据格式为

“country”:

amcharts/amcharts5其中props.countryData的数据格式为

“country”:

classdevice-distribution-boxdiv

classheader-title{{

clickclickCountry(country.code)classsf-ellipsis:titlecountry.country

country.deviceCount

amcharts/amcharts5-geodata/lang/EN;//

地图语言包

amcharts/amcharts5-geodata/lang/cn_ZH;//地图语言包

import

amcharts/amcharts5-geodata/lang/PT;

地图语言包

amcharts/amcharts5-geodata/worldLow;

import

amcharts/amcharts5/***mes/Animated;

import

withDefaults(definePropsProps(),

{countryData:

item;});refreshAmchartsMap();},

);//

根据点击的国家添加该国家的颜色数据去除无关国家的颜色数据let

tempData

高亮该国家颜色polygonSeries.data.setAll(tempData);//

地图放大到该国家polygonSeries.events.on(datavalidated,

function

[];zoomTargets.forEach(function

(id)

{zoomDataItems.push(polygonSeries.getDataItemById(id));});polygonSeries.zoomToDataItems(zoomDataItems);});

更新相关数据

{root.setThemes([am5***mes_Animated.new(root)]);//

Create

root.container.children.push(am5map.MapChart.new(root,

{projection:

am5map.geoNaturalEarth1(),}),);polygonSeries

chart.series.push(am5map.MapPolygonSeries.new(root,

{geoJSON:

am5.color(0xbbbbbb),geodataNames:

zh?

chart.series.push(am5map.MapPointSeries.new(root,

{//

根据code值来映射点的位置code的值就是地图中类似“CN“的国家代码}),);let

colorSet

点符号样式设置pointSeries.bullets.push(function

(root,

container.children.push(am5.Circle.new(root,

{radius:

container.children.push(am5.Line.new(root,

{stroke:

container.children.push(am5.Label.new(root,

{text:

am5.color(0xffffff),fontWeight:

400,centerX:

container.children.push(am5.Label.new(root,

{text:

dataItem.dataContext.title,fill:

color,fontWeight:

mapData.value[i];pointSeries.data.push({code:

d.code,value:

鼠标移入和点击的效果polygonSeries.mapPolygons.template.setAll({tooltipText:

{name},toggleKey:

//多边形也可以使用模板字段从数据中获取其设置的值。

模板字段允许将系列数据中的对象属性绑定到多边形模板的设置。

});//

绑定数据polygonSeries.data.setAll(mapData.value);//

hover及active高亮颜色polygonSeries.mapPolygons.template.states.create(hover,

{fill:

root.interfaceColors.get(primaryButtonHover),});polygonSeries.mapPolygons.template.states.create(active,

{fill:

root.interfaceColors.get(primaryButtonHover),});//

Set

点击背景空白处恢复到初始大小chart.chartContainer.get(background).events.on(click,

function