Highcharts Maps与iconfont的基本使用方法

学习总结

通过今天的学习，我复习了vue的基本语法，学习使用iconfont图标库，深入了解了高德地图api和highcharts maps的应用场景和使用方法，最后实现了路由跳转地图！

通过课后的回顾，我总结了这次学习中的几个重要知识点：

highmap

官网，highcharts官网的文档相对于echarts比较全面。

安装

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>

获取地图数据文件（地图数据集）

• 获取一个js文件(推荐)

<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script src="https://data.jianshukeji.com/geochina/shanghai.js"></script>
<script>
    var mapdata = Highcharts.maps['cn/china'];
</script>

• 获取一个json数据
  使用之前要先安装jQuery

  $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(data) {
      var mapdata = data;
  });

编程

html

     <div id="container" style="hight:500px"></div>

js

     var map = Highcharts.mapChart('container', {
       series: [{
         mapData: mapdata,
         data: [{
             name: '北京',
             value: 2000,
             rank: 1
         }, {
             name: '上海',
             value: 1500,
             rank: 2
         }],
         joinBy: 'name'
       }]
     })

字体图标库的应用

• iconfont，登录
• 选取喜欢的图标，加入到购物车，加入到项目中
• 产生css文件
  http://at.alicdn.com/t/font_2033594_3i6jsn9xu2m.css
  将css通过link导入到public/index.html中
• 使用
  
• 自定义样式

 .other {
   color:lightblue;
   font-size:24px;
 }

svg图标

• iconfont，登录
• 下载svg图标
• 将svn拷贝到src/icons/svg
• 在路由src/router/index.js中使用