ECharts 創建中國氣泡地圖和定位圖表點 點擊地區域高亮顯示

ECharts 官方案例：
https://www.makeapie.com/editor.html?c=x_kEnG-Ggq
效果如下：


上面的json 文件可以在https://gallerybox.echartsjs.com/asset/get/s/data-1528971808162-BkOXf61WX.json 中下載

將實例中的代碼做如下修改：
（1）設置option中的geo屬性中的regions.name即可改變選中區域的背景顏色

geo: {// 高亮區域regions: [{name: '',itemStyle: {areaColor: 'red', //區域顏色borderColor: 'red',// 線shadowColor: 'red',// 外發光shadowBlur: 20,}}]}

（2）添加點擊地圖事件

// 點擊地圖事件 myChart.on('click', function (param) {console.log(param);var data = $(param)[0].data;// 設置選中區域高亮option.geo.regions[0].name = data.name;// 重新渲染地圖myChart.setOption(option);});

點擊地圖可見效果如下：

優化地圖顯示效果后的完整代碼：

map: function () {var myChart = echarts.init(document.getElementById('map'));var that = this;myChart.showLoading();$.getJSON(this.uploadedDataURL, function (geoJson) {echarts.registerMap('china', geoJson);myChart.hideLoading();var geoCoordMap = {'臺灣': [121.5135, 25.0308],'黑龍江': [127.9688, 45.368],'內蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京': [116.4551, 40.2539],"遼寧": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陜西": [109.1162, 34.2004],"甘肅": [103.5901, 36.3043],"寧夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重慶": [108.384366, 30.439702],"山東": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江蘇": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"貴州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"廣東": [113.12244, 23.009505],"廣西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891],};var data = that.mapData;var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};that.mapOption = {tooltip: {trigger: 'item',formatter: function (params) {if (typeof (params.value)[2] == "undefined") {return params.name + ' : ' + params.value;} else {return params.name + ' : ' + params.value[2];}}},legend: {orient: 'vertical',y: 'bottom',x: 'right',data: ['pm2.5'],textStyle: {color: '#fff'}},visualMap: {show: false,min: 0,max: 500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true,seriesIndex: [1],clickLink: true,inRange: {}},geo: {map: 'china',show: true,scaleLimit: {min: 1.2 // 縮放限制最小值是當前縮放值},roam: true, // 是否開啟鼠標縮放和平移漫游。 只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟label: {normal: {show: false},emphasis: {show: false,}},itemStyle: {normal: {areaColor: '#174b9c',borderColor: '#1D54D7',//線borderWidth: 1},emphasis: {areaColor: '#5495de',// 鼠標 hover 高亮時地圖板塊的樣式}},// 高亮區域regions: [{name: '',itemStyle: {// shadowBlur: 20,areaColor: '#2379E3', //區域顏色// borderColor: '#0a2dae',// 線// shadowColor: '#0a2dae',// 外發光}}]},series: [{symbolSize: 5,label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#fff'}},name: 'light',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),},{type: 'map',map: 'china',geoIndex: 0,aspectScale: 0.75, // scale 地圖的長寬比showLegendSymbol: false, // 存在legend時顯示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#FFFFFF',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: 'Top 5',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: [35, 35],label: {normal: {show: true,textStyle: {color: '#fff',fontSize: 9,},formatter(value) {return value.data.value[2]}}},itemStyle: {normal: {color: '#D8BC37', //標志顏色}},data: convertData(data),showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,zlevel: 1},]}myChart.setOption(that.mapOption);});// 點擊地圖事件myChart.on('click', function (param) {var data = $(param)[0].data;if (data.id !== undefined) {that.mapTotal = $(param)[0].data.id;} else {var mapObj = that.mapData.filter(function (item) {return item.name == data.name;})that.mapTotal = mapObj[0].id;}// 設置選中區域高亮that.mapOption.geo.regions[0].name = data.name;// 重新渲染地圖myChart.setOption(that.mapOption);// 強制渲染頁面// that.$forceUpdate();}) },

總結

以上是生活随笔為你收集整理的ECharts 创建中国气泡地图和定位图表点 点击地区域高亮显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。