Загрузить данные из JSON в Echarts

Question

Я изучаю, как использовать плагин echart , и я изо всех сил пытаюсь создать карту, которая получает все данные из файла json Пример веб-сайта, который я пытаюсь сделатьсоздать заново.

В приведенном выше примере, с которым я связан, вы можете увидеть опцию series: , которая содержит настройки и данные карты.

Iпопытался создать файл 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);

});

Тогда, thhtml - это просто div с идентификатором с именем chartviewsbycountry

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

Большое спасибо.