文章目錄

• 前言
• 一、echarts
• 二、使用步驟
• • 1.vue安裝、引入echarts
  • 2.使用echarts
• 總結

---

前言

公司需要一個中國地圖點擊可進入省市區縣級，但是在我使用echarts繪制中國地圖省市地區時發現官網只支持到省的json文件，地區文件需要自己去找，前兩天我找到了下載了一份全新的json文件，下載時間市2020年10月27日

---

一、echarts

官網：https://echarts.apache.org/zh/index.html

全國省市區縣級地圖JSON文件：https://download.csdn.net/download/weixin_43898407/13071019

自己下載：datav地圖選擇器http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
使用datav地圖選擇器的json文件太卡頓了，所以我全都下載下來了

二、使用步驟

1.vue安裝、引入echarts

代碼如下：

//下載echarts npm install echarts --save//main.js中全局引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts

2.使用echarts

我直接就只復制了下鉆的最后一級的代碼，全國和全省的都是一樣的，點擊城市發送對應的行政代碼，行政代碼和json的名稱是一樣的，獲取json文件加載地圖就行。 <template><div id="County" :style="{width: '100%', height: '470px'}"></div> </template> <script> export default {mounted () {//我這里直接獲取static文件夾中的json文件，this.code是點擊全省發送過來的城市對應的行政代碼//也可以寫'https://geo.datav.aliyun.com/areas_v2/bound'+this.code+'_full.json'axios.get('static/county/'+this.code+'_full.json').then(response => {echarts.registerMap('county',response.data)var chart = echarts.init(document.getElementById("County"));chart.setOption({ backgroundColor: '#142942', //地圖背景顏色title: {},legend: {},tooltip : {appendToBody: true ,triggerOn: 'click', //觸發方式enterable: true, // trigger:'item',confine: true,alwaysShowContent:false,formatter:function(params){//點擊進入下級城市的點擊事件可以寫在這個div里return `<div class='pop-up'><div class='pop-up-title'><p style="margin:0;">地區：`+params.name+`</p><p style="margin:0;">人數：`+params.value+`</p></div>&nbsp;&nbsp;&nbsp;&nbsp;</div>` },}, visualMap: {type: 'piecewise',orient:'horizontal', realtime: false,left: '5%',bootom:'bootom',textStyle: {color: "rgba(232, 218, 218, 1)"},pieces: [{min: 10, max: 25,label:'點亮數11—25'},{min:1, max:10,label:'點亮數1—10'},{max:1,label:'未點亮區域'}],color: ['#5adf5a', '#c4ffc4','#4a5b71' ],},geo: { // 這個是重點配置區map:'county', // 需要對應echarts.registerMap('county',response.data)roam: true,zoom: 1.2,label: {normal: {show: true, // 是否顯示對應地名，textStyle: {color: '#b7cfee'}},emphasis: {show: true,textStyle: {color: '#cc3041'}}},itemStyle: {normal: {//地圖背景色 },}},series: [{type: 'scatter',coordinateSystem: 'geo' // 對應上方配置},{type: 'map',zoom: 1.25,mapType: 'county',geoIndex: 0,roam: false,showLegendSymbol: true,data: [//這里寫獲取到的后臺數據，或者你自己需要加載的數據]}]});return chart}, response => {console.log('失敗');});} } </script>

---

總結

我只寫了點擊加載對應城市的代碼，其他都是一樣的，照葫蘆畫瓢或者封裝到組件中使用也可以，里面的配置可以根據官網自己調整，有的需要動態改變，所以我刪了，
json文件省和城市都是對應的區劃代碼，我是2020年10月27下載的，應該算最新的了。

總結

以上是生活随笔為你收集整理的vue使用echarts来绘制中国地图下钻省市区县级地图的全部內容，希望文章能夠幫你解決所遇到的問題。

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