<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="./echarts.js"></script>
<script src="./china.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
background: rgb(58, 4, 4);
display: flex;
justify-content: center;
align-items: center;
}
#main {
width: 80%;
height: 80%;
}
.re-load {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #fff;
z-index: 999;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div @click='initMap' id='main'></div>
<div @click='reLoad' class="re-load">
<i class="el-icon-refresh-right"></i>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#main',
data: function () {
return {
map: null,
myChart: null,
dataList: []
}
},
mounted() {
this.dataList = this.changeList();
this.myChart = echarts.init(document.getElementById('main'));
var option = {
//悬停提示
tooltip: {
formatter: function (params, ticket, callback) {
return params.seriesName + '<br />' + params.name + ':' + params.value + '吨/㎡';
}//数据格式化
},
//视图配置
visualMap: {
min: 0,
max: 150,
left: 'left',
top: 'bottom',
text: ['height', 'low'],//取值范围的文字
inRange: {
color: ['#fff', '#4f080d']//取值范围的颜色
},
show: true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom: 1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '降雨量',
type: 'map',
geoIndex: 0,
data: this.dataList
}
]
}
this.myChart.setOption(option);
// echart图表自适应
window.onresize = () => {
this.myChart.resize();
}
//点击右上角图标,刷新地图数据(非刷新页面)
$('.re-load').click(()=>{
this.dataList = this.changeList();
this.myChart.setOption({
series: {
data: this.dataList
}
});
});
},
methods: {
initMap() {
this.myChart.on('click', (param) => {
event.stopPropagation()// 阻止冒泡
this.$message.success(`${param.name}的降水量为: ${param.value} 吨/㎡`);
})
},
randomValue() {
return Math.round(Math.random() * 70);
},
changeList() {
var arr = [
{ 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() },
{ 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() },
{ 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() }
]
return arr;
}
}
})
</script>
</body>
</html>
echarts实现中国地图区域降水量显示
于 2020-03-19 14:13:03 首次发布