【Echarts】 绘制世界地图和中国省份

文章目录

部分代码

# 参数设置lineOptions: {backgroundColor: 'transparent',title: {text: this.title,left: 'center',top: "5",textStyle: {color: '#333',fontSize: '20'}},geo: {map: 'worldAndChina', // china/worldcenter: [xxx,xxxx], // 视角中心点，经纬度zoom: 5, // 当前视角缩放比例, china:1；world:3,roam: true,silent: true,top: "top",label: {normal: {show: true,}},itemStyle: {normal: {areaColor: '#ACBDEF99',borderColor: '#fff'},emphasis: {areaColor: '#ACBDEF',}},},grid: {containLabel: true,left: "10",right: "10%",bottom: "10"},toolbox: {feature: {restore: {icon:"path://M744.825185 959.604364c99.432617-180.095751 116.152417-454.878025-274.385231-445.671339l0 221.86404L134.765845 400.102491 470.439954 64.394612l0 217.134319C938.120562 269.358751 990.225267 694.347025 744.825185 959.604364L744.825185 959.604364 744.825185 959.604364zM744.825185 959.604364"},saveAsImage: {},}},tooltip: {triggerOn: 'mousemove',confine: true, // 是否限制在图表区域extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",backgroundColor: "#dde4ed",padding: 10,textStyle: {color: "#000"},position:"right",},series: []},

## 渲染绘制let echartsBox = document.getElementById("echartsMap");let myChart = window.echarts.init(echartsBox);myChart.showLoading({text: "数据加载中 请稍后...",textStyle: {fontSize: 20}});metricData= [{name: el,value: el.prop_lon_lat, // 此处为经纬度}]// 填充数据let echartsOptions = this.lineOptionsechartsOptions.series.push({type: 'effectScatter',name: 'test',coordinateSystem: 'geo',symbol: "circle", // 标记的图形symbolSize: 7,showEffectOn: 'render',data: metricData,itemStyle: {color: "#00a65a",},}),myChart.clear(); this.$nextTick(() => {myChart.setOption(echartsOptions, true);this.pointClick(myChart);// 监听地图缩放事件，// 由于缩小地图的时候，地图文字存在堆在一起的情况，故判断zoom，控制label的展示和消失// 该部分参考：https://juejin.im/post/5dca2e5b5188255719075f64myChart.on('georoam', (params) => {//获取最新的option配制const {center, zoom } = myChart.getOption().geo[0];echartsOptions.geo.zoom = zoom;echartsOptions.geo.center = center;if(zoom<3 && this.mapIsLarge){echartsOptions.geo.label.normal.show = false;myChart.setOption(echartsOptions, true);this.mapIsLarge = false;}else if(zoom>=3 && !this.mapIsLarge){echartsOptions.geo.label.normal.show = true;myChart.setOption(echartsOptions, true);this.mapIsLarge = true;}});});

截图

地图经纬度资源下载