vue echarts 画湖北省地图。默认已经 npm i echartr --save 过了哈~
// map.js
import * as echarts from 'echarts'
import hu from './hu.json'
export const drawMap = () =>{
// 默认地图是不显示的，需要再echarts 中注册一下才能能显示
echarts.registerMap('hubei',{geoJSON:hu})
let myChart = echarts.init(document.getElementById("map-chart"));
var mapBoxOption = {
tooltip: {
show: true,
padding: 10,
alwaysShowContent: true, // 是否永远显示tooltip
enterable: true,
transitionDuration: 1.5, // 移动动画时间，单位s
trigger: "item",
position: "top",
textStyle: {
color: "#fff"
},
backgroundColor: 'rgba(255,255,255,0)',//通过设置rgba调节背景颜色与透明度
formatter: function (val) {
let show = val.data.value || "无";
let html = `<div id='mapStoreClass' class='tip-part'><div>${val.name}</div><p>申请金额 <span class='one'>1000</span> 万</p><p>放款金额 <span class='two'>1000</span>万</p><p class='four'>放款笔数<span>4009</span>笔</p><p>申请笔数 <span class='four'>1356</span> 笔</p></div>`
return html
},
// extraCssText: "width:300px; height:180px;color:#999; border-radius:15px;"
},
geo: {
show: true,
map: 'hubei',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
regions:[
{name: '神农架林区',itemStyle:{
normal:{
opacity:1
}
}},
],
roam: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 0,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
type: "map",
map: "hubei",
coordinateSystem: 'geo',
zoom:1.2,
symbolSize: function (val) {
return 25;
},
encode: {
value: 2
},
label: {
normal: { //静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 12,
}
},
emphasis: { //动态展示的样式
color: '#fff',
},
},
itemStyle: {
normal: {
show: true, //默认是否显示
textStyle: {
color: '#000000'
},
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(94,164,247,1)'
}, {
offset: 0, color: 'rgba(94,164,247,1)'
}],
global: false
},
borderColor: '#404a59',
},
emphasis: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(90,246,247,1)'
}, {
offset: 0, color: 'rgba(90,246,247,0.7)'
}],
global: false
}
}
}, data: [
{name: '神农架林区', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '天门市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '襄阳市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '十堰市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '孝感市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '随州市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '黄冈市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '宜昌市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '荆门市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '武汉市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '鄂州市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '黄石市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '咸宁市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '仙桃市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '潜江市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '荆州市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '恩施土家族苗族自治州', value: 47.9, lng: 116.849551, lat: 40.382999},
],
// data: _this.listArr
zlevel: 1
},
{
name: 'Top 5',
type: 'effectScatter',
map: "湖北",
coordinateSystem: 'geo',
data: [
{name: '神农架林区', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '天门市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '襄阳市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '十堰市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '孝感市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '随州市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '黄冈市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '宜昌市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '荆门市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '武汉市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '鄂州市', value: 31.4, lng: 110.511625, lat: 31.544449},
{name: '黄石市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '咸宁市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '仙桃市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '潜江市', value: 47.9, lng: 116.849551, lat: 40.382999},
{name: '荆州市', value: 38.4, lng: 116.63853, lat: 40.322563},
{name: '恩施土家族苗族自治州', value: 47.9, lng: 116.849551, lat: 40.382999},
],
symbolSize: function (val) {
return 25;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
}
// 使用制定的配置项和数据显示图表
myChart.setOption(mapBoxOption);
// echart图表自适应
window.addEventListener("resize", function () {
myChart.resize();
});
}
在页面中，这样使用：
import * as dmp from './map'
onMounted(() =>{
dmp.drawMap()
})
<div style="background: none;width:100%;height: 25rem;margin-top: -3.5rem;" id="map-chart"></div>
地图的json数据，来自：datav.aliyun.com/portal/scho…
实现方式参考了：gitee.com/weather0118…
