欢迎光临
感受代码之美

echarts通过json数据渲染地图

实现代码:

    var regionAnalysisMapChart = echarts.init(document.getElementById('region-analysis-map'), 'chalk');

   /**
     * 初始化地域分析地图
     */
    function initRegionAnalysisMap() {
        var mapTitle = '初次举报量地域分析';
        $.get('/larryms/data/data/portal-sdjw/370000_full.json', function (geoJson) {
            let mapJsonData = [], mapName = '山东省';
            for (var i = 0; i < geoJson.features.length; i++) {
                mapJsonData.push({
                    name: geoJson.features[i].properties.name,
                    value: 0
                });
            }
            echarts.registerMap(mapName, geoJson);
            renderMapData(mapName, mapTitle, geoJson, mapJsonData, 0, 100);
        });
    }

    /**
     * 地图数据渲染
     * @param {string} mapName
     * @param {string} mapTitle
     * @param {Object} geoJson
     * @param {Object} seriesData
     * @param {number} colorMinValue
     * @param {number} colorMaxValue
     */
    function renderMapData(mapName, mapTitle, geoJson, seriesData, colorMinValue, colorMaxValue) {
        var mapOptions = {
            title: {
                text: mapTitle
            },
            tooltip: {
                trigger: 'item',
                formatter: '省市名:{b}, 举报量:{c}'
            },
            visualMap: {
                min: colorMinValue,
                max: colorMaxValue,
                right: '55px',
                bottom: '35px',
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#A5DCF4', '#006edd']
                }
            },
            series: [
                {
                    name: mapTitle,
                    type: 'map',
                    map: mapName,
                    label: {
                        show: true
                    },
                    data: seriesData
                }
            ]
        };
        regionAnalysisMapChart.setOption(option = mapOptions);
    }
赞(0)
未经允许禁止转载:四个空格 » echarts通过json数据渲染地图

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址