vue中Echarts地圖下鑽 安裝Echarts依賴 全局引入Echarts和element-ui 編寫頁面 大功告成

安裝Echarts依賴

npm install echarts --save
version 4.7.0

element-ui的相關使用方法就不做介紹了。

全局引入Echarts和element-ui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$echarts = echarts
Vue.use(ElementUI);
Vue.config.productionTip = false

重點來了,這裏爲了防止項目打包後找不到地圖資源用了地圖的json文件。
在static中新建mapData來存放地圖的json文件(這裏我導入了echarts中所有的地圖json文件和重慶江北區的json文件)
獲取echarts中沒有的地圖json文件(https://www.isqqw.com/geojson)這裏以成都市爲例

編寫頁面

 <template>
   <div class="map-content">
      <div id="map"></div>
    <el-select v-model="value" placeholder="請選擇">
  <el-option
    v-for="(items,index) in mapData"
    :key="index"
    :label="items.name"
    :value="items.name"
  ></el-option>
</el-select>

</div>
</template>
<script>
// 如需擴展更多省市,在此處引入對應的地圖JSON數據
import world from '../../static/mapData/world.json'
import china from '../../static/mapData/china.json'
import anhui from '../../static/mapData/anhui.json'
import aomen from '../../static/mapData/aomen.json'
import fujian from '../../static/mapData/fujian.json'
import gansu from '../../static/mapData/gansu.json'
import guangdong from '../../static/mapData/guangdong.json'
import sichuan from '../../static/mapData/sichuan.json'
import guangxi from '../../static/mapData/guangxi.json'
import beijing from '../../static/mapData/beijing.json'
import tianjin from '../../static/mapData/tianjin.json'
import shanghai from '../../static/mapData/shanghai.json'
import chongqing from '../../static/mapData/chongqing.json'
import chengdu from '../../static/mapData/chengdu.json'
import CQjiangbei from '../../static/mapData/CQ_jiangbei.json'
export default {
  name: "mapContent", 
  data() {
return {
  value: "world", //初始化爲世界地圖
  myChart:null,  //初始化地圖渲染器
 //   註冊地圖json
   jsonMap: {
    'world':world,
    '中國':china,
    '北京': beijing,
    '天津': tianjin,
    '上海': shanghai,
    '重慶': chongqing,
    '四川': sichuan,
    '成都市': chengdu,
    '安徽':anhui,
    '澳門':aomen,
    '福建':fujian,
    '甘肅':gansu,
    '廣東':guangdong,
    '廣西':guangxi,
    '江北區':CQjiangbei
    },
        // 下拉框
  mapData: [
        { name: "world", value: 10 },
        { name: "中國", value: 20 },
        { name: "安徽", value:30 },
        { name: "澳門", value:30 },
        { name: "福建", value:30 },
        { name: "甘肅", value:30 },
        { name: "廣東", value:30 },
        { name: "廣西", value:30 },
        { name: "北京", value:30 },
        { name: "天津", value:40},
        { name: "上海", value: 50 },
        { name: "重慶", value:60} ,
        { name: "成都", value:60} ,
        {name:'江北區',value:70}
    ] 
//準備數據
// 全球地域中文映射
nameMap : {
'Afghanistan':'阿富汗',
'Albania':'阿爾巴尼亞',
'Algeria':'阿爾及利亞',
'Andorra':'安道爾',
'Angola':'安哥拉',
'Antarctica':'南極洲',
'Antigua and Barbuda':'安提瓜和巴布達',
'Argentina':'阿根廷',
'Armenia':'亞美尼亞',
'Australia':'澳大利亞',
'Austria':'奧地利',
'Azerbaijan':'阿塞拜疆',
'The Bahamas':'巴哈馬',
'Bahrain':'巴林',
'Bangladesh':'孟加拉國',
'Barbados':'巴巴多斯',
'Belarus':'白俄羅斯',
'Belgium':'比利時',
'Belize':'伯利茲',
'Benin':'貝寧',
'Bermuda':'百慕大',
'Bhutan':'不丹',
'Bolivia':'玻利維亞',
'Bosnia and Herzegovina':'波斯尼亞和黑塞哥維那',
'Botswana':'博茨瓦納',
'Brazil':'巴西',
'Brunei':'文萊',
'Bulgaria':'保加利亞',
'Burkina Faso':'布基納法索',
'Burundi':'布隆迪',
'Cambodia':'柬埔寨',
'Cameroon':'喀麥隆',
'Canada':'加拿大',
'Cape Verde':'佛得角',
'Central African Rep.':'中非共和國',
"Côte d'Ivoire":'象牙海岸',
'Chad':'乍得',
'Chile':'智利',
'China':'中國',
'Colombia':'哥倫比亞',
'Comoros':'科摩羅',
'Dem. Rep. Congo':'剛果共和國',
'Congo':'剛果',
'Costa Rica':'哥斯達黎加',
'Croatia':'克羅地亞',
'Cuba':'古巴',
'Cyprus':'塞浦路斯',
'Czech Republic':'捷克共和國',
'Denmark':'丹麥',
'Djibouti':'吉布提',
'Dominica':'多米尼加',
'Dominican Republic':'多明尼加共和國',
'Ecuador':'厄瓜多爾',
'Egypt':'埃及',
'El Salvador':'薩爾瓦多',
'Equatorial Guinea':'赤道幾內亞',
'Eritrea':'厄立特里亞',
'Estonia':'愛沙尼亞',
'Ethiopia':'埃塞俄比亞',
'Falkland Islands':'福克蘭羣島',
'Faroe Islands':'法羅羣島',
'Fiji':'斐濟',
'Finland':'芬蘭',
'France':'法國',
'French Guiana':'法屬圭亞那',
'French Southern and Antarctic Lands':'法屬南半球和南極領地',
'Gabon':'加蓬',
'Gambia':'岡比亞',
'Gaza Strip':'加沙',
'Georgia':'格魯吉亞',
'Germany':'德國',
'Ghana':'加納',
'Greece':'希臘',
'Greenland':'格陵蘭',
'Grenada':'格林納達',
'Guadeloupe':'瓜德羅普',
'Guatemala':'危地馬拉',
'Guinea':'幾內亞',
'Guinea Bissau':'幾內亞比紹',
'Guyana':'圭亞那',
'Haiti':'海地',
'Honduras':'洪都拉斯',
'Hong Kong':'香港',
'Hungary':'匈牙利',
'Iceland':'冰島',
'India':'印度',
'Indonesia':'印尼',
'Iran':'伊朗',
'Iraq':'伊拉克',
'Iraq-Saudi Arabia Neutral Zone':'伊拉克阿拉伯中立區',
'Ireland':'愛爾蘭',
'Isle of Man':'馬恩島',
'Israel':'以色列',
'Italy':'意大利',
'Ivory Coast':'科特迪瓦',
'Jamaica':'牙買加',
'Jan Mayen':'揚馬延島',
'Japan':'日本',
'Jordan':'約旦',
'Kazakhstan':'哈薩克斯坦',
'Kenya':'肯尼亞',
'Kerguelen':'凱爾蓋朗羣島',
'Kiribati':'基里巴斯',
'North Korea':'北朝鮮',
'South Korea':'韓國',
'Kuwait':'科威特',
'Kyrgyzstan':'吉爾吉斯斯坦',
'Lao PDR':'老撾',
'Latvia':'拉脫維亞',
'Lebanon':'黎巴嫩',
'Lesotho':'萊索托',
'Liberia':'利比里亞',
'Libya':'利比亞',
'Liechtenstein':'列支敦士登',
'Lithuania':'立陶宛',
'Luxembourg':'盧森堡',
'Macau':'澳門',
'Macedonia':'馬其頓',
'Madagascar':'馬達加斯加',
'Malawi':'馬拉維',
'Malaysia':'馬來西亞',
'Maldives':'馬爾代夫',
'Mali':'馬裏',
'Malta':'馬耳他',
'Martinique':'馬提尼克',
'Mauritania':'毛里塔尼亞',
'Mauritius':'毛里求斯',
'Mexico':'墨西哥',
'Moldova':'摩爾多瓦',
'Monaco':'摩納哥',
'Mongolia':'蒙古',
'Morocco':'摩洛哥',
'Mozambique':'莫桑比克',
'Myanmar':'緬甸',
'Namibia':'納米比亞',
'Nepal':'尼泊爾',
'Netherlands':'荷蘭',
'New Caledonia':'新喀里多尼亞',
'New Zealand':'新西蘭',
'Nicaragua':'尼加拉瓜',
'Niger':'尼日爾',
'Nigeria':'尼日利亞',
'Northern Mariana Islands':'北马里亞納羣島',
'Norway':'挪威',
'Oman':'阿曼',
'Pakistan':'巴基斯坦',
'Panama':'巴拿馬',
'Papua New Guinea':'巴布亞新幾內亞',
'Paraguay':'巴拉圭',
'Peru':'祕魯',
'Philippines':'菲律賓',
'Poland':'波蘭',
'Portugal':'葡萄牙',
'Puerto Rico':'波多黎各',
'Qatar':'卡塔爾',
'Reunion':'留尼旺島',
'Romania':'羅馬尼亞',
'Russia':'俄羅斯',
'Rwanda':'盧旺達',
'San Marino':'聖馬力諾',
'Sao Tome and Principe':'聖多美和普林西比',
'Saudi Arabia':'沙特阿拉伯',
'Senegal':'塞內加爾',
'Seychelles':'塞舌爾',
'Sierra Leone':'塞拉利昂',
'Singapore':'新加坡',
'Slovakia':'斯洛伐克',
'Slovenia':'斯洛文尼亞',
'Solomon Islands':'所羅門羣島',
'Somalia':'索馬里',
'S. Sudan':'蘇丹',
'South Africa':'南非',
'Spain':'西班牙',
'Sri Lanka':'斯里蘭卡',
'St. Christopher-Nevis':'聖',
'St. Lucia':'聖露西亞',
'St. Vincent and the Grenadines':'聖文森特和格林納丁斯',
'Sudan':'蘇丹',
'Suriname':'蘇里南',
'Svalbard':'斯瓦爾巴特羣島',
'Swaziland':'斯威士蘭',
'Sweden':'瑞典',
'Switzerland':'瑞士',
'Syria':'敘利亞',
'Taiwan':'臺灣',
'Tajikistan':'塔吉克斯坦',
'United Republic of Tanzania':'坦桑尼亞',
'Thailand':'泰國',
'Togo':'多哥',
'Tonga':'湯加',
'Trinidad and Tobago':'特里尼達和多巴哥',
'Tunisia':'突尼斯',
'Turkey':'土耳其',
'Turkmenistan':'土庫曼斯坦',
'Tanzania':'坦桑尼亞',
'Turks and Caicos Islands':'特克斯和凱科斯羣島',
'Uganda':'烏干達',
'Ukraine':'烏克蘭',
'United Arab Emirates':'阿聯酋',
'United Kingdom':'英國',
'United States':'美國',
'Uruguay':'烏拉圭',
'Uzbekistan':'烏茲別克斯坦',
'Vanuatu':'瓦努阿圖',
'Venezuela':'委內瑞拉',
'Vietnam':'越南',
'Western Sahara':'西撒哈拉',
'Western Samoa':'西薩摩亞',
'Yemen':'也門',
'Yugoslavia':'南斯拉夫',
'Democratic Republic of the Congo':'剛果民主共和國',
'Zambia':'贊比亞',
'Zimbabwe':'津巴布韋',
'South Sudan':'南蘇丹',
'Somaliland':'索馬里蘭',
'Montenegro':'黑山',
'Kosovo':'科索沃',
'Republic of Serbia':'塞爾維亞',
 },
 // 全球數據
worldData :[
    {name: '美國', gold: 46, silver: 29, copper: 29, value: 104},
    {name: '中國', gold: 38, silver: 27, copper: 23, value: 88},
    {name: '英國', gold: 29, silver: 17, copper: 19, value: 65},
    {name: '俄羅斯', gold: 24, silver: 25, copper: 33, value: 82},
    {name: '韓國', gold: 13, silver: 8, copper: 7, value: 28},
    {name: '德國', gold: 11, silver: 19, copper: 14, value: 44},
    {name: '法國', gold: 11, silver: 11, copper: 12, value: 34},
    {name: '意大利', gold: 8, silver: 9, copper: 11, value: 28},
    {name: '匈牙利', gold: 8, silver: 4, copper: 5, value: 17},
    {name: '澳大利亞', gold: 7, silver: 16, copper: 12, value: 35},
    {name: '日本', gold: 7, silver: 14, copper: 17, value: 38},
    {name: '哈薩克斯坦', gold: 7, silver: 1, copper: 5, value: 13},
    {name: '荷蘭', gold: 6, silver: 6, copper: 8, value: 20},
    {name: '烏克蘭', gold: 6, silver: 5, copper: 9, value: 20},
    {name: '古巴', gold: 5, silver: 3, copper: 6, value: 14},
    {name: '新西蘭', gold: 5, silver: 3, copper: 5, value: 13},
    {name: '伊朗', gold: 4, silver: 5, copper: 3, value: 12},
    {name: '牙買加', gold: 4, silver: 4, copper: 4, value: 12},
    {name: '捷克', gold: 4, silver: 3, copper: 3, value: 10},
    {name: '朝鮮', gold: 4, silver: 0, copper: 2, value: 6},
    {name: '西班牙', gold: 3, silver: 10, copper: 4, value: 17},
    {name: '巴西', gold: 3, silver: 5, copper: 9, value: 17},
    {name: '白俄羅斯', gold: 3, silver: 5, copper: 5, value: 13},
    {name: '南非', gold: 3, silver: 2, copper: 1, value: 6},
    {name: '埃塞俄比亞', gold: 3, silver: 1, copper: 3, value: 7},
    {name: '克羅地亞', gold: 3, silver: 1, copper: 2, value: 6},
    {name: '羅馬尼亞', gold: 2, silver: 5, copper: 2, value: 9},
    {name: '肯尼亞', gold: 2, silver: 4, copper: 5, value: 11},
    {name: '丹麥', gold: 2, silver: 4, copper: 3, value: 9},
    {name: '波蘭', gold: 2, silver: 2, copper: 6, value: 10},
    {name: '阿塞拜疆', gold: 2, silver: 2, copper: 6, value: 10},
    {name: '土耳其', gold: 2, silver: 2, copper: 1, value: 5},
    {name: '瑞士', gold: 2, silver: 2, copper: 0, value: 4},
    {name: '立陶宛', gold: 2, silver: 1, copper: 2, value: 5},
    {name: '挪威', gold: 2, silver: 1, copper: 1, value: 4},
    {name: '加拿大', gold: 1, silver: 5, copper: 12, value: 18},
    {name: '瑞典', gold: 1, silver: 4, copper: 3, value: 8},
    {name: '哥倫比亞', gold: 1, silver: 3, copper: 4, value: 8},
    {name: '格魯吉亞', gold: 1, silver: 3, copper: 3, value: 7},
    {name: '墨西哥', gold: 1, silver: 3, copper: 3, value: 7},
    {name: '愛爾蘭', gold: 1, silver: 1, copper: 3, value: 5},
    {name: '塞爾維亞', gold: 1, silver: 1, copper: 2, value: 4},
    {name: '斯洛文尼亞', gold: 1, silver: 1, copper: 2, value: 4},
    {name: '阿根廷', gold: 1, silver: 1, copper: 2, value: 4},
    {name: '突尼斯', gold: 1, silver: 1, copper: 1, value: 3},
    {name: '多米尼加', gold: 1, silver: 1, copper: 0, value: 2},
    {name: '烏茲別克斯坦', gold: 1, silver: 0, copper: 3, value: 4},
    {name: '特立尼達和多巴哥', gold: 1, silver: 0, copper: 3, value: 4},
    {name: '拉脫維亞', gold: 1, silver: 0, copper: 1, value: 2},
    {name: '格林納達', gold: 1, silver: 0, copper: 0, value: 1},
    {name: '巴哈馬', gold: 1, silver: 0, copper: 0, value: 1},
    {name: '烏干達', gold: 1, silver: 0, copper: 0, value: 1},
    {name: '委內瑞拉', gold: 1, silver: 0, copper: 0, value: 1},
    {name: '阿爾及利亞', gold: 1, silver: 0, copper: 0, value: 1},
    {name: '印度', gold: 0, silver: 2, copper: 4, value: 6},
    {name: '蒙古', gold: 0, silver: 2, copper: 3, value: 5},
    {name: '泰國', gold: 0, silver: 2, copper: 1, value: 3},
    {name: '埃及', gold: 0, silver: 2, copper: 0, value: 2},
    {name: '斯洛伐克', gold: 0, silver: 1, copper: 3, value: 4},
    {name: '比利時', gold: 0, silver: 1, copper: 2, value: 3},
    {name: '芬蘭', gold: 0, silver: 1, copper: 2, value: 3},
    {name: '亞美尼亞', gold: 0, silver: 1, copper: 2, value: 3},
    {name: '馬來西亞', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '中華臺北', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '愛沙尼亞', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '保加利亞', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '印度尼西亞', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '波多黎各', gold: 0, silver: 1, copper: 1, value: 2},
    {name: '黑山', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '博茨瓦納', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '塞浦路斯', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '葡萄牙', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '加蓬', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '危地馬拉', gold: 0, silver: 1, copper: 0, value: 1},
    {name: '卡塔爾', gold: 0, silver: 0, copper: 2, value: 2},
    {name: '新加坡', gold: 0, silver: 0, copper: 2, value: 2},
    {name: '希臘', gold: 0, silver: 0, copper: 2, value: 2},
    {name: '摩爾多瓦', gold: 0, silver: 0, copper: 2, value: 2},
    {name: '巴林', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '塔吉克斯坦', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '中國香港', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '摩洛哥', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '沙特阿拉伯', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '科威特', gold: 0, silver: 0, copper: 1, value: 1},
    {name: '阿富汗', gold: 0, silver: 0, copper: 1, value: 1}
    ],
// 中國數據
 chinaData:[
{name: '北京',value: Math.round(Math.random()*100)},
{name: '天津',value: Math.round(Math.random()*100)},
{name: '上海',value: Math.round(Math.random()*100)},
{name: '重慶',value: Math.round(Math.random()*100)},
{name: '河北',value: Math.round(Math.random()*100)},
{name: '河南',value: Math.round(Math.random()*100)},
{name: '雲南',value: Math.round(Math.random()*100)},
{name: '遼寧',value: Math.round(Math.random()*100)},
{name: '黑龍江',value: Math.round(Math.random()*100)},
{name: '湖南',value: Math.round(Math.random()*100)},
{name: '安徽',value: Math.round(Math.random()*100)},
{name: '山東',value: Math.round(Math.random()*100)},
{name: '新疆',value: Math.round(Math.random()*100)},
{name: '江蘇',value: Math.round(Math.random()*100)},
{name: '浙江',value: Math.round(Math.random()*100)},
{name: '江西',value: Math.round(Math.random()*100)},
{name: '湖北',value: Math.round(Math.random()*100)},
{name: '廣西',value: Math.round(Math.random()*100)},
{name: '甘肅',value: Math.round(Math.random()*100)},
{name: '山西',value: Math.round(Math.random()*100)},
{name: '內蒙古',value: Math.round(Math.random()*100)},
{name: '陝西',value: Math.round(Math.random()*100)},
{name: '吉林',value: Math.round(Math.random()*100)},
{name: '福建',value: Math.round(Math.random()*100)},
{name: '貴州',value: Math.round(Math.random()*100)},
{name: '廣東',value: Math.round(Math.random()*100)},
{name: '青海',value: Math.round(Math.random()*100)},
{name: '西藏',value: Math.round(Math.random()*100)},
{name: '四川',value: Math.round(Math.random()*100)},
{name: '寧夏',value: Math.round(Math.random()*100)},
{name: '海南',value: Math.round(Math.random()*100)},
{name: '臺灣',value: Math.round(Math.random()*100)},
{name: '香港',value: Math.round(Math.random()*100)},
{name: '澳門',value: Math.round(Math.random()*100)}
    ],
 // 北京數據
beijingData:[
{name: '東城區',value: 18163,},
{name: '西城區',value: 22036,},
{name: '海淀區',value: 39},
{name: '朝陽區',value: 48},
{name: '石景山區',value: 15},
{name: '大興區',value: 26},
{name: '門頭溝區',value: 11},
{name: '昌平區',value: 20},
{name: '通州區',value: 51},
{name: '房山區',value: 23},
{name: '豐臺區',value: 23}, 
{name: '順義區',value: 17}, 
{name: '懷柔區',value: 21}, 
{name: '密雲區',value: 18}, 
{name: '延慶區',value: 22}, 
{name: '平谷區',value: 16}
    ],  
    // 重慶數據
chongqingData:[
{name: '萬州區',value: 56}, 
{name: '開州區',value: 18},
{name: '北碚區',value: 18},
{name: '南川區',value: 10},
{name: '忠縣',value: 15},
{name: '雲陽縣',value: 18},
{name: '兩江新區',value: 13}, 
{name: '長壽區',value: 12}, 
{name: '石柱土家族自治縣',value: 12},
{name: '酉陽土家族苗族自治縣',value: 12}, 
{name: '大渡口區',value: 7}, 
{name: '渝北區',value: 12}, 
{name: '江北區',value: 18}, 
{name: '九龍坡區',value: 15}, 
{name: '合川區',value: 9}, 
{name: '墊江縣',value: 13}, 
{name: '巫山縣',value: 7},
{name: '巫溪縣',value: 11}, 
{name: '綦江區',value: 10}, 
{name: '璧山區',value: 8}, 
{name: '奉節縣',value: 9}, 
{name: '永川區',value: 3}, 
{name: '豐都縣',value: 6}, 
{name: '江津區',value: 3}, 
{name: '銅梁區',value: 7}, 
{name: '潼南區',value: 4}, 
{name: '涪陵區',value: 2}, 
{name: '巴南區',value: 3}, 
{name: '大足區',value: 7}, 
{name: '梁平縣',value: 3},
{name: '城口縣',value: 2}, 
{name: '秀山土家族苗族自治縣',value: 1}, 
{name: '黔江區',value: 2}, 
{name: '南岸區',value: 7}, 
{name: '武隆縣',value: 1}, 
{name: '渝中區',value: 13}, 
{name: '榮昌區',value: 7}, 
{name: '沙坪壩區',value: 2}, 
{name: '彭水苗族土家族自治縣',value: 2}
    ],
    // 上海數據
 shanghaiData:[
{name: '黃浦區',value: 219}, 
{name: '徐彙區',value: 339}, 
{name: '長寧區',value: 412}, 
{name: '靜安區',value: 429}, 
{name: '普陀區',value: 389}, 
{name: '閘北區',value: 352}, 
{name: '虹口區',value: 329}, 
{name: '楊浦區',value: 532}, 
{name: '閔行區',value: 299}, 
{name: '寶山區',value: 139}, 
{name: '嘉定區',value: 440}, 
{name: '浦東新區',value: 89}, 
{name: '金山區',value: 652}, 
{name: '松江區',value: 415}, 
{name: '青浦區',value: 329}, 
{name: '奉賢區',value: 752}, 
{name: '崇明區',value: 399}
     ],
    //  天津數據
tianjinData:[
{name:'和平區', value: 199},
{name:'河東區', value: 39},         
{name:'河西區', value: 152},
{name:'南開區', value: 299},
{name:'河北區', value: 89},
{name:'紅橋區', value: 52},
{name:'塘沽區', value: 9},
{name:'漢沽區', value: 352},
{name:'大港區', value: 99},
{name:'東麗區', value: 39},
{name:'西青區', value: 480},
{name:'津南區', value: 481},
{name:'北辰區', value: 482},
{name:'武清區', value: 483},
{name:'寶坻區', value: 484},
{name:'寧河區', value: 485},
{name:'靜海區', value: 486},
{name:'薊州區', value: 487},
{name:'濱海新區', value: 487},
        ],
  // 江北區
jiangbeiData:[{
  name:'江北區',value:80
 }],
};
  },
  created(){
//   循環註冊地圖
for (let index in this.jsonMap) {
    this.$echarts.registerMap(index, this.jsonMap[index])
    }; 
},
   mounted(){
//    初始化地圖
 this.chinaConfigure(this.value);
 },
  //   更新數據
 watch:{
value(newVal){
  this.myChart.dispose();
  this.chinaConfigure(this.value);
}
 },
 //銷燬地圖實例
  beforeDestroy() {
if (!this.myChart) {
  return;
}
this.myChart.dispose();
this.myChart = null;
 },
 methods:{
chinaConfigure(area) {
     this.myChart = this.$echarts.init(document.getElementById("map")); //這裏是爲了獲得容器所在位置        
     window.onresize = this.myChart.resize;
     let option={ // 進行相關配置
      backgroundColor: "#02AFDB",
      tooltip: {}, // 鼠標移到圖裏面的浮動提示框
      visualMap: {
        // max: 110,
        calculable: true,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
              },
    series: [{
    type: 'map',
    map: area,
    data: area=='world'?this.worldData:area=='中國'?this.chinaData:area=='重慶'?this.chongqingData:area=='北京'?this.beijingData:area=='上海'?this.shanghaiData:area=='天津'?this.tianjinData:area=='江北區'?this.jiangbeiData:[],
    nameMap: area=='world'?this.nameMap:{}
}]
    }
    this.myChart.setOption(option,true);
    this.myChart.on('click', params => { // 點擊函數
    this.value=params.name
    this.myChart.setOption(option,true);
    }) 
  },
 }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map-content {
 position: relative;
 width: 100%;
 height: 100%;
}
>>>.el-select{
 position: absolute;
 left: 20px;
 top:20px;
  }
 #map{
position: absolute;
width: 100%;
height: 100%;
}
</style>

大功告成

項目地址

https://github.com/18662582256/echarts_map

最後分享一個Echarts 圖表案例的網站吧

https://www.isqqw.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章