Bootstrap

vue里使用echarts画世界地图

Vue中使用echarts的项目总结:

1、安装echarts

npm install echarts --save

 2、在项目需要用到地图的页面里引入echarts(在入口文件里引入后无效,没找到原因……)

import echarts from 'echarts'
require('echarts/map/js/world.js')

3、world.js里对应的国家的名字都是英文的,所以需要一个中英文名称转换过程


    //国家名称中英文对应关系
    var nameMap = {
            'Singapore Rep.':'新加坡',
            'Dominican Rep.':'多米尼加共和国',
            'Palestine':'巴勒斯坦',
            'Bahamas':'巴哈马',
           'Afghanistan':'阿富汗',
           'Guinea-Bissau':'几内亚比绍',
           "Côte d'Ivoire":'科特迪瓦',
           'Angola':'安哥拉',
           'Albania':'阿尔巴尼亚',
           'United Arab Emirates':'阿联酋',
           'Argentina':'阿根廷',
           'Armenia':'亚美尼亚',
           'French Southern and Antarctic Lands':'法属南半球和南极领地',
           'Australia':'澳大利亚',
           'Austria':'奥地利',
           'Azerbaijan':'阿塞拜疆',
           'Burundi':'布隆迪',
           'Belgium':'比利时',
           'Benin':'贝宁',
           'Burkina Faso':'布基纳法索',
           'Bangladesh':'孟加拉国',
           'Bulgaria':'保加利亚',
           'Bosnia and Herz.':'波斯尼亚和黑塞哥维那',
           'Belarus':'白俄罗斯',
           'Belize':'伯利兹',
           'Bermuda':'百慕大',
           'Bolivia':'玻利维亚',
           'Brazil':'巴西',
           'Brunei':'文莱',
           'Bhutan&#
;