echarts map not displaying with laravel

Question

please help because i'm stuck ,it's my first Laravel project using laravel 5.6 and i'm trying to use echarts to generate this example but the map chart never render and no error at console. my page.blade.php code :

    @extends('layouts.main')

@section('specialJS')
    <script src="{{ asset('js/charts/echarts-en.js') }}"></script>
    <script src="{{ asset('js/charts/crew_geo.js') }}"></script>
@endsection


@section('content')

    <div class="offset-md-2 mt-4">

        <div class="col-md-12">
            <div id="main" class="col-md-12 chart" style="height:400px;"></div>

        </div>
    </div>

note : specialJS section location at footer and crew_geo.js :

var myChart = echarts.init(document.getElementById('main'));

option = {
    title : {
        text: 'World Population (2010)',
        subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
        sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
        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.name + ' : ' + value;
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        left: 'right',
        top: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000000,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: 'World Population (2010)',
            type: 'map',
            mapType: 'world',
            roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:[
                {name : 'Afghanistan', value : 28397.812},
                {name : 'Angola', value : 19549.124},
                {name : 'Albania', value : 3150.143},
                {name : 'United Arab Emirates', value : 8441.537},
                {name : 'Argentina', value : 40374.224},
                {name : 'Armenia', value : 2963.496},
                {name : 'French Southern and Antarctic Lands', value : 268.065},
                {name : 'Australia', value : 22404.488},
                {name : 'Austria', value : 8401.924},
                {name : 'Azerbaijan', value : 9094.718},
                {name : 'Burundi', value : 9232.753},
                {name : 'Belgium', value : 10941.288},
                {name : 'Benin', value : 9509.798},
                {name : 'Burkina Faso', value : 15540.284},
                {name : 'Bangladesh', value : 151125.475},
                {name : 'Bulgaria', value : 7389.175},
                {name : 'The Bahamas', value : 66402.316},
                {name : 'Bosnia and Herzegovina', value : 3845.929},
                {name : 'Belarus', value : 9491.07},
                {name : 'Belize', value : 308.595},
                {name : 'Bermuda', value : 64.951},
                {name : 'Bolivia', value : 716.939},
                {name : 'Brazil', value : 195210.154},
                {name : 'Brunei', value : 27.223},
                {name : 'Bhutan', value : 716.939},
                {name : 'Botswana', value : 1969.341},
                {name : 'Central African Republic', value : 4349.921},
                {name : 'Canada', value : 34126.24},
                {name : 'Switzerland', value : 7830.534},
                {name : 'Chile', value : 17150.76},
                {name : 'China', value : 1359821.465},
                {name : 'Ivory Coast', value : 60508.978},
                {name : 'Cameroon', value : 20624.343},
                {name : 'Democratic Republic of the Congo', value : 62191.161},
                {name : 'Republic of the Congo', value : 3573.024},
                {name : 'Colombia', value : 46444.798},
                {name : 'Costa Rica', value : 4669.685},
                {name : 'Cuba', value : 11281.768},
                {name : 'Northern Cyprus', value : 1.468},
                {name : 'Cyprus', value : 1103.685},
                {name : 'Czech Republic', value : 10553.701},
                {name : 'Germany', value : 83017.404},
                {name : 'Djibouti', value : 834.036},
                {name : 'Denmark', value : 5550.959},
                {name : 'Dominican Republic', value : 10016.797},
                {name : 'Algeria', value : 37062.82},
                {name : 'Ecuador', value : 15001.072},
                {name : 'Egypt', value : 78075.705},
                {name : 'Eritrea', value : 5741.159},
                {name : 'Spain', value : 46182.038},
                {name : 'Estonia', value : 1298.533},
                {name : 'Ethiopia', value : 87095.281},
                {name : 'Finland', value : 5367.693},
                {name : 'Fiji', value : 860.559},
                {name : 'Falkland Islands', value : 49.581},
                {name : 'France', value : 63230.866},
                {name : 'Gabon', value : 1556.222},
                {name : 'United Kingdom', value : 62066.35},
                {name : 'Georgia', value : 4388.674},
                {name : 'Ghana', value : 24262.901},
                {name : 'Guinea', value : 10876.033},
                {name : 'Gambia', value : 1680.64},
                {name : 'Guinea Bissau', value : 10876.033},
                {name : 'Equatorial Guinea', value : 696.167},
                {name : 'Greece', value : 11109.999},
                {name : 'Greenland', value : 56.546},
                {name : 'Guatemala', value : 14341.576},
                {name : 'French Guiana', value : 231.169},
                {name : 'Guyana', value : 786.126},
                {name : 'Honduras', value : 7621.204},
                {name : 'Croatia', value : 4338.027},
                {name : 'Haiti', value : 9896.4},
                {name : 'Hungary', value : 10014.633},
                {name : 'Indonesia', value : 240676.485},
                {name : 'India', value : 1205624.648},
                {name : 'Ireland', value : 4467.561},
                {name : 'Iran', value : 240676.485},
                {name : 'Iraq', value : 30962.38},
                {name : 'Iceland', value : 318.042},
                {name : 'Israel', value : 7420.368},
                {name : 'Italy', value : 60508.978},
                {name : 'Jamaica', value : 2741.485},
                {name : 'Jordan', value : 6454.554},
                {name : 'Japan', value : 127352.833},
                {name : 'Kazakhstan', value : 15921.127},
                {name : 'Kenya', value : 40909.194},
                {name : 'Kyrgyzstan', value : 5334.223},
                {name : 'Cambodia', value : 14364.931},
                {name : 'South Korea', value : 51452.352},
                {name : 'Kosovo', value : 97.743},
                {name : 'Kuwait', value : 2991.58},
                {name : 'Laos', value : 6395.713},
                {name : 'Lebanon', value : 4341.092},
                {name : 'Liberia', value : 3957.99},
                {name : 'Libya', value : 6040.612},
                {name : 'Sri Lanka', value : 20758.779},
                {name : 'Lesotho', value : 2008.921},
                {name : 'Lithuania', value : 3068.457},
                {name : 'Luxembourg', value : 507.885},
                {name : 'Latvia', value : 2090.519},
                {name : 'Morocco', value : 31642.36},
                {name : 'Moldova', value : 103.619},
                {name : 'Madagascar', value : 21079.532},
                {name : 'Mexico', value : 117886.404},
                {name : 'Macedonia', value : 507.885},
                {name : 'Mali', value : 13985.961},
                {name : 'Myanmar', value : 51931.231},
                {name : 'Montenegro', value : 620.078},
                {name : 'Mongolia', value : 2712.738},
                {name : 'Mozambique', value : 23967.265},
                {name : 'Mauritania', value : 3609.42},
                {name : 'Malawi', value : 15013.694},
                {name : 'Malaysia', value : 28275.835},
                {name : 'Namibia', value : 2178.967},
                {name : 'New Caledonia', value : 246.379},
                {name : 'Niger', value : 15893.746},
                {name : 'Nigeria', value : 159707.78},
                {name : 'Nicaragua', value : 5822.209},
                {name : 'Netherlands', value : 16615.243},
                {name : 'Norway', value : 4891.251},
                {name : 'Nepal', value : 26846.016},
                {name : 'New Zealand', value : 4368.136},
                {name : 'Oman', value : 2802.768},
                {name : 'Pakistan', value : 173149.306},
                {name : 'Panama', value : 3678.128},
                {name : 'Peru', value : 29262.83},
                {name : 'Philippines', value : 93444.322},
                {name : 'Papua New Guinea', value : 6858.945},
                {name : 'Poland', value : 38198.754},
                {name : 'Puerto Rico', value : 3709.671},
                {name : 'North Korea', value : 1.468},
                {name : 'Portugal', value : 10589.792},
                {name : 'Paraguay', value : 6459.721},
                {name : 'Qatar', value : 1749.713},
                {name : 'Romania', value : 21861.476},
                {name : 'Russia', value : 21861.476},
                {name : 'Rwanda', value : 10836.732},
                {name : 'Western Sahara', value : 514.648},
                {name : 'Saudi Arabia', value : 27258.387},
                {name : 'Sudan', value : 35652.002},
                {name : 'South Sudan', value : 9940.929},
                {name : 'Senegal', value : 12950.564},
                {name : 'Solomon Islands', value : 526.447},
                {name : 'Sierra Leone', value : 5751.976},
                {name : 'El Salvador', value : 6218.195},
                {name : 'Somaliland', value : 9636.173},
                {name : 'Somalia', value : 9636.173},
                {name : 'Republic of Serbia', value : 3573.024},
                {name : 'Suriname', value : 524.96},
                {name : 'Slovakia', value : 5433.437},
                {name : 'Slovenia', value : 2054.232},
                {name : 'Sweden', value : 9382.297},
                {name : 'Swaziland', value : 1193.148},
                {name : 'Syria', value : 7830.534},
                {name : 'Chad', value : 11720.781},
                {name : 'Togo', value : 6306.014},
                {name : 'Thailand', value : 66402.316},
                {name : 'Tajikistan', value : 7627.326},
                {name : 'Turkmenistan', value : 5041.995},
                {name : 'East Timor', value : 10016.797},
                {name : 'Trinidad and Tobago', value : 1328.095},
                {name : 'Tunisia', value : 10631.83},
                {name : 'Turkey', value : 72137.546},
                {name : 'United Republic of Tanzania', value : 44973.33},
                {name : 'Uganda', value : 33987.213},
                {name : 'Ukraine', value : 46050.22},
                {name : 'Uruguay', value : 3371.982},
                {name : 'United States of America', value : 312247.116},
                {name : 'Uzbekistan', value : 27769.27},
                {name : 'Venezuela', value : 236.299},
                {name : 'Vietnam', value : 89047.397},
                {name : 'Vanuatu', value : 236.299},
                {name : 'West Bank', value : 13.565},
                {name : 'Yemen', value : 22763.008},
                {name : 'South Africa', value : 51452.352},
                {name : 'Zambia', value : 13216.985},
                {name : 'Zimbabwe', value : 13076.978}
            ]
        }
    ]
};

