在vue中使用highmaps並引入proj4js

最近公司有個需求，需要在中國地圖上顯示各省，市/直轄市，區/縣等顯示使用者使用量，本來有兩種實現方式，但設計圖是採用氣泡圖形式展現的，所以就研究了一下highcharts的氣泡圖

demo效果圖如下：

在vue專案中使用氣泡圖碰到了兩個問題：

1、使用氣泡圖需要用到proj4.js,但是在vue中引入時卻報錯

highcharts error #21: www.highcharts.com/errors/21

所以說引入失敗了

2、uncaught (in promise) referenceerror: highcharts is not defined

這個錯誤是同時使用多彩顏色軸和氣泡圖時產生的，（本來使用多彩顏色軸是可以直接區分使用者分布的）

多彩顏色軸demo效果圖：

既然proj4.js庫匯入失敗，且highcharts is not defined，那麼就去highmaps裡面找找到底是**用到了；

分析highmaps.js原始碼，發現只有四個地方用到了proj4, 而且proj4這個方法掛載在h這個物件上；

追本溯源，發現c.win代表的就是window物件，那麼這就好辦了！

*同時也發現highcharts這個物件也是掛載在window物件上

在引入highmaps.js前，引入proj4.js，並且掛載到window物件上，

import proj4 from '@/common/js/highcharts/proj4.js';

window['proj4'] = proj4;
import highmaps from '@/common/js/highcharts/highmaps.js';

import proj4 from '@/common/js/highcharts/proj4.js';

import highcharts from '@/common/js/highcharts/highcharts.js';
window['proj4'] = proj4;
window['highcharts'] = highcharts ;
import highmaps from '@/common/js/highcharts/highmaps.js';

最終效果圖：

最後發現多彩顏色軸的顏色設定會覆蓋掉氣泡圖的顏色，暫時還沒找到解決辦法~~~~

在Vue中使用Sass

sass 是什麼？sass又稱scss，它是css預處理之一。它在css語法的基礎上增加了變數 巢狀 混合巨集 繼承 佔位符等等高階功能。那什麼是css預處理器呢？簡單理解就是,css預處理是一種專門的程式語言，通過該語言進行web頁面設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器...

在vue中使用wowjs

1 安裝依賴 npm install wowjs s 2 main.js中引入 引入animate.css，安裝wowjs之後，直接引入 import animate.css 3 在需要使用wowjs的元件中使用 在標籤上新增動畫的類名 data wow duration 動畫持續時間 data w...

在Vue中使用樣式

一 vue中通過屬性繫結為元素設定class樣式 方式一 直接傳遞乙個陣列,class要用v bind做資料繫結 方式二 三元表示式 方式三 陣列中巢狀物件,提高 的可讀性 方式四 在為 class 使用v bind 繫結物件的時候，物件的屬性是類名，屬性可以帶或者不帶引號都可以 class h2 ...