文章目錄

• • 部分代碼
  • 截圖
  • 地圖經(jīng)緯度資源下載

部分代碼

# 參數(shù)設(shè)置 lineOptions: {backgroundColor: 'transparent',title: {text: this.title,left: 'center',top: "5",textStyle: {color: '#333',fontSize: '20'}},geo: {map: 'worldAndChina', // china/worldcenter: [xxx,xxxx], // 視角中心點，經(jīng)緯度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, // 是否限制在圖表區(qū)域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: "數(shù)據(jù)加載中 請稍后...",textStyle: {fontSize: 20}});metricData= [{name: el,value: el.prop_lon_lat, // 此處為經(jīng)緯度 }] // 填充數(shù)據(jù) let echartsOptions = this.lineOptions echartsOptions.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);// 監(jiān)聽地圖縮放事件，// 由于縮小地圖的時候，地圖文字存在堆在一起的情況，故判斷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;}}); });

截圖

地圖經(jīng)緯度資源下載

總結(jié)

以上是生活随笔為你收集整理的【Echarts】 绘制世界地图和中国省份的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。