漏刻有时数据可视化Echarts组件开发(24)：本地离线的地图下钻与散点图

项目需求

1.基于Echarts地图geomap组件做全国地图的二级下钻； 2.实现不同区域的散点图，并根据行业分类； 3.单击散点图跳转链接； 4.本地离线版；

项目演示图

项目分析

• 本地版需要将geojson转为js脚本，实现离线端的访问，中国地图+34省区，合计35本地js；
• 按行业分类，通过颜色区分；
• 散点图数据结构格式的确定；

项目代码 返回按钮

//返回按钮
    oBack.onclick = function () {
   
        $('#back').addClass('hidden');
        $('#lockList').addClass('hidden');
        defaultName = '';
        makeDrillMap("china", "全国", provinceScatter);
    };

地图封装

  /*
 * mapName,地图对应地理数据名称
 * mapTitle,标题名称
 * mapData,对应数据
 * */
    function makeDrillMap(mapName, mapTitle, mapData) {
   
        var myChart = echarts.init(document.getElementById('lockmap'));
        //配置选项;
        var option = {
   
            title: {
   
                text: title,
                left: 'center',
                textStyle: {
   
                    color: '#fff', //白色
                    fontSize: 20, // 高亮时标签字体 变大
                }
            },
            legend: {
   
                orient: 'vertical',
                selector: [
                    {
   
                        type: 'all or inverse',
                        // 可以是任意你喜欢的 title
                        title: '全选'
                    },
                    {
   
                        type: 'inverse',
                        title: '反选'
                    }
                ],
                textStyle: {
   
                    color: '#FFF',
                    fontSize: 14,