作者:尛妙苗_549 | 来源:互联网 | 2023-09-09 11:57
Echarts官网
尽管官网里已有基础教程,但刚入门时难免会遇到不少问题,比如说中文乱码、不会引用示例图等,为此在此打卡记录以下,希望也能帮广大新手绕过一些坑。
注意使用前先安装
如何引用Echarts示例图
-
打开入门教程,复制图标效果上方一栏的代码
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/c5725cb6c8122548.png)
-
粘贴到记事本里,并保存为 .html文件
注意: 文件名以 “ .html ” 为后缀,保存类型改为 “ 所有文件(* . *) ” ,编码改为 “ UTF-8 ”
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/6a508680861fe34b.png)
-
这里我命名为test.html,打开test.html,就能正常显示图表了(如果保存时候没有设“UTF-8”编码,那么显示的图片就会出现乱码)
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/ceede9e2df51ab29.png)
大部分人都能做出这个图表,但也就只能做到这一步,而我们更想要的是下列图表
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/96a6766a705408b9.png)
-
于是乎,点击任意所需图表,以中国地图为例 https://echarts.baidu.com/echarts2/doc/example/mix3.html
如图所示,左侧为代码,右侧为效果图
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/adf424a6d3ebb2f5.png)
-
复制左侧的代码,打开刚刚的test.html文件,注意以记事本的方式打开
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/7842a87b152f2f94.png)
-
找到 var option(瞪大眼睛找,小眼睛的可以使用Ctrl+F),然后删掉红框框里的内容,粘贴上我们刚刚复制的代码
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/0d032da5ddfe68c0.png)
-
然后使用TAB键设置缩进(由于记事本太不友善了,于是我还是使用编译器来做吧,这里用的是Notepad++,能翻墙的点击链接就能下载了,不能的可以考虑考虑别的编译器或者百度一下,看看其他软件网站能不能下载,实在不行的话再喊我吧)
-
集体选择刚刚粘贴上的代码,按TAB键进行缩进直至与
var myChart = ec.init(document.getElementById(‘main’)); 对齐
-
调好格式后,在 option 前加上“ var ”
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/fd78ee7abec51b58.png)
-
Ctrl+F查找 type,复制type后面的内容(map)
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/5f33b61fed61d5ec.png)
11.粘贴到 “ echarts/chart/ ” 后面
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/bb838155dc23bd0f.png)
12.保存后打开,效果如下,咦!好像少了饼图,原来导入图表类型不全
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/762f1f1e285ea816.png)
13.检查后发现还需导入 “ pie ”
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/1b9a2ebdc78adafb.png)
在 ‘echarts/chart/map’ 后面加个逗号,底下加入以下代码
'echarts/chart/pie'
14.保存后打开 test.html 就能正常显示了
![在这里插入图片描述](https://img3.php1.cn/3cdc5/6447/b64/3339d15f946089c2.png)