Echarts2的使用——绘制中国地图

Echarts官网
尽管官网里已有基础教程，但刚入门时难免会遇到不少问题，比如说中文乱码、不会引用示例图等，为此在此打卡记录以下，希望也能帮广大新手绕过一些坑。

注意使用前先安装

如何引用Echarts示例图

1. 打开入门教程，复制图标效果上方一栏的代码
   

2. 粘贴到记事本里，并保存为 .html文件
   注意： 文件名以 “ .html ” 为后缀，保存类型改为 “ 所有文件(* . *) ” ，编码改为 “ UTF-8 ”
   

3. 这里我命名为test.html，打开test.html，就能正常显示图表了（如果保存时候没有设“UTF-8”编码，那么显示的图片就会出现乱码）
   
   大部分人都能做出这个图表，但也就只能做到这一步，而我们更想要的是下列图表
   

4. 于是乎，点击任意所需图表，以中国地图为例 https://echarts.baidu.com/echarts2/doc/example/mix3.html
   如图所示，左侧为代码，右侧为效果图
   

5. 复制左侧的代码，打开刚刚的test.html文件，注意以记事本的方式打开
   

6. 找到 var option（瞪大眼睛找，小眼睛的可以使用Ctrl+F），然后删掉红框框里的内容，粘贴上我们刚刚复制的代码
   

7. 然后使用TAB键设置缩进（由于记事本太不友善了，于是我还是使用编译器来做吧，这里用的是Notepad++，能翻墙的点击链接就能下载了，不能的可以考虑考虑别的编译器或者百度一下，看看其他软件网站能不能下载，实在不行的话再喊我吧）

8. 集体选择刚刚粘贴上的代码，按TAB键进行缩进直至与
   var myChart = ec.init(document.getElementById(‘main’)); 对齐

9. 调好格式后，在 option 前加上“ var ”
   

10. Ctrl+F查找 type，复制type后面的内容（map）
    

11.粘贴到 “ echarts/chart/ ” 后面

12.保存后打开，效果如下，咦！好像少了饼图，原来导入图表类型不全

13.检查后发现还需导入 “ pie ”

在 ‘echarts/chart/map’ 后面加个逗号，底下加入以下代码

'echarts/chart/pie'

14.保存后打开 test.html 就能正常显示了