用echarts制作一个Choropleth地图

时间:2018-09-06 20:50:57

标签: javascript echarts

我正在尝试根据以下示例使用echarts构建地图:https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-usa

实际上,我可以可视化我的几何图形,但是没有示例中的分类。

geometry with no classification

这是我的代码:

// based on prepared DOM, initialize echarts instance
var myMap = echarts.init(document.getElementById('chart-map'));
myMap.showLoading();
$.get('./app/data/map/' + id + '-values.geojson', function(myjson) {
    myjson = JSON.parse(myjson);
    console.log(myjson);
    // alert(myjson["features"].length);
    var currentdata = [];
    for (var x = 0; x < myjson["features"].length; x++) {
        currentdata[x] = {
            name: myjson["features"][x]["properties"].NOM_IRIS,
            value: myjson["features"][x]["properties"].value
        };
    }
    console.log(currentdata);
    myMap.hideLoading();
    echarts.registerMap('epci', myjson);
    option = {
        title: {
            text: 'My title',
            left: 'right'
        },
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function(params) {
                console.log(params);
                var value = (params.value + '').split('.');
                value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                return params.seriesName + '<br/>' + params.name + ': ' + value;
            }
        },
        visualMap: {
            left: 'right',
            min: 70,
            max: 415,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            text: ['haute', 'Faible'], // 文本,默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            //orient: 'vertical',
            left: 'left',
            top: 'top',
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [{
            name: 'My data',
            type: 'map',
            roam: true,
            map: 'epci',
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data: currentdata
        }]
    };
    myMap.setOption(option);
});

我在工具提示上添加了console.log(),以查看发生了什么... 在工作示例中,我得到了:

{
  "componentType": "series",
  "componentSubType": "map",
  "seriesType": "map",
  "seriesIndex": 0,
  "seriesId": "\u0000USA PopEstimates\u00000",
  "seriesName": "USA PopEstimates",
  "name": "North Dakota",
  "dataIndex": 34,
  "data": {
    "name": "North Dakota",
    "value": 699628
  },
  "value": 699628,
  "color": "rgba(50,57,151,1)",
  "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(50,57,151,1);\"></span>",
  "$vars": [
    "seriesName",
    "name",
    "value"
  ]
}

在我的代码中,对象如下-值为null(也为名称):

{
  "componentType": "series",
  "componentSubType": "map",
  "seriesType": "map",
  "seriesIndex": 0,
  "seriesId": "\u0000Consommation dénergie\u00000",
  "seriesName": "Consommation dénergie",
  "name": "",
  "dataIndex": -1,
  "value": null,
  "color": "#c23531",
  "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;\"></span>",
  "$vars": [
    "seriesName",
    "name",
    "value"
  ]
}

currendata var包含格式正确的对象:

[
  {
    "name": "A",
    "value": 345
  },
  {
    "name": "B",
    "value": 238
  },
[...]

]

我无法弄清楚出什么问题了。

0 个答案:

没有答案