echarts china_echarts散点图显示客户分布

前阵子老板交给我一个任务，让我做个图表显示客户溯源。在用excel捣鼓了一阵之后，发现柱状图之类的不太直观，于是想到之前在网上看到有人用python做地图可视化，搜索了一下，发现有个echarts的工具，初略看了下官方教程，还挺简单的。

官方教程在这里：

ECharts Documentation​www.echartsjs.com

根据教程来看，echarts主要通过option来配置图表。我的目标是在把各个客户的数量显示到世界地图上，翻了下文档，感觉用散点图比较合适，散点的大小会根据客户数量的多少来自定义。

第一步，先构建echarts图表：

这里直接抄官方的示例，稍微修改下：

<!

配置完，打开html，就能看到一张世界地图了。

空数据

我的数据是存在excel里的，要显示到图表上，还得把excel读取出来，这个可以用xlsx-js这个工具，教程网上很多，不细写了；处理代码如下：

var 

将excel中的数据添加到option里，刷新，就可以看到客户分布了：

要注意的是，地图图表里的data格式一般是有要求的，所以需要将excel的数据处理一下；这里借鉴了网上的地图数据转换，写了一下函数convertDataDetail

// 将读取到的数据添加到option 										
 option.series[0].data =convertDataDetail(usdData); 
option.series[1].data =convertDataDetail(rmbData);

其实质内容就是将地理名称转换为对应的经纬度，加入数组，然后再添加不同地区对应的数值。

如下图：

数组的前两位按表示经纬度，第三位表示数值，第4个是地名，可省略，这个是为了后续显示标签用的。

        var convertDataDetail = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push(geoCoord.concat(data[i].value,data[i].name,data[i].detail));
                    }
                }
                return res;
        };

地理名称如何对应到经纬度呢？说白了就是一个key-value对象：

var geoCoordMap = {
            "台湾":[121.5365,25.0192],
            "滁州":[118.18,32.18],
            "海门":[121.15,31.89],
            "鄂尔多斯":[109.781327,39.608266],
            "招远":[120.38,37.35],
            "舟山":[122.207216,29.985295],
            "齐齐哈尔":[123.97,47.33],
            "盐城":[120.13,33.38],
            "赤峰":[118.87,42.28],
            "青岛":[120.33,36.07],
            "乳山":[121.52,36.89],
            "金昌":[102.188043,38.520089]
}

如果地理数据较多，可以网上下载别人已经记录好的数据就行了。

那么，散点图如何在数据点上显示自定义的数据标签呢，在series里面添加：

label