以上就是成果圖坟漱,
苦于不會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制作地圖就是這么簡單的。