Echarts实现——中国地图
如下图：
使用Echarts进行地图绘制展示的时候，需要china.json；
举例在vue的项目中可以通过cnpm install echarts --save安装Echarts依赖；
引入：import china from ‘echarts/map/json/china.json’；
剩下的不多说了，直接上代码：
<template>
<div class="leftCard">
<div id="chinaMap" ref="chinaMap"></div>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
export default {
name:'leftCard',
data(){
return{
myChart:null,
dataList: [
{ name: "南海诸岛", value: 100, eventTotal:100, specialImportant:10, import:10, compare:10, common:40, specail:20 },
{ name: "北京", value: 540 },
{ name: "天津", value: 130 },
{ name: "上海", value: 400},
{ name: "重庆", value: 750},
{ name: "河北", value: 130},
{ name: "河南", value: 830},
{ name: "云南", value: 110 },
{ name: "辽宁", value: 19 },
{ name: "黑龙江", value: 150},
{ name: "湖南", value: 690 },
{ name: "安徽", value: 60 },
{ name: "山东", value: 39 },
{ name: "新疆", value: 452 },
{ name: "江苏", value: 31 },
{ name: "浙江", value: 104 },
{ name: "江西", value: 36 },
{ name: "湖北", value: 52},
{ name: "广西", value: 33 },
{ name: "甘肃", value: 73 },
{ name: "山西", value: 54 },
{ name: "内蒙古", value: 778},
{ name: "陕西", value: 22},
{ name: "吉林",value: 44 },
{ name: "福建",value: 18},
{ name: "贵州", value: 54},
{ name: "广东", value: 98},
{ name: "青海",value: 13},
{ name: "西藏", value: 0},
{ name: "四川", value: 44},
{ name: "宁夏", value: 42},
{ name: "海南", value: 22 },
{ name: "台湾", value: 23},
{ name: "香港",value: 25},
{ name: "澳门",value: 555}
]
}
},
created(){},
mounted(){
this.$nextTick(() =>{
this.initEchartMap();
})
},
methods:{
// 初始化地图
initEchartMap(){
this.$ECharts.registerMap('china', china) //这个特别重要
this.myChart = this.$ECharts.init(this.$refs.chinaMap, null, {renderer:'svg'});
this.myChart.off('click');
//echart 配制option
var options= {
tooltip: {
triggerOn: "mousemove", //mousemove、click
padding:8,
borderWidth:1,
borderColor:'#409eff',
backgroundColor:'rgba(255,255,255,0.7)',
textStyle:{
color:'#000000',
fontSize:13
},
formatter: function(e, t, n) {
let data = e.data;
let context = `
<div>
<p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
<p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
</div>
`
return context;
}
},
visualMap: {
show:true,
left: 26,
bottom: 40,
showLabel:true,
pieces: [
{
gte: 1000,
label: ">= 1000",
color: "#5475f5"
},
{
gte: 700,
lt: 999,
label: "700 - 999",
color: "#e6ac53"
},
{
gte: 500,
lt: 699,
label: "500 - 699",
color: "#9feaa5"
},
{
gte: 100,
lt:499,
label: "100 - 499",
color: "#85daef"
},
{
gte: 10,
lt: 99,
label: "10 - 99",
color: "#74e2ca"
},
{
lt:10,
label:'<10',
color: "#9fb5ea"
}
]
},
geo: {
map: "china",
scaleLimit: {
min: 1,
max: 2
},
zoom: 1,
top: 120,
layoutSize: "100%", //保持地图宽高比
label: {
normal: {
show:true,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
},
emphasis: {
show: false,
textStyle: {
color: "#F3F3F3"
}
}
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)",
areaColor: '#1955a4',
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [
{
name: "成果预览",
type: "map",
geoIndex: 0,
data: this.dataList
}
]
}
this.myChart.clear();
this.myChart.setOption(options);
this.myChart.resize();
//地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数 据；
this.myChart.on('click', function(params) {
console.log(params)
})
}
}
}
</script>
<style lang="less" scoped>
.leftCard{
width: 100%;
height: 100%;
#chinaMap{
width: 100%;
height: 100vh;
}
}
</style>
避坑：china.js 需要要进行引入；安装echarts中在5.0的版本以下的就可以获取到china.json文件（会出现地图不展示的bug问题）；
然后调用这个方法 this.$ECharts.registerMap('china', china)；
以上为个人在vue项目中的开发实战，欢迎大家来借鉴；记得收藏加关注哦；