echarts是最熟悉不過的第三方圖表庫，里面有n種圖表趣些，但是目前官方已經(jīng)沒有中國地圖所以記錄一次使用中國地圖的屬性瓷耙，網(wǎng)絡(luò)上有n篇這種文章太伊，但是作為學習者還是總結(jié)記錄一下
1、下載引入js
雖然項目是基于vue的,但是前后端拿的是一個不知名的開源項目改的,這個項目對echarts有一定的限制箫锤，它采用的是導入echart.js的方式贬蛙，但是因為導入的是echarts簡化版，所以我去找了個完整版的echarts.js[http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js]和china.js[http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js]
下載的的echarts.js南海諸島顯示有亂碼,所以還是去了官方案例source下面下載的echarts.min.js.
image
2麻汰、地圖使用
使用很簡單直接貼代碼速客，一目了然
<div>
<div id="china_map" style="height:400px"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
data: [
{name: '海門', value: 9},
{name: '鄂爾多斯', value: 12},
{name: '招遠', value: 12},
{name: '舟山', value: 12},
{name: '齊齊哈爾', value: 14},
{name: '鹽城', value: 15},
{name: '赤峰', value: 16},
],
geoCoordMap: {
'海門': [121.15, 31.89],
'鄂爾多斯': [109.781327, 39.608266],
'招遠': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齊齊哈爾': [123.97, 47.33],
'鹽城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青島': [120.33, 36.07],
'乳山': [121.52, 36.89],
'金昌': [102.188043, 38.520089]
}
}
},
computed: {},
mounted () {
this.initChannelChinaMap()
},
activated () {
},
filters: {},
methods: {
convertData () {
var res = []
for (var i = 0; i < this.data.length; i++) {
var geoCoord = this.geoCoordMap[this.data[i].name]
if (geoCoord) {
res.push({
name: this.data[i].name,
value: geoCoord.concat(this.data[i].value)
})
}
}
return res
},
randomValue () {
return Math.round(Math.random() * 1000)
},
initChannelChinaMap () {
let options = {
tooltip: {},
visualMap: {
show: false,
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['High', 'Low'],
seriesIndex: [1],
inRange: {
color: ['#29BFF7', '#fff']
},
calculable: true
},
geo: {
map: 'china',
roam: false,//是否可以拖拽放大
// regions: [
// {
// name: '南海諸島',
// value: 0,
// itemStyle: {
// normal: {
// opacity: 0,
// label: {
// show: false
// }
// }
// }
// }
// ],
zoom: 1.2,
label: {
show: false,
color: 'rgba(0,0,0,0.4)'
},
itemStyle: {
borderColor: '#cdccd0',
// normal: {
// areaColor: '#eff2fb'
// }
},
emphasis: {
itemStyle: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData(this.data),
encode: {
value: 2
},
symbolSize: 15,
symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate: 35,
label: {
formatter: '',
position: 'right',
show: false
},
itemStyle: {
color: '#F06C00'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '發(fā)布情況',
type: 'map',
geoIndex: 0,
data: [
{name: '北京', value: this.randomValue()},
{name: '天津', value: this.randomValue()},
{name: '上海', value: this.randomValue()},
{name: '福建', value: this.randomValue()},
{name: '貴州', value: this.randomValue()},
{name: '廣東', value: this.randomValue()},
{name: '青海', value: this.randomValue()},
{name: '西藏', value: this.randomValue()},
{name: '四川', value: this.randomValue()},
{name: '寧夏', value: this.randomValue()},
{name: '海南', value: this.randomValue()},
{name: '臺灣', value: this.randomValue()}
]
}
]
}
this.mapDivPie = echarts.init(
document.getElementById('china_map')
)
this.mapDivPie.setOption(options)
window.addEventListener('resize', () => {
this.mapDivPie.resize()
})
}
}
}
</script>
<style lang="scss" scope>
</style>
image
具體的地圖上的自定義圖標可以去iconfont網(wǎng)站上進行取
image
