Echarts 中国地图各个省市自治区自定义颜色

 

 

---

前言

最近接了一个外包的项目，其中有个需求是这样的，
需要展示一个中国的统计地图，要求每个省市区都是不一样的颜色，必须特别区分开。以及隐藏南海部分。
看了Echats相关文档，发现有类似的demo，但不是特别符合要求。于是自己仔细读文档研究。找到解决问题于是分享一下。

正文

废话不多少，直接上代码

方法1 （在数据中直接添加样式）

需要后台配合的data数据结构如下:

data: {
    {name: '北京',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '天津',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '上海',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '重庆',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '河北',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '河南',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '云南',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '辽宁',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '湖南',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '南海诸岛',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}}, .......... } // areaColor 就是省的自定义颜色值 // opacity 就是某个省透明，一般有业务需求要求隐藏南海诸岛（虽然业务有要求，但是一定要记住南海永远是中国的一部分，南海永远是中国的一部分，南海永远是中国的一部分，重要的事情说三遍！） 

前端配置信息

option = {

    ....... 省略大堆配置
    
    series: [{
        type: 'map',
        name: 'tips名字',
        data: data }] } 

方法2 （在配置中添加样式，数据中定义颜色）

需要后台配合的data数据结构如下:

data: {
    {"name": "北京", "value": 34, "count": 500, "color": "#f00"}, {"name": "天津", "value": 33, "count": 300, "color": "#ff0"}, {"name": "上海", "value": 32, "count": 50, "color": "#f0f"}, {"name": "重庆", "value": 31, "count": 50, "color": "#0f0"}, {"name": "河北", "value": 30, "count": 120, "color": "#00f"}, ........ } 

前端配置信息

// data需要进行一次循环,填入设置。
var customSettings = []; data.forEach(function (item, index) { customSettings.push({  name: item.name,  itemStyle: {  areaColor: item.color,  color: item.color } }) }) // 南海单独设置，push 进数组 customSettings.push( {  name: '南海诸岛',  itemStyle: {  normal: {  opacity: 0,  label: {  show: false } } } } ) option = { ....... 省略大堆配置  geo: {  map: 'china',  top: 0,  bottom: 0,  regions: customSettings // 设置单独的样式。 }  series: [{  type: 'map',  name: 'tips名字',  data: data }] } 

总结

这是我目前发现的两种方案，各有优劣， 第一种需要后台支持，返回你需要的数据，但是返回的数据中携带的数据量大很多。 不过也可以返回到前段自己循环组装数据。跟第二种方法差不多的循环方式，都可以