Echarts30-地图自定义图标

Echarts是大家常用的可视化工具，相比大家用的也是得心应手，但是有时候偏偏会遇到些奇怪的想法，比如：我要在地图上插????。

刚开始想到的居然不是用 Echarts，而是百度的另一款产品 百度地图，但是集成之后，还需要对特定行政单位外的区域添加遮罩层，并且地图自带的路网等也不好去除，于是又回来折腾Echarts。

翻看官方的配置项手册，良久之后才找到 renderItem。官方的说法是：custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem。

找到方法就动手，开始下载 Echarts 的地图支持，但是此时 Echarts 自称部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。因为是自己玩的项目 ，所以动了一点坏心思，在Github 上找找大家以前的存货。如果是商业项目，大家千万不要这样做哦。

chinaJson.features.forEach(function (item, index) {data.forEach(function (row, num) {if (item.properties.name === row.PROVINCE_NAME) {
            provinceData.push({
                "id": item.id,
                "name": row.PROVINCE_NAME,
                "cp": item.properties.cp,
                "point": row.FLAG,
                "value": 0  // value 为关键字，值必须为 0
            });
        }
    });
});

var myOption = {
    geo: {
        map: '中国',
        zoom: 1,
    },
    series: [{
        name: '红旗',
        type: 'custom',
        coordinateSystem: 'geo',        
        renderItem: function (params, api) {// 具体实现自定义图标的方法
            if (provinceData[params.dataIndex].point > 0) {
                return {
                    type: 'image',
                    style: {
                        image: './img/flag.png',
                        x: api.coord([provinceData[params.dataIndex].cp[0], provinceData[params.dataIndex].cp[1]])[0],
                        y: api.coord([provinceData[params.dataIndex].cp[0], provinceData[params.dataIndex].cp[1]])[1],
                    }
                }
            }
        },
        data: provinceData,
    }]
};

chinaJson为 Echarts 地图数据，一部分数据大概长下图这样
]

data为哪些省份需要插上???? 的数据，我的数据长这样

[{"PROVINCE_NAME": "北京", "FLAG": 1}, {"PROVINCE_NAME": "上海", "FLAG": 1}……]

provinceData为最后得出的数据，然后在 renderItem 方法里对这个数组进行使用；

这个方法中有两个参数 params,api，打印了以下发现能用的只有dataIndex 这个属性，为数据数组的下标，我们在方法里判断当 point 的值大于 0 的时候，我们就插一个????，x，y是???? 的坐标，这个坐标需要通过 api 里的 coord 方法进行坐标转化，参数是一个坐标数组，且会返回一个坐标数组，这个方法有误差，???? 可能不在省会城市上，比如澳门的???? 在海上，当然也有可能是 Echarts 的数据不准确。

最后我们看一下完成后的样子, 我们在河南插上一个????