// use configuration item and data specified to show chart
myChart.setOption(option);

i don't know whats wrong but this code only display :

Answer 1

i found that to use PHP version of echarts is more friendly with Laravel,so here is the steps :

1- in your model make chart function like :

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

use \Hisune\EchartsPHP\ECharts;
use \Hisune\EchartsPHP\Doc\IDE\Series;
use Hisune\EchartsPHP\Config;

class User extends Authenticatable{

  public function nationality_geo(){

    $nationality_array=user::all('nationality')->unique('nationality');

    $countries=array(
        "AF"=>"Afghan","AX"=>"\u00c5land Island","AL"=>"Albanian","DZ"=>"Algerian","AS"=>"American Samoan","AD"=>"Andorran","AO"=>"Angolan","AI"=>"Anguillan","AQ"=>"Antarctic","AG"=>"Antiguan or Barbudan","AR"=>"Argentine","AM"=>"Armenian","AW"=>"Aruban","AU"=>"Australian","AT"=>"Austrian","AZ"=>"Azerbaijani, Azeri","BS"=>"Bahamian","BH"=>"Bahraini","BD"=>"Bangladeshi","BB"=>"Barbadian","BY"=>"Belarusian","BE"=>"Belgian","BZ"=>"Belizean","BJ"=>"Beninese, Beninois","BM"=>"Bermudian, Bermudan","BT"=>"Bhutanese","BO"=>"Bolivian","BQ"=>"Bonaire","BA"=>"Bosnian or Herzegovinian","BW"=>"Motswana, Botswanan","BV"=>"Bouvet Island","BR"=>"Brazilian","IO"=>"BIOT","BN"=>"Bruneian","BG"=>"Bulgarian","BF"=>"Burkinab\u00e9","BI"=>"Burundian","CV"=>"Cabo Verdean","KH"=>"Cambodian","CM"=>"Cameroonian","CA"=>"Canadian","KY"=>"Caymanian","CF"=>"Central African","TD"=>"Chadian","CL"=>"Chilean","CN"=>"Chinese","CX"=>"Christmas Island","CC"=>"Cocos Island","CO"=>"Colombian","KM"=>"Comoran, Comorian","CG"=>"Congolese","CD"=>"Congolese","CK"=>"Cook Island","CR"=>"Costa Rican","CI"=>"Ivorian","HR"=>"Croatian","CU"=>"Cuban","CW"=>"Cura\u00e7aoan","CY"=>"Cypriot","CZ"=>"Czech","DK"=>"Danish","DJ"=>"Djiboutian","DM"=>"Dominican","DO"=>"Dominican","EC"=>"Ecuadorian","EG"=>"Egyptian","SV"=>"Salvadoran","GQ"=>"Equatorial Guinean, Equatoguinean","ER"=>"Eritrean","EE"=>"Estonian","ET"=>"Ethiopian","FK"=>"Falkland Island","FO"=>"Faroese","FJ"=>"Fijian","FI"=>"Finnish","FR"=>"French","GF"=>"French Guianese","PF"=>"French Polynesian","TF"=>"French Southern Territories","GA"=>"Gabonese","GM"=>"Gambian","GE"=>"Georgian","DE"=>"German","GH"=>"Ghanaian","GI"=>"Gibraltar","GR"=>"Greek, Hellenic","GL"=>"Greenlandic","GD"=>"Grenadian","GP"=>"Guadeloupe","GU"=>"Guamanian, Guambat","GT"=>"Guatemalan","GG"=>"Channel Island","GN"=>"Guinean","GW"=>"Bissau-Guinean","GY"=>"Guyanese","HT"=>"Haitian","HM"=>"Heard Island or McDonald Islands","VA"=>"Vatican","HN"=>"Honduran","HK"=>"Hong Kong, Hong Kongese","HU"=>"Hungarian, Magyar","IS"=>"Icelandic","IN"=>"Indian","ID"=>"Indonesian","IR"=>"Iranian, Persian","IQ"=>"Iraqi","IE"=>"Irish","IM"=>"Manx","IL"=>"Israeli","IT"=>"Italian","JM"=>"Jamaican","JP"=>"Japanese","JE"=>"Channel Island","JO"=>"Jordanian","KZ"=>"Kazakhstani, Kazakh","KE"=>"Kenyan","KI"=>"I-Kiribati","KP"=>"North Korean","KR"=>"South Korean","KW"=>"Kuwaiti","KG"=>"Kyrgyzstani, Kyrgyz, Kirgiz, Kirghiz","LA"=>"Lao, Laotian","LV"=>"Latvian","LB"=>"Lebanese","LS"=>"Basotho","LR"=>"Liberian","LY"=>"Libyan","LI"=>"Liechtenstein","LT"=>"Lithuanian","LU"=>"Luxembourg, Luxembourgish","MO"=>"Macanese, Chinese","MK"=>"Macedonian","MG"=>"Malagasy","MW"=>"Malawian","MY"=>"Malaysian","MV"=>"Maldivian","ML"=>"Malian, Malinese","MT"=>"Maltese","MH"=>"Marshallese","MQ"=>"Martiniquais, Martinican","MR"=>"Mauritanian","MU"=>"Mauritian","YT"=>"Mahoran","MX"=>"Mexican","FM"=>"Micronesian","MD"=>"Moldovan","MC"=>"Mon\u00e9gasque, Monacan","MN"=>"Mongolian","ME"=>"Montenegrin","MS"=>"Montserratian","MA"=>"Moroccan","MZ"=>"Mozambican","MM"=>"Burmese","NA"=>"Namibian","NR"=>"Nauruan","NP"=>"Nepali, Nepalese","NL"=>"Dutch, Netherlandic","NC"=>"New Caledonian","NZ"=>"New Zealand, NZ","NI"=>"Nicaraguan","NE"=>"Nigerien","NG"=>"Nigerian","NU"=>"Niuean","NF"=>"Norfolk Island","MP"=>"Northern Marianan","NO"=>"Norwegian","OM"=>"Omani","PK"=>"Pakistani","PW"=>"Palauan","PS"=>"Palestinian","PA"=>"Panamanian","PG"=>"Papua New Guinean, Papuan","PY"=>"Paraguayan","PE"=>"Peruvian","PH"=>"Philippine, Filipino","PN"=>"Pitcairn Island","PL"=>"Polish","PT"=>"Portuguese","PR"=>"Puerto Rican","QA"=>"Qatari","RE"=>"R\u00e9unionese, R\u00e9unionnais","RO"=>"Romanian","RU"=>"Russian","RW"=>"Rwandan","BL"=>"Barth\u00e9lemois","SH"=>"Saint Helenian","KN"=>"Kittitian or Nevisian","LC"=>"Saint Lucian","MF"=>"Saint-Martinoise","PM"=>"Saint-Pierrais or Miquelonnais","VC"=>"Saint Vincentian, Vincentian","WS"=>"Samoan","SM"=>"Sammarinese","ST"=>"S\u00e3o Tom\u00e9an","SA"=>"Saudi Arabian","SN"=>"Senegalese","RS"=>"Serbian","SC"=>"Seychellois","SL"=>"Sierra Leonean","SG"=>"Singaporean","SX"=>"Sint Maarten","SK"=>"Slovak","SI"=>"Slovenian, Slovene","SB"=>"Solomon Island","SO"=>"Somali, Somalian","ZA"=>"South African","GS"=>"South Georgia or South Sandwich Islands","SS"=>"South Sudanese","ES"=>"Spanish","LK"=>"Sri Lankan","SD"=>"Sudanese","SR"=>"Surinamese","SJ"=>"Svalbard","SZ"=>"Swazi","SE"=>"Swedish","CH"=>"Swiss","SY"=>"Syrian","TW"=>"Chinese, Taiwanese","TJ"=>"Tajikistani","TZ"=>"Tanzanian","TH"=>"Thai","TL"=>"Timorese","TG"=>"Togolese","TK"=>"Tokelauan","TO"=>"Tongan","TT"=>"Trinidadian or Tobagonian","TN"=>"Tunisian","TR"=>"Turkish","TM"=>"Turkmen","TC"=>"Turks and Caicos Island","TV"=>"Tuvaluan","UG"=>"Ugandan","UA"=>"Ukrainian","AE"=>"Emirati, Emirian, Emiri","GB"=>"British, UK","UM"=>"American","US"=>"American","UY"=>"Uruguayan","UZ"=>"Uzbekistani, Uzbek","VU"=>"Ni-Vanuatu, Vanuatuan","VE"=>"Venezuelan","VN"=>"Vietnamese","VG"=>"British Virgin Island","VI"=>"U.S. Virgin Island","WF"=>"Wallis and Futuna, Wallisian or Futunan","EH"=>"Sahrawi, Sahrawian, Sahraouian","YE"=>"Yemeni","ZM"=>"Zambian","ZW"=>"Zimbabwean"
    ); 

    foreach ($nationality_array as $nationality_data) { 

        $country_code=array_search($nationality_data->nationality,$countries,false);

        $nationalitys[]=[
            'value' => user::all()->where('nationality',$nationality_data->nationality)->count(),
            'name'  => $country_code
        ];

    }

    $chart = new ECharts();
    $chart->visualMap->min = 0;
    $chart->visualMap->max = 100;
    $chart->visualMap->text = ['High', 'Low'];
    $chart->visualMap->calculable = true;
    $chart->visualMap->inRange->color = ['#20c997', '#dc3545'];
    $chart->tooltip->trigger = 'item';
    $chart->tooltip->formatter = '{a} {b} {c}';
    $chart->title->text='Employee Nationality Distribution';
    $chart->title->textStyle->color='#17a2b8';

    $chart->title->left='center';
    $chart->title->top='top';

    $chart->toolbox->show=true;
    $chart->toolbox->orient='vertical';
    $chart->toolbox->left='right';
    $chart->toolbox->top='center';

    $chart->toolbox->feature->mark->show=true;

    $chart->toolbox->feature->restore->show=true;
    $chart->toolbox->feature->restore->title='Restore';

    $chart->toolbox->feature->saveAsImage->show=true;
    $chart->toolbox->feature->saveAsImage->title='Save';

    $series = new Series();
    $series->name = 'From ';
    $series->type = 'map';
    $series->map = 'world';
    $series->nameMap = \Hisune\EchartsPHP\Countries::nameMap();
    $series->data = $nationalitys;
    $series->label->emphasis->show = true;
    $series->label->emphasis->textStyle->color = '#fff';

    $series->roam = true;
    $series->scaleLimit->min = 1;
    $series->scaleLimit->max = 5;

    $series->itemStyle->normal->borderColor = '#bbb';
    $series->itemStyle->normal->areaColor = '#F5F6FA';
    $series->itemStyle->emphasis->areaColor = '#441744';

    $chart->addSeries($series);
//refer to world map :

Config::addExtraScript('world.js', 'https://cdn.rawgit.com/hisune/images/7b31b0a0/echarts');

    return $chart->render('map');    

}

}

2-then in your blade call it like that :

                    {!! Auth::user()->nationality_geo() !!}

Answer 2

Using echarts, installed through npm in Quasar/Vue/Nodejs, we had to register the map json file for the chart against a name ('world' in this case) to get rid of the missing map error. Laravel would probably require something similar to:

echarts.registerMap('world',require('echarts/map/json/world.json'));
this.chart = echarts.init(this.$refs.chart);