我正在尝试根据以下示例使用echarts构建地图:https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-usa
实际上,我可以可视化我的几何图形,但是没有示例中的分类。
这是我的代码:
// 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
},
[...]
]
我无法弄清楚出什么问题了。