如何在vue項目中使用Highmaps
-
- 功能需求
- 思路
- 分析
- 實作
-
- 第一步：引入
- 第二步：介紹一下這個world是個啥。
- 第三步：調用
- 注意點（十分重要）
- 寫在最後
功能需求
近日我接到了這麼一個需求，原型如下：
在系統中需要繪制一個圖表，世界地圖，由于我使用的是Hchatrs，是以我就去Hcharts的官網查找了一下，還真找到了：
接下來就是千篇一律的引入和調用API了，但是麻煩的來了：
我的項目是用vue寫的，但是官網的例子是基于JQuery的，這就很頭疼了，我不想在我的項目中引入JQuery，這會讓我的項目看起來比較雜亂，那沒辦法，繼續找文檔吧。找了一個多小時，看到很多要引入vue-highcharts什麼的但是最後也沒有實作，也沒找到什麼好的例子或者能實作的例子，哎，撸袖子自己幹吧。
思路
在四處碰壁之後我決定還是回到官網的示例，看看能不能把案例從JQuery上剝離出來，挂載到vue上，或者直接不基于任何架構實作，那麼下面就來分析實作吧。
分析
首先看到這行代碼：
這段看上去好像是擷取遠端資料的，我不要，删。然後剩下這段：
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
title : {
text : 'Population density by country (/km²)'
},
mapNavigation: {
enabled: true
},
legend: {
title: {
text: 'Individuals per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14
},
colorAxis: {
dataClasses: [{
to: 3
}, {
from: 3,
to: 10
}, {
from: 10,
to: 30
}, {
from: 30,
to: 100
}, {
from: 100,
to: 300
}, {
from: 300,
to: 1000
}, {
from: 1000
}]
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
animation: true,
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
},
}
看到這段：
我大概知道了，highcharts添加到了JQuery的成員函數裡了，以便JQuery的執行個體可以直接調用highcharts方法，那麼把這裡改改是不是就可以了呢
實作
那麼，話不多說，咱們直接開始吧：
第一步：引入
import Highcharts from 'highcharts'
import Highmaps from 'highcharts/modules/map'
//注意，這裡的import world from './world'是核心代碼，是個啥我将在下面繼續介紹
import world from './world'
//注意：這是API調用方法，千萬不要忘記寫哦
Highmaps(Highcharts);
第二步：介紹一下這個world是個啥。
這是一個js檔案：
我放在了我目前項目的檔案夾内，當然你可以放在你項目中的任何地方，注意引用的時候的路徑就行了。那麼它從哪來的呢，這是我從官網上的代碼copy出來的：
這個js檔案是繪制世界地圖的基礎資料元件，也就是說咱們繪制的圖表上的一塊一塊的區域渲染，就是通過這個world.js檔案來的，當然，如果你需要的不是世界地圖，而是中國或者其他某個國家的地圖，那麼官網還有全套 Highmaps 地圖資料集供您下載下傳，這裡我就以官網案例world.js來繼續進行叙述了。
這個js檔案打開是這樣的：
那麼問題來了，這個Highcharts.maps[“custom/world”]又是個啥,檢視一下案例源碼可以看到這樣一行代碼：
哦~原來是這裡需要調用，但是這個js檔案我不能直接拿來用，因為引入的方式原因會報錯Highcharts找不到，那麼怎麼辦呢，簡單，我把這個對象export default出來不就行了嘛：
于是就出現了我上文說的
然後把這個world再放到案例需要引用的地方：
咱們接着往下走。
第三步：調用
這個調用很折磨我，因為我不知道之後如何調用，我使用了傳統的調用方法：
但是好像并不起作用，直到我翻到了一篇文檔：
//此處的this.chartID就是你放置圖表的父盒子容器的id，this.option是官網copy出來的option，
//當然，以後要更換為你自己的option
HighCharts.Map(this.chartID, this.option)
好吧，原來是這樣調用。下面我們來看一下效果吧：
OK！大功告成！
注意點（十分重要）
1：必須抽離chart元件，也就是說chart圖表必須是一個元件，而傳入的option需要是它的父級元件傳入，至于如何傳入，可以采用vue提供的props也可以使用vuex，給大家貼一下我的代碼調用方式：
2 後端渲染的資料如何渲染在前端？
在這裡，把這個data按照後端傳給你的資料修改為官網的格式就行了。下面貼一下我的修改後的option：
this.option = {
chart : {
borderWidth : 1,
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
title : {
text : ''
},
mapNavigation: {
enabled: true
},
legend: {
title: {
text: '',
style: {
color: 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14
},
colorAxis: {
dataClasses: [{
to: 3
}, {
from: 3,
to: 10
}, {
from: 10,
to: 30
}, {
from: 30,
to: 100
}, {
from: 100,
to: 300
}, {
from: 300,
to: 1000
}, {
from: 1000
}]
},
series : [{
data : [{"code":"COUNTRY CODE","value":null,"name":"Country name"},{"code":"AF","value":53,"name":"Afghanistan"},{"code":"AL","value":117,"name":"Albania"},{"code":"DZ","value":15,"name":"Algeria"},{"code":"AS","value":342,"name":"American Samoa"},{"code":"AD","value":181,"name":"Andorra"},{"code":"AO","value":15,"name":"Angola"},{"code":"AI","value":202,"name":"Antigua and Barbuda"},{"code":"AR","value":15,"name":"Argentina"},{"code":"AM","value":109,"name":"Armenia"},{"code":"AW","value":597,"name":"Aruba"},{"code":"AU","value":3,"name":"Australia"},{"code":"AT","value":102,"name":"Austria"},{"code":"AZ","value":110,"name":"Azerbaijan"},{"code":"BS","value":34,"name":"Bahamas, The"},{"code":"BH","value":1660,"name":"Bahrain"},{"code":"BD","value":1142,"name":"Bangladesh"},{"code":"BB","value":636,"name":"Barbados"},{"code":"BY","value":47,"name":"Belarus"},{"code":"BE","value":359,"name":"Belgium"},{"code":"BZ","value":15,"name":"Belize"},{"code":"BJ","value":80,"name":"Benin"},{"code":"BM","value":1292,"name":"Bermuda"},{"code":"BT","value":19,"name":"Bhutan"},{"code":"BO","value":9,"name":"Bolivia"},{"code":"BA","value":73,"name":"Bosnia and Herzegovina"},{"code":"BW","value":4,"name":"Botswana"},{"code":"BR","value":23,"name":"Brazil"},{"code":"BN","value":76,"name":"Brunei Darussalam"},{"code":"BG","value":69,"name":"Bulgaria"},{"code":"BF","value":60,"name":"Burkina Faso"},{"code":"BI","value":326,"name":"Burundi"},{"code":"KH","value":80,"name":"Cambodia"},{"code":"CM","value":41,"name":"Cameroon"},{"code":"CA","value":4,"name":"Canada"},{"code":"CV","value":123,"name":"Cape Verde"},{"code":"KY","value":234,"name":"Cayman Islands"},{"code":"CF","value":7,"name":"Central African Republic"},{"code":"TD","value":9,"name":"Chad"},{"code":"CL","value":23,"name":"Chile"},{"code":"CN","value":143,"name":"China"},{"code":"CO","value":42,"name":"Colombia"},{"code":"KM","value":395,"name":"Comoros"},{"code":"CD","value":29,"name":"Congo, Dem. Rep."},{"code":"CG","value":12,"name":"Congo, Rep."},{"code":"CR","value":91,"name":"Costa Rica"},{"code":"CI","value":62,"name":"Cote d'Ivoire"},{"code":"HR","value":79,"name":"Croatia"},{"code":"CU","value":106,"name":"Cuba"},{"code":"CW","value":321,"name":"Curacao"},{"code":"CY","value":119,"name":"Cyprus"},{"code":"CZ","value":136,"name":"Czech Republic"},{"code":"DK","value":131,"name":"Denmark"},{"code":"DJ","value":38,"name":"Djibouti"},{"code":"DM","value":90,"name":"Dominica"},{"code":"DO","value":205,"name":"Dominican Republic"},{"code":"EC","value":58,"name":"Ecuador"},{"code":"EG","value":81,"name":"Egypt, Arab Rep."},{"code":"SV","value":299,"name":"El Salvador"},{"code":"GQ","value":25,"name":"Equatorial Guinea"},{"code":"ER","value":52,"name":"Eritrea"},{"code":"EE","value":32,"name":"Estonia"},{"code":"ET","value":83,"name":"Ethiopia"},{"code":"FO","value":35,"name":"Faeroe Islands"},{"code":"FJ","value":47,"name":"Fiji"},{"code":"FI","value":18,"name":"Finland"},{"code":"FR","value":118,"name":"France"},{"code":"PF","value":74,"name":"French Polynesia"},{"code":"GA","value":6,"name":"Gabon"},{"code":"GM","value":173,"name":"Gambia, The"},{"code":"GE","value":78,"name":"Georgia"},{"code":"DE","value":234,"name":"Germany"},{"code":"GH","value":107,"name":"Ghana"},{"code":"GR","value":88,"name":"Greece"},{"code":"GL","value":0,"name":"Greenland"},{"code":"GD","value":307,"name":"Grenada"},{"code":"GU","value":333,"name":"Guam"},{"code":"GT","value":134,"name":"Guatemala"},{"code":"GN","value":41,"name":"Guinea"},{"code":"GW","value":54,"name":"Guinea-Bissau"},{"code":"GY","value":4,"name":"Guyana"},{"code":"HT","value":363,"name":"Haiti"},{"code":"HN","value":68,"name":"Honduras"},{"code":"HK","value":6783,"name":"Hong Kong SAR, China"},{"code":"HU","value":112,"name":"Hungary"},{"code":"IS","value":3,"name":"Iceland"},{"code":"IN","value":394,"name":"India"},{"code":"ID","value":132,"name":"Indonesia"},{"code":"IR","value":45,"name":"Iran, Islamic Rep."},{"code":"IQ","value":73,"name":"Iraq"},{"code":"IE","value":65,"name":"Ireland"},{"code":"IM","value":145,"name":"Isle of Man"},{"code":"IL","value":352,"name":"Israel"},{"code":"IT","value":206,"name":"Italy"},{"code":"JM","value":250,"name":"Jamaica"},{"code":"JP","value":350,"name":"Japan"},{"code":"JO","value":69,"name":"Jordan"},{"code":"KZ","value":6,"name":"Kazakhstan"},{"code":"KE","value":71,"name":"Kenya"},{"code":"KI","value":123,"name":"Kiribati"},{"code":"KP","value":202,"name":"Korea, Dem. Rep."},{"code":"KR","value":504,"name":"Korea, Rep."},{"code":"XK","value":167,"name":"Kosovo"},{"code":"KW","value":154,"name":"Kuwait"},{"code":"KG","value":28,"name":"Kyrgyz Republic"},{"code":"LA","value":27,"name":"Lao PDR"},{"code":"LV","value":36,"name":"Latvia"},{"code":"LB","value":413,"name":"Lebanon"},{"code":"LS","value":72,"name":"Lesotho"},{"code":"LR","value":41,"name":"Liberia"},{"code":"LY","value":4,"name":"Libya"},{"code":"LI","value":225,"name":"Liechtenstein"},{"code":"LT","value":53,"name":"Lithuania"},{"code":"LU","value":195,"name":"Luxembourg"},{"code":"MO","value":19416,"name":"Macao SAR, China"},{"code":"MK","value":82,"name":"Macedonia, FYR"},{"code":"MG","value":36,"name":"Madagascar"},{"code":"MW","value":158,"name":"Malawi"},{"code":"MY","value":86,"name":"Malaysia"},{"code":"MV","value":1053,"name":"Maldives"},{"code":"ML","value":13,"name":"Mali"},{"code":"MT","value":1291,"name":"Malta"},{"code":"MH","value":300,"name":"Marshall Islands"},{"code":"MR","value":3,"name":"Mauritania"},{"code":"MU","value":631,"name":"Mauritius"},{"code":"YT","value":552,"name":"Mayotte"},{"code":"MX","value":58,"name":"Mexico"},{"code":"FM","value":159,"name":"Micronesia, Fed. Sts."},{"code":"MD","value":124,"name":"Moldova"},{"code":"MC","value":17704,"name":"Monaco"},{"code":"MN","value":2,"name":"Mongolia"},{"code":"ME","value":47,"name":"Montenegro"},{"code":"MA","value":72,"name":"Morocco"},{"code":"MZ","value":30,"name":"Mozambique"},{"code":"MM","value":73,"name":"Myanmar"},{"code":"NA","value":3,"name":"Namibia"},{"code":"NP","value":209,"name":"Nepal"},{"code":"NL","value":492,"name":"Netherlands"},{"code":"NC","value":14,"name":"New Caledonia"},{"code":"NZ","value":17,"name":"New Zealand"},{"code":"NI","value":48,"name":"Nicaragua"},{"code":"NE","value":12,"name":"Niger"},{"code":"NG","value":174,"name":"Nigeria"},{"code":"MP","value":132,"name":"Northern Mariana Islands"},{"code":"NO","value":16,"name":"Norway"},{"code":"OM","value":9,"name":"Oman"},{"code":"PK","value":225,"name":"Pakistan"},{"code":"PW","value":45,"name":"Palau"},{"code":"PA","value":47,"name":"Panama"},{"code":"PG","value":15,"name":"Papua New Guinea"},{"code":"PY","value":16,"name":"Paraguay"},{"code":"PE","value":23,"name":"Peru"},{"code":"PH","value":313,"name":"Philippines"},{"code":"PL","value":126,"name":"Poland"},{"code":"PT","value":116,"name":"Portugal"},{"code":"PR","value":449,"name":"Puerto Rico"},{"code":"WA","value":152,"name":"Qatar"},{"code":"RO","value":93,"name":"Romania"},{"code":"RU","value":9,"name":"Russian Federation"},{"code":"RW","value":431,"name":"Rwanda"},{"code":"WS","value":65,"name":"Samoa"},{"code":"SM","value":526,"name":"San Marino"},{"code":"ST","value":172,"name":"Sao Tome and Principe"},{"code":"SA","value":14,"name":"Saudi Arabia"},{"code":"SN","value":65,"name":"Senegal"},{"code":"RS","value":83,"name":"Serbia"},{"code":"SC","value":188,"name":"Seychelles"},{"code":"SL","value":82,"name":"Sierra Leone"},{"code":"SG","value":7252,"name":"Singapore"},{"code":"SK","value":113,"name":"Slovak Republic"},{"code":"SI","value":102,"name":"Slovenia"},{"code":"SB","value":19,"name":"Solomon Islands"},{"code":"SO","value":15,"name":"Somalia"},{"code":"ZA","value":41,"name":"South Africa"},{"code":"SS","value":null,"name":"South Sudan"},{"code":"ES","value":92,"name":"Spain"},{"code":"LK","value":333,"name":"Sri Lanka"},{"code":"KN","value":202,"name":"St. Kitts and Nevis"},{"code":"LC","value":285,"name":"St. Lucia"},{"code":"MF","value":556,"name":"St. Martin (French part)"},{"code":"VC","value":280,"name":"St. Vincent and the Grenadines"},{"code":"SD","value":18,"name":"Sudan"},{"code":"SR","value":3,"name":"Suriname"},{"code":"SZ","value":69,"name":"Swaziland"},{"code":"SE","value":23,"name":"Sweden"},{"code":"CH","value":196,"name":"Switzerland"},{"code":"SY","value":111,"name":"Syrian Arab Republic"},{"code":"TJ","value":49,"name":"Tajikistan"},{"code":"TZ","value":51,"name":"Tanzania"},{"code":"TH","value":135,"name":"Thailand"},{"code":"TP","value":76,"name":"Timor-Leste"},{"code":"TG","value":111,"name":"Togo"},{"code":"TO","value":145,"name":"Tonga"},{"code":"TT","value":261,"name":"Trinidad and Tobago"},{"code":"TN","value":68,"name":"Tunisia"},{"code":"TR","value":95,"name":"Turkey"},{"code":"TM","value":11,"name":"Turkmenistan"},{"code":"TC","value":40,"name":"Turks and Caicos Islands"},{"code":"TV","value":328,"name":"Tuvalu"},{"code":"UG","value":170,"name":"Uganda"},{"code":"UA","value":79,"name":"Ukraine"},{"code":"AE","value":90,"name":"United Arab Emirates"},{"code":"UK","value":257,"name":"United Kingdom"},{"code":"US","value":34,"name":"United States"},{"code":"UY","value":19,"name":"Uruguay"},{"code":"UZ","value":66,"name":"Uzbekistan"},{"code":"VU","value":20,"name":"Vanuatu"},{"code":"VE","value":33,"name":"Venezuela, RB"},{"code":"VN","value":280,"name":"Vietnam"},{"code":"VI","value":314,"name":"Virgin Islands (U.S.)"},{"code":"PS","value":690,"name":"West Bank and Gaza"},{"code":"EH","value":2,"name":"Western Sahara"},{"code":"YE","value":46,"name":"Yemen, Rep."},{"code":"ZM","value":17,"name":"Zambia"},{"code":"ZW","value":32,"name":"Zimbabwe"}],
mapData: world,
joinBy: ['iso-a2', 'code'],
animation: true,
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
}
寫在最後
關于如何在vue中使用highmaps是個讓人比較頭疼的問題，如果您看完這篇文檔還是有些許問題，歡迎留言給我。希望這篇文檔能給您帶來幫助，感謝閱讀