2015-12-31 工作笔记3

2015年的最后一天，看着QQ空间一位师妹留言感慨最后一天，才发现原来2015年已经过去了。以此记录以下2015年最后一天！
今天主要遇到的为题是，在使用echart进行地图扩展时，由于下载的是通过官方网站下载的json数据，没有显示出对应的下面区县的轮廓图，而下载包中的json数据却可以有轮廓图和具体区域图：

<script type="text/javascript">
    $(function () {
        require.config({
            paths: {
                echarts: '../../../Scripts/echarts'
            }
        });
        require(
            [
               'echarts',
               'echarts/chart/map'
            ],
            function (ec) {
                var myMap = ec.init(document.getElementById('mapDiv'));
                var cityMap = {
                    "贵阳市": "520100",
                    "观山湖区": "观山湖区",
                    "白云区": "白云区",
                    "花溪区": "花溪区",
                    "开阳县": "开阳县",
                    "南明区": "南明区",
                    "清镇市": "清镇市",
                    "乌当区": "乌当区",
                    "息烽县": "息烽县",
                    "修文县": "修文县",
                    "云岩区": "云岩区"
                };
                var curIndx = 0;
                var mapType = [];
                var mapGeoData = require('echarts/util/mapData/params');
                for (var city in cityMap) {
                    mapType.push(city);
                    // 自定义扩展图表类型
                    mapGeoData.params[city] = {
                        getGeoJson: (function (c) {
                            var geoJsonName = cityMap[c];
                            return function (callback) {
                                $.getJSON('../Scripts/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
                            }
                        })(city)
                    }
                }
                option = {
                    title: {
                         text: '贵阳市生态监测分布图',
                         subtext:'贵阳市生态监测点1处，位于长坡林场',
                         subtextStyle: { color: '#1E7ED0' } 
                    },
                    tooltip: {

                },
                series: [
                                {
                                    name: '贵阳市及各县区生态生态监测分布',
                                    type: 'map',
                                    mapType: '贵阳市',
                                    selectedMode: 'multiple',
                                    itemStyle: {
                                        normal: { label: { show: true} },
                                        emphasis: { label: { show: true} }
                                    },
                                    data: [{ name: '白云区', selected: true }, { name: '南明区', selected: true }
                                    ],
                                    geoCoord: {
                                        '长坡林场': [106.65, 26.68],
                                        '贵阳市': [106.63, 26.65],
                                        '南明区': [106.72, 26.57],
                                        '云岩区': [106.72, 26.62],
                                        '乌当区': [106.75, 26.63],
                                        '白云区': [106.65, 26.68],

                                        '小河区': [106.7, 26.53],
                                        '开阳县': [106.97, 27.07],
                                        '息烽县': [106.73, 27.1],
                                        '修文县': [106.58, 26.83],
                                        '清镇市': [106.47, 26.55],
                                        '花溪区': [106.67, 26.42]
                                    },
                                    markPoint: {
                                        symbol: 'emptyCircle',
                                        symbolSize: function (v) {
                                            return 10 + v / 10
                                        },
                                        effect: {
                                            show: true,
                                            shadowBlur: 0
                                        },
                                        itemStyle: {
                                            normal: {
                                                label: { show: false }
                                            }
                                        },
                                        data: [{ name: '长坡林场', value: 10}]
                                    }
                                }
                        ]
            };
                            myMap.setOption(option);


        }
        );
    });
    </script>