使用Echarts繪制geo地圖（案例）

項(xiàng)目使用@vue/cli 4.5.13以及echarts版本為5.1.2。
需求：在省份地圖上，將數(shù)據(jù)進(jìn)行分段映射。如圖：

首先下載geojson數(shù)據(jù)

鏈接: http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=3
在左側(cè)點(diǎn)擊所選擇的區(qū)域，勾選是否包含子區(qū)域（是否顯示各個(gè)市區(qū)域），然后直接下載即可。

下載后我將文件放入了libs文件夾下，并用export default輸出：

接下來就是mapEcharts組件的基本代碼

<template><div class="map" ref="mapChart"></div> </template> <script> //引入geo數(shù)據(jù) import zjData from "libs/china-zj";export default {methods: {initMapChart() {const el = this.$refs.mapChart;const echarts = require("echarts");const myChart = echarts.init(el);echarts.registerMap("zj", zjData);const option = {//這里渲染地圖}myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},},mounted() {this.initMapChart();}, }; </script><style lang="less" scoped> .map {width: 100%;height: 100%;//要給指定高度，這里我在組件外加了固定高度，所以這里給了100% } </style>

渲染地圖的代碼

const option = {//數(shù)據(jù)映射visualMap: {type: "piecewise",//分段標(biāo)簽min: 0,//最小值max: 50,//最大值，不設(shè)置為無限大right: 30,//距離右側(cè)位置bottom: 30,//距離底部位置orient: "vertical",//組件豎直放置align: "left",//色塊在左textGap: 14,//文字主體之間的距離itemSymbol: "circle",//右下角映射組件使用圓點(diǎn)形狀show: true,seriesIndex: 0,//指定取哪個(gè)系列的數(shù)據(jù)(series.data)，若不設(shè)置則會(huì)影響圖上標(biāo)點(diǎn)顏色設(shè)置。//一以下是分段式視覺映射組件的每一段的范圍//gt：大于、gte：大于等于、lt：小于、lte：小于等于。pieces: [{gt: 5,label: "5個(gè)以上",color: "#1492FF",},{gte: 2,lte: 5,label: "2-5個(gè)",color: "#59AAF5",},{gte: 0,lt: 2,label: "0-2個(gè)",color: "#99CBF9",},],/*pieces或者inRange內(nèi)設(shè)置顏色試驗(yàn)時(shí)都能生效，個(gè)人認(rèn)為需要傳入組件控制顏色時(shí)再選擇用inRange，兩個(gè)都存在并給予不同的顏色，顯示以pieces為主。*///inRange: {// color: ["#99CBF9", "#59AAF5", "#1492FF"],//},},geo: {map: "zj",//上面引入的數(shù)據(jù)名show: true,roam: false,//關(guān)閉拖拽label: { //地圖顯示的地點(diǎn)名show: true,color: "#fff",fontSize: 16,},itemStyle: { areaColor: "#99CBF9", //地圖區(qū)域的顏色(沒有數(shù)據(jù)時(shí)會(huì)按照這個(gè)顏色顯示)borderColor: "#fff", //地圖區(qū)域的邊框borderWidth: 0.6,},emphasis: { //高亮的顯示設(shè)置label: {color: "#fff",},itemStyle: {areaColor: "#9DE3FF",},},select: { //選中顯示設(shè)置label: {color: "#fff",},itemStyle: {areaColor: "#9DE3FF",},},},series: [//配置數(shù)據(jù)的顯示{type: "map", //類型mapgeoIndex: 0, //指定geo屬性后，series-map.map 屬性，以及 series-map.itemStyle 等樣式配置不再起作用，而是采用 geo 中的相應(yīng)屬性。data:[{name: "杭州市",value: 6},{name: "湖州市",value: 0},{name: "嘉興市",value: 0},{name: "金華市",value: 0},{name: "麗水市",value: 0},{name: "寧波市",value: 0},{name: "衢州市",value: 0},{name: "紹興市",value: 0},{name: "臺(tái)州市",value: 0},{name: "溫州市",value: 0},{name: "舟山市",value: 0}],},//以下配置了圖中白色標(biāo)記圓點(diǎn)的顯示{type: "scatter", //類型：散點(diǎn)coordinateSystem: "geo", //使用地理坐標(biāo)系itemStyle: {color: {type: "radial", // 徑向漸變，前三個(gè)參數(shù)分別是圓心 x, y 和半徑x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0.5,color: "#fff", // 50% 處的顏色},{offset: 1,color: "rgb(0 0 0 / 0%)", // 100% 處的顏色},],global: false, // 缺省為 false},borderColor: "#fff", //邊框白色borderWidth: 1, //邊框?qū)挾?/span>},symbolSize: 10, //散點(diǎn)大小data: [{ name: "杭州市", value: [119.5035076, 29.703459] },{ name: "寧波市", value: [121.579792, 29.468388] },{ name: "溫州市", value: [120.452111, 27.700575] },{ name: "嘉興市", value: [120.770865, 30.500653] },{ name: "湖州市", value: [119.882398, 30.607198] },{ name: "紹興市", value: [120.582112, 29.597117] },{ name: "金華市", value: [120.009506, 28.950024] },{ name: "衢州市", value: [118.67263, 28.681708] },{ name: "舟山市", value: [122.106863, 30.016028] },{ name: "臺(tái)州市", value: [121.128599, 28.561378] },{ name: "麗水市", value: [119.571786, 28.001993] },],zlevel: 1,},],};

需要注意的問題

1.遇到更改scatter或effectScatter顏色不生效問題

按照官網(wǎng)文檔寫那些白色標(biāo)點(diǎn)的時(shí)候一直都是默認(rèn)顏色，寫的任何顏色都不生效，經(jīng)查詢發(fā)現(xiàn)有人說echarts中visualMap的優(yōu)先級是最高的，需要添加在visualMap中指定seriesIndex來解決，指定取哪個(gè)系列的數(shù)據(jù)他們將會(huì)互相影響，其他則不會(huì)受影響。試了一下果然ok👌🏻了。

2.瀏覽器顯示警告??

第一次加載的時(shí)候不顯示，再次刷新會(huì)顯示：dom上已經(jīng)初始化了一個(gè)圖表實(shí)例。
如圖：
這里我的處理方法是在初始化之前加上一句下面的代碼，來銷毀實(shí)例。

this.$echarts.dispose(this.$refs["mapChart"]);

但是感覺應(yīng)該會(huì)有更好的解決辦法，如果有想法或者以上代碼哪里有可以優(yōu)化的建議歡迎留言😛～

總結(jié)

以上是生活随笔為你收集整理的使用Echarts绘制geo地图（案例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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