站長資訊網
本篇文章給大家帶來了關于Echarts的相關使用知識，其中主要內容是教大家如何使用Echarts一步步繪制街道以及鎮級地圖的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
需求要求畫出上海普陀區，具體街道、鎮級的地圖。普通Echart只能畫出省市區的的地圖不能提供具體的街道、鎮級數據。所以可以通過bigmap來獲取具體數據。
- 下載bigmap（選擇第二個全能版）
- 在bigmap中下載所需街道的.kml文件
3.下載成功后需要將.kml文件轉化為json
將.kml文件導入geojson.io，如果有多個.kml文件則依次導入，導入成功后右側區域就是我們需要的json文件，左側部分則是我們后面繪制地圖對應的形狀（這個可以不用管），復制json數據將其保存在項目中（這里我是保存在public/static/map.json)
地址：geojson.io/#map=12.59/…
4.最重要的數據已經有了，接下來就可以開始使用echart進行繪制了
首先安裝echarts
npm install echarts
登錄后復制
然后直接在vue文件中按需導入（全局導入可參考echarts文檔）
import * as echarts from 'echarts';
登錄后復制
這里還需要用到axios來請求我們剛剛的json數據，所以安裝axios
npm i axios
登錄后復制
導入axios
import axios from 'axios
登錄后復制
用過echarts都知道，我們需要定義一個div容器來渲染地圖
<div id="main" style="width: 300px; height: 500px"></div>
登錄后復制
因為我的需求是進入頁面直接渲染的所以我把js代碼直接寫在了mounted鉤子里面
到這里應該就已經完成了，但是run以后發現報錯了！
參考到了這篇文章：t.csdn.cn/2mozQ
原因：生成的地圖里有一個區域為兩塊不連續的，type為GeometryCollection，echarts中對于此類型沒有做處理 解決方案：把兩塊不連續的數組數據放到一起，類型type為Polygon。具體可參考上述文章。
最終效果：
推薦學習：《JavaScript視頻教程》
