漏刻有时Echarts地图三级下钻和散点图使用说明

项目说明

1. 基于Echarts开发，使用geo组件进行下钻开发；
2. 项目要求做离线访问使用，即需要将geojson数据转化为.js文件；否则，加载.json文件需要通过http或https等web协议访问；

项目开发

1. 不同地区调用的geojson地理数据多寡，会影响开发进度；
2. 本案例仅选取一个区域作为下钻对象，并做特殊颜色标识，方便演示和操作；
3. 调用散点经纬度坐标数据，采用数组(array)格式，在下钻的过程中，对对应的数据进行过滤筛选，来实现不使用$ajax函数来调用；

项目文档 目录结构

1.目录结构
├─index.html ........默认启动页
├─js ........封装函数
│  ├─map ........地理数据
│  ├─province........各省地理数据
├─js ........javascript封装库
│  ├─functions.js ........公共函数配置文件
│  ├─database.js ........数据文件，具体注释

开发配置 图表配置

1. lockChart作为全局变量配置，在下钻的过程中或者后续和整个数据大屏进行菜单交互时，方便调用；
2. oBack，返回按钮，全局变量；

    //设为全局函数
    var lockChart = echarts.init(document.getElementById('mapBox'));
    var oBack = document.getElementById("back");

3. 返回按钮的操作事件

    // 点击返回按钮
    oBack.onclick = function () {
        $('#cityBtn').addClass('hidden');
        $('#countyBtn').addClass('hidden');
        drillMap("新疆维吾尔自治区", "新疆维吾尔自治区", mapData);
    };

4. 调用封装函数

    // 初始化echarts
    drillMap("新疆维吾尔自治区", "新疆维吾尔自治区", mapData);

5. 数据配置

/*
* 省份城市名字拼音映射数组
* */
var provinces = {
    "昌吉回族自治州": "changji",
}

/*
* 地级市对应区县名字拼音映射数组
* */
var citys = {
    "阜康市": "652302",
}

/*
* 地图区域颜色
* normalColor0 ，正常情况颜色；
* normalColor1，故障情况颜色
* hoverColor0，正常情况鼠标高亮颜色
* hoverColor1，故障情况鼠标高亮颜色
* */

var normalColor0 = '#0c285b';

var normalColor1 = '#9d2537';

@lockdata.cn