echarts是最熟悉不过的第三方图表库，里面有n种图表，但是目前官方已经没有中国地图所以记录一次使用中国地图的属性，网络上有n篇这种文章，但是作为学习者还是总结记录一下
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: '{b}',
position: 'right',
show: false
},
itemStyle: {
color: '#F06C00'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '发布情况',
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网站上进行取
image
网友评论