首先默认大家都会springboot 和vue echarts axios环境搭建，
这是MySQL中的数据
springboot部分
entity 实体类
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Economize {
private String source;
private int count;
}
mapper层
@Mapper
public interface weiboMapper extends BaseMapper<Weibo> {
List<Economize> economize();
}mapper.xml 这一部分主要定义的是上面接口的抽象方法，缺失xml文件的头样式和namespace
<select id="economize" resultType="com.example.demo.entity.Economize">
SELECT source, COUNT(*) as count FROM weibo GROUP BY source;
//注意sql的写法，每个人的项目逻辑都是不同的
</select>contorller层
@CrossOrigin
@RestController
@RequestMapping("/weibo")
public class weiboController {
@Resource
private weiboMapper echartsMapper;
@GetMapping("/economize")
public List<Economize> economize(){
List<Economize> weibos = echartsMapper.economize();
return weibos;
}
}这是返回的数据格式
现在是vue的编写
<template>
<div>
<div ref="mapEcharts" class="map-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
name: "Map",
data() {
return {
timer: null,
seriesData: [],
map: null
}
},
mounted(){
},
created() {
},
mounted(){
axios.get('http://localhost:9090/weibo/economize')
.then(res => {
this.seriesData = res.data.map(comment => {
return {
name: comment.source,
value: comment.count // 每个词的值都为1
}
})
// console.log(this.seriesData)
this.initMapEcharts();
})
},
methods: {
initMapEcharts() {
// 获取地图数据
// 将下载后的json文件放置/public目录下
axios.get('/china.json').then(res => {
console.log(res);
// 使用数据注册地图
echarts.registerMap('china', res.data)
this.$nextTick(() => {
// 初始化地图
this.map = echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项
const option = {
// 标题
title: {
text:"分布地图",
left: 'center',
// subtext: "下载链接",
sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 悬浮窗
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
// 图例
visualMap: {
min: 0,
max: 40,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// 要显示的散点数据
series: [
{
type: 'map',
map: 'china',
// 这是要显示的数据
data: this.seriesData,
// 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
nameMap: {
// '北京市': "北京重命名",
// "天津市": '天津重命名'
'西藏自治区':"西藏省",
'广西壮族自治区':"广西省",
'台湾省':"中国台湾省",
},
},
]
}
// 将配置应用到地图上
this.map.setOption(option)
// 设置定时器，自动循环触发tooltip悬浮窗事件
this.setTimer()
let that = this;
// 当鼠标在地图上时，停止自动tooltip事件
this.map.on('mouseover', {series: 0,}, function(params) {
that.clearTimer()
})
// 当鼠标移出地图后，再自动tooltip
this.map.on('mouseout', {series: 0}, function(params) {
that.setTimer()
})
})
})
},
setTimer() {
// 当前选中区域的下标
let curIndex = -1;
this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
const len = this.seriesData.length;
// dispatchAction是主动去触发echarts事件，取消高亮当前的数据图形
this.map.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curIndex
})
// 下一个选中区域的下标
curIndex = (curIndex + 1) % len;
// 高亮下一个数据图形
this.map.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
})
// 显示tooltip
this.map.dispatchAction({
type: 'showTip',
seriesIndex:0,
dataIndex: curIndex
})
}, 1000)
},
clearTimer() {
this.timer && clearInterval(this.timer)
},
},
beforeDestroy() {
this.clearTimer()
}
}
</script>
<style>
.map-echart {
height: 900px;
width: 900px;
}
</style>
成果展示
有几个的注意的点
这是获取到的后端的数据 ，必须放在mounted（）函数里面，不然数据只会渲染一次
这个文件必须拥有
在这个链接下面
DataV.GeoAtlas地理小工具系列 (aliyun.com)
下载重命名为china.json
有问题欢迎讨论
项目参考文章
(7条消息) vue+echarts5 实现中国地图_echarts5 地图_易de的博客-CSDN博客
