本篇文章給大家?guī)砹岁P(guān)于Echarts的相關(guān)使用知識(shí)，其中主要內(nèi)容是教大家如何使用Echarts一步步繪制街道以及鎮(zhèn)級(jí)地圖的，感興趣的朋友下面一起來看一下吧，希望對(duì)大家有幫助。

需求要求畫出上海普陀區(qū)，具體街道、鎮(zhèn)級(jí)的地圖。普通Echart只能畫出省市區(qū)的的地圖不能提供具體的街道、鎮(zhèn)級(jí)數(shù)據(jù)。所以可以通過bigmap來獲取具體數(shù)據(jù)。

1. 下載bigmap（選擇第二個(gè)全能版）

2. 在bigmap中下載所需街道的.kml文件

3.下載成功后需要將.kml文件轉(zhuǎn)化為json

將.kml文件導(dǎo)入geojson.io，如果有多個(gè).kml文件則依次導(dǎo)入，導(dǎo)入成功后右側(cè)區(qū)域就是我們需要的json文件，左側(cè)部分則是我們后面繪制地圖對(duì)應(yīng)的形狀（這個(gè)可以不用管），復(fù)制json數(shù)據(jù)將其保存在項(xiàng)目中（這里我是保存在public/static/map.json)

地址：geojson.io/#map=12.59/…

4.最重要的數(shù)據(jù)已經(jīng)有了，接下來就可以開始使用echart進(jìn)行繪制了

首先安裝echarts

npm install echarts

然后直接在vue文件中按需導(dǎo)入（全局導(dǎo)入可參考echarts文檔）

import * as echarts from 'echarts';

這里還需要用到axios來請(qǐng)求我們剛剛的json數(shù)據(jù)，所以安裝axios

npm i axios

導(dǎo)入axios

import axios from 'axios

用過echarts都知道，我們需要定義一個(gè)div容器來渲染地圖

<div id="main" style="width: 300px; height: 500px"></div>

因?yàn)槲业男枨笫沁M(jìn)入頁面直接渲染的所以我把js代碼直接寫在了mounted鉤子里面

到這里應(yīng)該就已經(jīng)完成了，但是run以后發(fā)現(xiàn)報(bào)錯(cuò)了！

參考到了這篇文章：t.csdn.cn/2mozQ

原因：生成的地圖里有一個(gè)區(qū)域?yàn)閮蓧K不連續(xù)的，type為GeometryCollection，echarts中對(duì)于此類型沒有做處理 解決方案：把兩塊不連續(xù)的數(shù)組數(shù)據(jù)放到一起，類型type為Polygon。具體可參考上述文章。

最終效果：

推薦學(xué)習(xí)：《JavaScript視頻教程》