头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

Echarts-引入地图实例

2021-12-22
#Echarts

最近做年度奋斗轨迹项目的时候，需要做一个功能，展示个人的出差轨迹，这里就要引入地图，选择Echarts插件来实现该功能，记录一下Echarts地图的引入方法与实例操作~
学习参考（Echarts官网）：https://echarts.apache.org/zh/index.html

让我们先看下效果图：

Image1.png

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts中国地图</title>
    <style>
        .centerItem {
            width: 856px;
            height: 640px;
            background-color: #003077;
            margin: 110px auto 0 auto;
        }
    </style>
</head>

<body>
    <!-- 中国地图展示 -->
    <div id="mapBox" class="centerItem"></div>

    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="china.js"></script>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
        var geoCoordMap = { //可以在地图上显示的城市的坐标信息

            '海外': [85.8154, 20.2584],
            //province 吉林

            '吉林省': [125.313642, 43.898338],
            '通化': [125.94265, 41.736397],
            '吉林': [126.564544, 43.871988],
            '白山': [126.435798, 41.945859],
            '辽源': [125.133686, 42.923303],
            '白城': [122.840777, 45.621086],
            '长春': [125.313642, 43.898338],
            '延边': [129.485902, 42.896414],
            '四平': [124.391382, 43.175525],
            '松原': [124.832995, 45.136049],

            //province 黑龙江

            '黑龙江省': [126.657717, 45.773225],
            '七台河': [131.019048, 45.775005],
            '鸡西': [130.941767, 45.32154],
            '齐齐哈尔': [123.987289, 47.3477],
            '黑河': [127.50083, 50.25069],
            '哈尔滨': [126.657717, 45.773225],
            '大庆': [125.02184, 46.596709],
            '鹤岗': [130.292472, 47.338666],
            '大兴安岭地区': [124.196104, 51.991789],
            '伊春': [128.910766, 47.734685],
            '佳木斯': [130.284735, 46.81378],
            '牡丹江': [129.608035, 44.588521],
            '绥化': [126.989095, 46.646064],
            '双鸭山': [131.171402, 46.655102],

            //province 安徽

            '安徽省': [117.282699, 31.866942],
            '巢湖': [117.88049, 31.608733],
            '安庆': [117.058739, 30.537898],
            '淮南': [117.018639, 32.642812],
            '淮北': [116.791447, 33.960023],
            '蚌埠': [117.35708, 32.929499],
            '宿州': [116.988692, 33.636772],
            '合肥': [117.282699, 31.866942],
            '阜阳': [115.820932, 32.901211],
            '池州': [117.494477, 30.660019],
            '六安': [116.505253, 31.755558],
            '亳州': [115.787928, 33.871211],
            '黄山': [118.29357, 29.734435],
            '马鞍山': [118.515882, 31.688528],
            '铜陵': [117.819429, 30.94093],
            '滁州': [118.32457, 32.317351],

            //province 贵州

            '贵州省': [106.709177, 26.629907],
            '安顺': [105.92827, 26.228595],
            '黔东南州': [107.985353, 26.583992],
            '六盘水': [104.852087, 26.591866],
            '贵阳': [106.709177, 26.629907],
            '黔西南州': [104.900558, 25.095148],
            '毕节地区': [105.300492, 27.302612],
            '黔南州': [107.523205, 26.264536],
            '遵义': [106.93126, 27.699961],
            '铜仁地区': [109.196161, 27.726271],

            //province 天津

            '天津': [117.2, 39.13],

            //province 北京

            '北京': [116.46, 39.92],

            //province 澳门

            '澳门': [113.54, 22.19],

            //province 内蒙古

            '内蒙古': [111.660351, 40.828319],
            '兴安盟': [122.048167, 46.083757],
            '呼伦贝尔': [119.760822, 49.201636],
            '赤峰': [118.930761, 42.297112],
            '鄂尔多斯': [109.993706, 39.81649],
            '乌兰察布': [113.112846, 41.022363],
            '锡林郭勒盟': [116.02734, 43.939705],
            '包头': [109.846239, 40.647119],
            '阿拉善盟': [105.695683, 38.843075],
            '乌海': [106.831999, 39.683177],
            '呼和浩特': [111.660351, 40.828319],
            '巴彦淖尔': [107.423807, 40.76918],
            '通辽': [122.260363, 43.633756],

            //province 广西

            '广西省': [108.297234, 22.806493],
            '桂林': [110.26092, 25.262901],
            '河池': [108.069948, 24.699521],
            '防城港': [108.351791, 21.617398],
            '贺州': [111.552594, 24.411054],
            '柳州': [109.422402, 24.329053],
            '玉林': [110.151676, 22.643974],
            '北海': [109.122628, 21.472718],
            '来宾': [109.231817, 23.741166],
            '梧州': [111.305472, 23.485395],
            '南宁': [108.297234, 22.806493],
            '百色': [106.631821, 23.901512],
            '崇左': [107.357322, 22.415455],
            '钦州': [108.638798, 21.97335],
            '贵港': [109.613708, 23.103373],

            //province 宁夏

            '宁夏省': [106.206479, 38.502621],
            '固原': [106.285268, 36.021523],
            '吴忠': [106.208254, 37.993561],
            '石嘴山': [106.379337, 39.020223],
            '银川': [106.206479, 38.502621],
            '中卫': [105.196754, 37.521124],

            //province 江苏

            '江苏省': [120.619907, 31.317987],
            '宿迁': [118.296893, 33.95205],
            '镇江': [119.455835, 32.204409],
            '泰州': [119.919606, 32.476053],
            '盐城': [120.148872, 33.379862],
            '南通': [120.873801, 32.014665],
            '常州': [119.981861, 31.771397],
            '苏州': [120.619907, 31.317987],
            '徐州': [117.188107, 34.271553],
            '淮安': [119.030186, 33.606513],
            '无锡': [120.305456, 31.570037],
            '连云港': [119.173872, 34.601549],
            '南京': [118.778074, 32.057236],
            '扬州': [119.427778, 32.408505],

            //province 广东

            '广东省': [113.30765, 23.120049],
            '肇庆': [112.479653, 23.078663],
            '潮州': [116.630076, 23.661812],
            '阳江': [111.97701, 21.871517],
            '河源': [114.713721, 23.757251],
            '佛山': [113.134026, 23.035095],
            '清远': [113.040773, 23.698469],
            '惠州': [114.410658, 23.11354],
            '江门': [113.078125, 22.575117],
            '云浮': [112.050946, 22.937976],
            '茂名': [110.931245, 21.668226],
            '湛江': [110.365067, 21.257463],
            '中山': [113.42206, 22.545178],
            '珠海': [113.562447, 22.256915],
            '汕尾': [115.372924, 22.778731],
            '揭阳': [116.379501, 23.547999],
            '梅州': [116.126403, 24.304571],
            '深圳': [114.025974, 22.546054],
            '汕头': [116.72865, 23.383908],
            '韶关': [113.594461, 24.80296],
            '东莞': [113.763434, 23.043024],
            '广州': [113.30765, 23.120049],

            //province 辽宁

            '辽宁省': [123.432791, 41.808645],
            '阜新': [121.660822, 42.01925],
            '锦州': [121.147749, 41.130879],
            '沈阳': [123.432791, 41.808645],
            '鞍山': [123.007763, 41.118744],
            '朝阳': [120.446163, 41.571828],
            '铁岭': [123.85485, 42.299757],
            '葫芦岛': [120.860758, 40.74303],
            '抚顺': [123.92982, 41.877304],
            '辽阳': [123.172451, 41.273339],
            '大连': [121.593478, 38.94871],
            '营口': [122.233391, 40.668651],
            '丹东': [124.338543, 40.129023],
            '盘锦': [122.073228, 41.141248],
            '本溪': [123.778062, 41.325838],

            //province 青海

            '青海省': [101.767921, 36.640739],
            '海南州': [100.624066, 36.284364],
            '海东地区': [102.085207, 36.51761],
            '海北州': [100.879802, 36.960654],
            '果洛州': [100.223723, 34.480485],
            '黄南州': [102.0076, 35.522852],
            '玉树州': [97.013316, 33.00624],
            '西宁': [101.767921, 36.640739],
            '海西州': [97.342625, 37.373799],

            //province 云南

            '云南省': [102.714601, 25.049153],
            '文山': [104.089112, 23.401781],
            '西双版纳': [100.803038, 22.009433],
            '丽江': [100.229628, 26.875351],
            '红河州': [103.384065, 23.367718],
            '大理州': [100.223675, 25.5969],
            '楚雄州': [101.529382, 25.066356],
            '保山': [99.177996, 25.120489],
            '昭通': [103.725021, 27.340633],
            '迪庆州': [99.713682, 27.831029],
            '曲靖': [103.782539, 25.520758],
            '临沧': [100.092613, 23.887806],
            '普洱': [100.980058, 22.788778],
            '德宏州': [98.589434, 24.44124],
            '玉溪': [102.545068, 24.370447],
            '怒江州': [98.859932, 25.860677],
            '昆明': [102.714601, 25.049153],

            //province 湖南

            '湖南省': [112.979353, 28.213478],
            '湘西州': [109.745746, 28.317951],
            '张家界': [110.48162, 29.124889],
            '株洲': [113.131695, 27.827433],
            '长沙': [112.979353, 28.213478],
            '益阳': [112.366547, 28.588088],
            '衡阳': [112.583819, 26.898164],
            '娄底': [111.996396, 27.741073],
            '湘潭': [112.935556, 27.835095],
            '永州': [111.614648, 26.435972],
            '常德': [111.653718, 29.012149],
            '岳阳': [113.146196, 29.378007],
            '郴州': [113.037704, 25.782264],
            '邵阳': [111.461525, 27.236811],
            '怀化': [109.986959, 27.557483],

            //province 海南

            '海南省': [110.330802, 20.022071],
            '白沙': [109.358586, 19.216056],
            '定安': [110.32009, 19.490991],
            '琼中': [109.861849, 19.039771],
            '琼海': [110.414359, 19.21483],
            '儋州': [109.413973, 19.571153],
            '保亭': [109.656113, 18.597592],
            '文昌': [110.780909, 19.750947],
            '万宁': [110.292505, 18.839886],
            '东方': [108.85101, 18.998161],
            '乐东': [109.062698, 18.658614],
            '陵水': [109.948661, 18.575985],
            '临高': [109.724101, 19.805922],
            '海口': [110.330802, 20.022071],
            '屯昌': [110.063364, 19.347749],
            '昌江': [109.0113, 19.222483],
            '澄迈': [109.996736, 19.693135],
            '五指山': [109.51775, 18.831306],
            '三亚': [109.522771, 18.257776],

            //province 甘肃

            '甘肃省': [103.823305, 36.064226],
            '金昌': [102.208126, 38.516072],
            '张掖': [100.459892, 38.93932],
            '陇南': [104.934573, 33.39448],
            '白银': [104.171241, 36.546682],
            '兰州': [103.823305, 36.064226],
            '定西': [104.626638, 35.586056],
            '平凉': [106.688911, 35.55011],
            '天水': [105.736932, 34.584319],
            '庆阳': [107.644227, 35.726801],
            '临夏州': [103.215249, 35.598514],
            '甘南州': [102.917442, 34.992211],
            '酒泉': [98.508415, 39.741474],
            '嘉峪关': [98.281635, 39.802397],
            '武威': [102.640147, 37.933172],

            //province 山东

            '山东省': [117.024967, 36.682785],
            '威海': [122.093958, 37.528787],
            '泰安': [117.089415, 36.188078],
            '济南': [117.024967, 36.682785],
            '滨州': [117.968292, 37.405314],
            '济宁': [116.600798, 35.402122],
            '临沂': [118.340768, 35.072409],
            '菏泽': [115.46336, 35.26244],
            '日照': [119.50718, 35.420225],
            '德州': [116.328161, 37.460826],
            '聊城': [115.986869, 36.455829],
            '莱芜': [117.684667, 36.233654],
            '青岛': [120.384428, 36.105215],
            '潍坊': [119.142634, 36.716115],
            '东营': [118.583926, 37.487121],
            '枣庄': [117.279305, 34.807883],
            '烟台': [121.309555, 37.536562],
            '淄博': [118.059134, 36.804685],

            //province 山西

            '山西省': [112.550864, 37.890277],
            '晋城': [112.867333, 35.499834],
            '朔州': [112.479928, 39.337672],
            '大同': [113.290509, 40.113744],
            '临汾': [111.538788, 36.099745],
            '太原': [112.550864, 37.890277],
            '晋中': [112.738514, 37.693362],
            '运城': [111.006854, 35.038859],
            '阳泉': [113.569238, 37.869529],
            '吕梁': [111.143157, 37.527316],
            '长治': [113.120292, 36.201664],
            '忻州': [112.727939, 38.461031],

            //province 江西

            '江西省': [115.893528, 28.689578],
            '吉安': [114.992039, 27.113848],
            '九江': [115.999848, 29.71964],
            '新余': [114.947117, 27.822322],
            '抚州': [116.360919, 27.954545],
            '宜春': [114.400039, 27.81113],
            '南昌': [115.893528, 28.689578],
            '上饶': [117.955464, 28.457623],
            '鹰潭': [117.03545, 28.24131],
            '景德镇': [117.186523, 29.303563],
            '赣州': [114.935909, 25.845296],
            '萍乡': [113.859917, 27.639544],

            //province 西藏

            '西藏': [91.111891, 29.662557],
            '拉萨': [91.111891, 29.662557],
            '那曲地区': [92.067018, 31.48068],
            '昌都地区': [97.185582, 31.140576],
            '山南地区': [91.750644, 29.229027],
            '林芝地区': [94.349985, 29.666941],
            '日喀则地区': [88.891486, 29.269023],
            '阿里地区': [81.107669, 30.404557],

            //province 上海

            '上海': [121.48, 31.22],

            //province 新疆

            '新疆': [87.564988, 43.84038],
            '图木舒克': [79.198155, 39.889223],
            '克孜勒苏州': [76.137564, 39.750346],
            '阿勒泰地区': [88.137915, 47.839744],
            '乌鲁木齐': [87.564988, 43.84038],
            '阿克苏地区': [80.269846, 41.171731],
            '克拉玛依': [84.88118, 45.594331],
            '五家渠': [87.565449, 44.368899],
            '巴音郭楞': [86.121688, 41.771362],
            '伊犁州': [81.297854, 43.922248],
            '和田地区': [79.930239, 37.116774],
            '阿拉尔': [81.291737, 40.61568],
            '博尔塔拉州': [82.052436, 44.913651],
            '喀什地区': [75.992973, 39.470627],
            '哈密地区': [93.528355, 42.858596],
            '石河子': [86.041865, 44.308259],
            '塔城地区': [82.974881, 46.758684],
            '吐鲁番地区': [89.181595, 42.96047],
            '昌吉州': [87.296038, 44.007058],

            //province 四川

            '四川省': [104.067923, 30.679943],
            '遂宁': [105.564888, 30.557491],
            '达州': [107.494973, 31.214199],
            '南充': [106.105554, 30.800965],
            '广安': [106.63572, 30.463984],
            '阿坝州': [102.228565, 31.905763],
            '宜宾': [104.633019, 28.769675],
            '乐山': [103.760824, 29.600958],
            '绵阳': [104.705519, 31.504701],
            '眉山': [103.84143, 30.061115],
            '德阳': [104.402398, 31.13114],
            '巴中': [106.757916, 31.869189],
            '成都': [104.067923, 30.679943],
            '内江': [105.073056, 29.599462],
            '凉山州': [102.259591, 27.892393],
            '泸州': [105.44397, 28.89593],
            '甘孜州': [101.969232, 30.055144],
            '攀枝花': [101.722423, 26.587571],
            '广元': [105.819687, 32.44104],
            '资阳': [104.63593, 30.132191],
            '自贡': [104.776071, 29.359157],
            '雅安': [103.009356, 29.999716],

            //province 香港

            '香港': [114.17, 22.28],

            //province 重庆

            '重庆': [106.54, 29.59],

            //province 湖北

            '湖北省': [114.3162, 30.581084],
            '神农架林区': [110.487231, 31.595768],
            '仙桃': [113.387448, 30.293966],
            '天门': [113.12623, 30.649047],
            '随州': [113.379358, 31.717858],
            '鄂州': [114.895594, 30.384439],
            '十堰': [110.801229, 32.636994],
            '恩施': [109.517433, 30.308978],
            '武汉': [114.3162, 30.581084],
            '襄阳': [112.176326, 32.094934],
            '黄石': [115.050683, 30.216127],
            '宜昌': [111.310981, 30.732758],
            '潜江': [112.768768, 30.343116],
            '黄冈': [114.906618, 30.446109],
            '孝感': [113.935734, 30.927955],
            '荆州': [112.241866, 30.332591],
            '荆门': [112.21733, 31.042611],
            '咸宁': [114.300061, 29.880657],

            //province 福建

            '福建省': [118.103886, 24.489231],
            '厦门': [118.103886, 24.489231],
            '南平': [118.181883, 26.643626],
            '三明': [117.642194, 26.270835],
            '莆田': [119.077731, 25.44845],
            '泉州': [118.600362, 24.901652],
            '宁德': [119.542082, 26.656527],
            '龙岩': [117.017997, 25.078685],
            '福州': [119.330221, 26.047125],
            '漳州': [117.676205, 24.517065],

            //province 台湾

            '台湾': [121.3, 25.03],

            //province 河北

            '河北省': [114.522082, 38.048958],
            '张家口': [114.893782, 40.811188],
            '保定': [115.49481, 38.886565],
            '承德': [117.933822, 40.992521],
            '秦皇岛': [119.604368, 39.945462],
            '沧州': [116.863806, 38.297615],
            '廊坊': [116.703602, 39.518611],
            '衡水': [115.686229, 37.746929],
            '唐山': [118.183451, 39.650531],
            '邢台': [114.520487, 37.069531],
            '石家庄': [114.522082, 38.048958],
            '邯郸': [114.482694, 36.609308],

            //province 河南

            '河南省': [113.649644, 34.75661],
            '安阳': [114.351807, 36.110267],
            '信阳': [114.085491, 32.128582],
            '周口': [114.654102, 33.623741],
            '开封': [114.351642, 34.801854],
            '许昌': [113.835312, 34.02674],
            '漯河': [114.046061, 33.576279],
            '郑州': [113.649644, 34.75661],
            '三门峡': [111.181262, 34.78332],
            '驻马店': [114.049154, 32.983158],
            '洛阳': [112.447525, 34.657368],
            '南阳': [112.542842, 33.01142],
            '鹤壁': [114.29777, 35.755426],
            '商丘': [115.641886, 34.438589],
            '平顶山': [113.300849, 33.745301],
            '新乡': [113.91269, 35.307258],
            '焦作': [113.211836, 35.234608],
            '濮阳': [115.026627, 35.753298],

            //province 浙江

            '浙江省': [120.219375, 30.259244],
            '嘉兴': [120.760428, 30.773992],
            '台州': [121.440613, 28.668283],
            '舟山': [122.169872, 30.03601],
            '丽水': [119.929576, 28.4563],
            '宁波': [121.579006, 29.885259],
            '衢州': [118.875842, 28.95691],
            '绍兴': [120.592467, 30.002365],
            '湖州': [120.137243, 30.877925],
            '杭州': [120.219375, 30.259244],
            '金华': [119.652576, 29.102899],
            '温州': [120.690635, 28.002838],

            //province 陕西

            '陕西省': [108.953098, 34.2778],
            '安康': [109.038045, 32.70437],
            '延安': [109.50051, 36.60332],
            '榆林': [109.745926, 38.279439],
            '宝鸡': [107.170645, 34.364081],
            '西安': [108.953098, 34.2778],
            '汉中': [107.045478, 33.081569],
            '咸阳': [108.707509, 34.345373],
            '渭南': [109.483933, 34.502358],
            '商洛': [109.934208, 33.873907],
            '铜川': [108.968067, 34.908368],
        };
        var HFData = [ // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，合肥到各地区的线路
            [{name: '杭州'}, {name: '海外',value: 66}],
            [{name: '杭州'}, {name: '长春',value: 66}],
            [{name: '杭州'}, {name: '长沙',value: 66}],
            [{name: '杭州'}, {name: '贵阳',value: 66}],
            [{name: '杭州'}, {name: '深圳',value: 66}],
            [{name: '杭州'}, {name: '济南',value: 66}],
            [{name: '杭州'}, { name: '海口',value: 66}],
            [{name: '杭州'}, {name: '沈阳',value: 66}],
            [{name: '杭州'}, {name: '武汉',value: 66}],
            [{name: '杭州'}, {name: '昆明',value: 66}],
            [{name: '杭州'}, {name: '合肥',value: 66}],
            [{name: '杭州'}, {name: '杭州',value: 118}],
            [{name: '杭州'}, {name: '成都',value: 66}],
            [{name: '杭州'}, {name: '拉萨',value: 66}],
            [{name: '杭州'}, {name: '天津',value: 66}],
            [{name: '杭州'}, {name: '呼和浩特',value: 66}],
            [{name: '杭州'}, {name: '哈尔滨',value: 66}],
            [{name: '杭州'}, {name: '北京',value: 66}],
            [{name: '杭州'}, {name: '南宁',value: 66}],
            [{name: '杭州'}, {name: '南昌',value: 66}],
            [{name: '杭州'}, {name: '乌鲁木齐',value: 66}],
            [{name: '杭州'}, {name: '上海',value: 66}]
        ];
        var planePath = 'arrow'; // 箭头的svg
        // push进去线路开始-结束地点-经纬度
        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord
                    }, {
                        coord: toCoord
                    }]);
                }
            }
            return res;
        };
        var color = ['#fff', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
        // 数据
        var series = [];
        // 遍历由合肥到其他城市的线路
        [
            ['合肥', HFData]
        ].forEach(function(item, i) {
            // 配置
            series.push({
                // 系列名称，用于tooltip的显示
                name: item[0],
                type: 'lines',
                zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
                // effect出发到目的地 的白色尾巴线条
                // 线特效的配置
                effect: {
                    show: true,
                    period: 6, // 特效动画的时间，单位为 s
                    trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                    color: '#46bee9', // 移动箭头颜色
                    symbol: planePath,
                    symbolSize: 10 // 特效标记的大小
                },
                // lineStyle出发到目的地 的线条颜色
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2 //幅度
                    }
                },
                data: convertData(item[1]) //开始到结束数据
            }, {
                //出发地信息
                name: item[0],
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 6
                },
                lineStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FFFFA8' // 出发
                        }, {
                            offset: 1,
                            color: '#58B3CC ' // 结束 颜色
                        }], false),
                        width: 1.5,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                // 目的地信息
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function(val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function(dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        // 指定相关的配置项和数据
        var mapBoxOption = {
            geo: {
                map: 'china',
                roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                aspectScale: 0.75,
                zoom: 1.20,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#00a0c9'
                        }
                    },
                    emphasis: { // 对应的鼠标悬浮效果
                        show: false,
                        textStyle: {
                            color: "#00a0c9"
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#0083ce',
                        borderColor: '#0066ba',
                        textStyle: {
                            fontSize: 24,//不显示目的地文字
                            fontWeight: 'bold',
                            color: '#FFC051'
                            //color: '#6BEEFF' // 目的地颜色
                        }
                    },
                    emphasis: {
                        borderWidth: 0,
                        borderColor: '#0066ba',
                        areaColor: "#0494e1",
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series: series
        };
        // 使用制定的配置项和数据显示图表
        mapBoxEchart.setOption(mapBoxOption);
        // echart图表自适应
        window.addEventListener("resize", function() {
            mapBoxEchart.resize();
        });
    </script>

</body>

</html>
Lililich's Blog
66Article 38Tags 13Categories