Question

我正在学习如何使用echart plugin，而我正努力尝试制作一个从json文件example of the website i'm trying to recreate.中获取所有数据的地图

在我之前链接的示例中，您可以看到一个名为 series：的选项，其中包含地图的设置和数据。

我试图制作一个json文件，其中包含具有地图名称的数组以及具有以下结构的地图数据：

编辑：（我很笨，我忘了删除每个最后一个值字段末尾的逗号，现在我可以正确加载json了，但是数据没有显示出来，需要时间来解决）

所以，以前的代码是这样的：

"data": [
    {
        "name": "Spain",
        "value": "256", <-- This was wrong
    }, 
    {
        "name": "United States of America",
        "value": "256", <-- This was wrong too :/
    },
    and so on...

这是固定的，可以正确加载json并绘制地图，~~但没有数据~~（：

{
"settings": [
    {
        "name": "Test Map"
    }
],
"data": [
    {
    "name": "Spain",
    "value": "256"
    }, 
    {
    "name": "United States of America",
    "value": "256"
    },
    {
    "name": "Sweden",
    "value": "256"
    },
    {
    "name": "Canada",
    "value": "256"
    },
    {
    "name": "Australia",
    "value": "256"
    },
    {
    "name": "Qatar",
    "value": "256"
    },
    {
    "name": "France",
    "value": "256"
    },
    {
    "name": "Portugal",
    "value": "256"
    },
    {
    "name": "India",
    "value": "256"
    },
    {
    "name": "New Zealand",
    "value": "256"
    }
]
}

这是加载echarts地图的脚本，不幸的是，~~无效：（（~~

var chartViewsByCountry = echarts.init(document.getElementById('chartviewsbycountry'));

chartViewsByCountry.showLoading();

$.getJSON('assets/json/viewsbycountry.json', function (views_by_country) {

chartViewsByCountry.hideLoading();

option = {

    title: {
        text: 'Number of views by Country',
        left: 'center',
        top: 'top'
    },

    tooltip : {
        trigger: 'item',
        formatter: function (params) {
        var value = (params.value + '').split('.');
        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
                + '.' + value[1];
        return params.seriesName + '<br/>' + params.data.name + ' : ' + params.data.value;
        }
    },

    visualMap: {
        min: 0,
        max: 10000000,
        text: ['Max views','Min views'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue','yellow', 'orangered']
        }
    },

    //Nombres de la leyenda
    series : [
        {
            name: 'Nº of Views',
            type: 'map',
            mapType: 'world',
            roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },

            data: views_by_country.data.value


        }
    ]
};

chartViewsByCountry.setOption(option);

});

然后，html只是一个id为chartviewsbycountry的div

<div class="chart-container">
    <div class="chart has-fixed-height" id="chartviewsbycountry"></div>
</div>

非常感谢。

将数据从json加载到echarts

0 个答案: