spring boot vue2 echarts5 实现中国地图各个省份数据统计

首先默认大家都会 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 {List economize();}

mapper.xml  这一部分主要定义的是上面接口的抽象方法，缺失 xml 文件的头样式和 namespace

    
        SELECT source, COUNT(*) as count FROM weibo GROUP BY source;
// 注意 sql 的写法，每个人的项目逻辑都是不同的
    

contorller 层

@CrossOrigin
@RestController
@RequestMapping("/weibo")
public class weiboController {

    @Resource
    private weiboMapper echartsMapper;

    @GetMapping("/economize")
    public List economize(){List weibos = echartsMapper.economize();
        return weibos;

    }
}

这是返回的数据格式

现在是 vue 的编写

成果展示

有几个的注意的点

这是获取到的后端的数据，必须放在 mounted（）函数里面，不然数据只会渲染一次

这个文件必须拥有 

 在这个链接下面

DataV.GeoAtlas 地理小工具系列 (aliyun.com)

下载重命名为 china.json

 有问题欢迎讨论

项目参考文章

(7 条消息) vue+echarts5 实现中国地图_echarts5 地图_易 de 的博客 -CSDN 博客