記一次用echarts創(chuàng)建地圖的經(jīng)歷

制作完成的溫州市地圖

以上就是成果圖坟漱,
苦于不會echarts慨代,第一次用echarts創(chuàng)建地圖也是花了不少精力啸如,希望此文能對一些初學echarts侍匙,用echarts創(chuàng)建地圖的朋友有所幫助叮雳。
用echarts制作地圖,我們需要3個js帘不,兩個官方下載的js:echarts.min.js和jquery.min.js(這個去官方下載就好)
地圖.js (這個需要我們自己制作) 制作過程我在別人的CSDN上看到一個很簡潔明了的一篇,我這里附上超鏈接寞焙,就不做多說互婿,地區(qū)的json制作成可使用的js辽狈。順便附上各地區(qū)的json數(shù)據(jù),這個數(shù)據(jù)有點老,不過若是不需要嚴格規(guī)范的話刮萌,也是可以拿來使用的。
準備材料都準備好了着茸,那接下來就是動手的時候。
附上代碼

 // 建立地圖
    var myChart1 = echarts.init(document.getElementById('echartMap'));
    var option = {
        tooltip: {
            show: true,
            trigger: 'item',
            triggerOn: 'click',
            formatter: "名稱:元扔<br />坐標:{c}"
        },
        series: [{
            label: {//地圖上字體樣式的修改
                normal: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                }
            },
            itemStyle:{//地圖樣式的修改
                normal:{
                    label:{show:true},
                    areaColor:'#3366ff',
                    borderColor: '#97FFFF'
                },
                emphasis:{label:{show:true}}
            },
            type: 'map',//標名是個地圖類
            map:'溫州',//這里和你制作的地圖.js里面的echarts.registerMap()函數(shù)的第一個參數(shù)對上
            data:[{name: '蒼南縣', value: 20057.34}],//data內(nèi)是你需要顯示的數(shù)據(jù)
        }
        ]
    };
    myChart1.setOption(option);

好吧澎语,梳理之后用echarts制作地圖就是這么簡單的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末擅羞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子召烂,更是在濱河造成了極大的恐慌,老刑警劉巖娃承,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異酗昼,居然都是意外死亡梳猪,警方通過查閱死者的電腦和手機麻削,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門春弥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人匿沛,你說我怎么就攤上這事扫责√雍簦” “怎么了借帘?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵淌铐,是天一觀的道長。 經(jīng)常有香客問我腿准,道長,這世上最難降的妖魔是什么吐葱? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮弟跑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘孟辑。我一直安慰自己,他們只是感情好炭玫,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布貌虾。 她就那樣靜靜地躺著吞加,像睡著了一般尽狠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上袄膏,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機與錄音平项,去河邊找鬼赫舒。 笑死,一個胖子當著我的面吹牛心赶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播缨叫,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼耻姥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蒸健,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤婉商,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后丈秩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡饺著,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年肠牲,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片埂材。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖严拒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情裤唠,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布种蘸,位于F島的核電站竞膳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏坦辟。R本人自食惡果不足惜刊侯,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一滨彻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧亭饵,春花似錦、人聲如沸辜羊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽喜德。三九已至,卻和暖如春舍悯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背萌衬。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工秕豫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人混移。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像毁嗦,于是被迫代替她去往敵國和親回铛。 傳聞我的和親對象是個殘疾皇子狗准,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 【人物:A(女)B(男)】 【 關系:不詳】 【地點:遙遠】 【時間:深夜】 A:好想喝酒腔长,一醉方休免姿。 B:又怎么...
    何鵬在簡書閱讀 717評論 0 3
  • 重慶榕酒,它依山建筑是“山城”故俐,它云輕霧重是“霧都”紊婉,它夏長酷熱是“火爐”药版,風景秀美的城市喻犁。重慶小吃挺不錯,吃貨...
    余曉彤1998閱讀 326評論 0 0
  • 美好的一天開始了还栓! 邀請我圓滿可愛可親的天使團隊传轰,天使指導靈和高級智慧們加持我意識頻率快速揚升剩盒,無限的延展和拓展...
    白雪飄香閱讀 135評論 0 0
  • 我自詡不是一個健忘的人辽聊,但我確實會忘掉一些事情。比如跟匆,今天走在溫風習習的回家路上,我居然好像已經(jīng)忘了武漢的夏天是有...
    劉瀛州閱讀 159評論 0 0
  • 一直以來,我都是喜歡寫字的敛瓷,尤其之于感情,總是會用文字來開始或者結(jié)束一段情感呐籽。對于她,我是沒有過只言片語的庶橱,也曾許...
    開心就好_8375閱讀 559評論 38 25