效果图：
使用series-map.data.itemStyle. color定义每个地区背景色
vue代码
<template> <div class="map"> <div id="frames_cont0" style="width: 100%;height: 100%;">div> div>template><script>export default { props:{ }, data() { return { }; }, methods: { async getDataInfo(){ const {data:res} = await this.$http.get("get_citylist"); this.change(res.content); }, change(datas){ var city_list=datas.city_list; var city_data=datas.city_data; var city='陕西省'; var chartDom = document.getElementById('frames_cont0'); var myChart = this.$echarts.init(chartDom); var option; myChart.showLoading(); this.$echarts.registerMap('Shaanxi', city_list); myChart.hideLoading(); option = { title: { text: city, textStyle:{ color:'#333' }, }, tooltip: { show: false, // 是否显示提示框 }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center' }, roam: true, // 滚轮滚动--放大或缩小 visualMap: { show: false, // 是否显示左侧控件 }, series: [ { name: city, type: 'map', mapType: 'Shaanxi', // 自定义扩展图表类型 label: {show: true,color: "#000" }, data: city_data } ], }; option && myChart.setOption(option); var that = this; myChart.on('click', function (params) { var group_id = params.data.group_id; console.log(group_id) that.$emit("changeGroupid", group_id); }); } }, watch: { }, mounted() { this.getDataInfo(); },}script><style> .map{ width:100%; height: 100%; overflow: hidden; }style>后端
// 获取省地图数据 public function get_citylist(){ $path = './static/map_json/陕西省.json'; if(file_exists($path)){ $fp = fopen($path,'r'); $str = fread($fp,filesize($path));//指定读取大小，这里把整个文件内容读取出来 fclose($fp); } $city_list = json_decode($str,true); $datas['city_list'] = $city_list; $array = []; // 定义颜色 $color_list = ['#cfc5de','#f1ebd1','#feffdb','#e0cee4','#fde8cd','#fffdd6','#affed7','#e4f1d7','#e4f1d7','#fffed7','#fffed8','#dccee7','#fffed7']; foreach ($city_list['features'] as $k=>$v){ $array[$k]['name'] = $v['properties']['name'];$array[$k]['group_id'] = $v['properties']['groupid']; $array[$k]['value'] = $k+1; $array[$k]['itemStyle'] = ['color'=>$color_list[$k]]; // 设置各个地区背景色 } $datas['city_data'] = $array;$datas['city_data1'] = $groupid; return $output; }来源地址：https://blog.csdn.net/admin_web/article/details/127075712
