背景:

    做疫情数据管理可视化,需要用到热点图在web端进行数据可视化,而地图就是必不可少的一个,看完文档,可以解决大部分小白的问题,保姆级攻略,即使你的js,这些学得不咋样(我就是小菜鸟)

  •  步骤

环境:我的环境就是idea2021 有些小伙伴是node也可以,能创建html文档就可以了

资料: echats的官网:https://echarts.apache.org/zh/index.html 推荐谷歌或者火狐哈
          菜鸟:https://www.runoob.com/echarts/echarts-tutorial.html
视频资料:https://www.bilibili.com/video/BV1xR4y157YA 讲完直接能上手了 而且蛮清晰的 和看文档一样~虽然只有一节课 但是至少数据看到了 然后能演示哈~
       https://www.bilibili.com/video/BV1v7411R7mp?p=4 黑马的 很舒服 直接就是大屏 然后还交了怎么部署巴拉巴拉的  项目资源在简介 可以看看~

  1. 安装:(两个方法 一个本地(推荐)但是我的怎么都访问不到文件夹下面的echarts.js 所以就用线上的了 不太利于debug我觉得  但是懒人福音 一步到位)
    后续的tt:其实是可以访问的而且很快真香之后我也开始本地了哈哈哈哈(如果访问不到 应该是项目结构的问题,js是不是在web下面 建议是 js-echarts.js  然后放在一个 script就行
  • 方法一: 下载之后直接另存为 然后目录为 js-echarts.min.js

  • 方法二:外部引入 我用的是这个 比较稳定(我自己觉得的)

演示图:

当你完成了这个图之后 你肯定不满足于要这种简单图!没错 我也是 所以我看向了地图 那种贼酷眩的我也要! 完成这样的效果需要什么呢

很好!这时候你就需要打开百度   https://lbsyun.baidu.com/products/advantage?active=service 
你需要申请密钥 为什么呢

流程:

  1.   拿到ak  也就是一把钥匙 可以打开神秘大门 直接用大佬做的开源资源 类似接口?
    1. 需要注册 注册成为开发者 具体流程可以看这个博主~
      https://blog.csdn.net/xb_dxc/article/details/118305442?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~es_rank~default-5-118305442.es_vector_control_group&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BEak%E7%94%B3%E8%AF%B7&spm=1018.2226.3001.4187
    2. 在这个创建应用 因为基础的地图没有炫酷的效果 所以我选择了自定义 如果不要自定义的可以直接跳过
      https://lbsyun.baidu.com/index.php?title=jspopular  这个是那个直接的文档 详细阅读其实也可以
    3. 就是这里创建完 会有一个访问应用的码 也就是 AK 不要随便给人家哦~我为了debug方便 我直接白名单就是所有人

    4. 直接复制 把那个script里的ak改成自己的就行啦~~ 然后你就收获了一个地图 如果个性化的话 只需要在下面的代码里面写一个

  2. 问题来了 id是什么 那就是你前面个性化之后 发布 然后就可以获得 id 当然这是官方的一种方法 这里直接把两个方法给写了 看你方便哈!
    1.   方法一:发布样式 然后你就会收到一个id 然后用上面那个格式引用到项目里面就可以了 非常方便啊~
    2.   方法二:是使用json 也就是在个性化之后有一个下载样式的按钮在右边的窗口 下载样式 然后你就i是一个json文件的形式 然后通过JavaScriptAPI的方法调用生效
      可以看文档  https://lbsyun.baidu.com/index.php?title=jspopular/guide/custom

大概就是这样啦!感谢观看!继续肝毕设了!!!!祝我毕设顺利,也可以帮到一些小伙伴 话说 我博客也太朴素了,之后找个时间好好装修一下才行~~~

echarts入门到应用学习笔记的更多相关文章

  1. Java8——快速入门手册(学习笔记)

    github博文传送门 Java8特性学习笔记 Java8中新增了许多的新特性,在这里本人研究学习了几个较为常用的特性,在这里与大家进行分享.(这里推荐深入理解Java 8用于理解基础知识)本文分为以 ...

  2. React入门基础(学习笔记)

    这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...

  3. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  4. MySQL数据库应用 从入门到精通 学习笔记

    以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...

  5. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  6. &lt;C#入门经典&gt;学习笔记1之初识C#

    序言 选择< C#入门经典第五版>作为自学书籍,以此记录学习过程中的笔记与心得. C#简单介绍 1. C#是一种块结构的语言 2. C#区分大写和小写 C#变量 C#的变量定义与C语言相似 ...

  7. 01 【零基础入门】html学习笔记(1)

    之前学习了前端的一些基础知识,现在想深入地.精通地学习前端,往前端和全栈工程师方向发展. 之前学习前端主要是通过看视频,结合动手练习.现在认为看书+视频+实践,应该是最高效的学习方法.对于html.c ...

  8. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...

  9. 第一篇 入门必备 (Android学习笔记)

    第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具   ●Android之父 Android安迪·罗 ...

  10. Dubbo入门到精通学习笔记(十五):Redis集群的安装(Redis3+CentOS)、Redis集群的高可用测试(含Jedis客户端的使用)、Redis集群的扩展测试

    文章目录 Redis集群的安装(Redis3+CentOS) 参考文档 Redis 集群介绍.特性.规范等(可看提供的参考文档+视频解说) Redis 集群的安装(Redis3.0.3 + CentO ...

随机推荐

  1. 2022-11-05 Acwing每日一题

    本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...

  2. fastjson远程代码执行漏洞

    fastjson漏洞学习记录 免责声明: Fastjson 1.2.24 远程代码执行漏洞 漏洞说明 前提条件 影响范围 漏洞复现 Fastjson<=1.2.47 远程代码执行漏洞 Fastj ...

  3. centos8安装vsftpd

    注:ftp只能走相对路径传输文件,需要先cd到文件路径,然后ftp登陆,put上传,get下载 1. 装包与卸载 yum -y install vsftpd yum -y autoremove vsf ...

  4. NET 6 实现滑动验证码(一)、创建工程

    目录 实现滑动验证码的目的 创建.NET 6工程 实现滑动验证码的目的 传统验证码实现起来比较简单,但在OCR技术越来越成熟的情况下,验证码的破解难度越来越低,但如果将验证码难度加高(各种干扰背景,扭 ...

  5. UBOOT编译--- include/config.h、 include/autoconf.mk、include/autoconf.mk.dep、u-boot.cfg(三)

    1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概述 本节主要接上一节解析 :include/config.h. include/autoconf.mk ...

  6. 搜索与图论篇——DFS和BFS

    搜索与图论篇--DFS和BFS 本次我们介绍搜索与图论篇中DFS和BFS,我们会从下面几个角度来介绍: DFS和BFS简介 DFS数字排序 DFS皇后排序 DFS树的重心 BFS走迷宫 BFS八数码 ...

  7. 关于最新版本listen1 (2.1.6)的修改心得(添加下载功能)

    注:本文只作为技术交流 前言 再次感谢 listen1 的作者开发出如此强大的音乐播放器 项目地址 上一篇的文章没有解决跨域问题(命名不能正确命名), 上一篇文章 地址 这次解决了,并简单的美化了下载 ...

  8. vulnhub靶场之HACKSUDO: THOR

    准备: 攻击机:虚拟机kali.本机win10. 靶机:hacksudo: Thor,下载地址:https://download.vulnhub.com/hacksudo/hacksudo---Tho ...

  9. 如何使用 LinkedHashMap 实现 LRU 缓存?

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 在上一篇文章里,我们聊到了 HashMap 的实现原理和源码分析,在源码分析的过程中,我 ...

  10. 跳出foreach循环

    直接return false没用,需要用throw来跳出foreach 1 try { 2 this.categoryList.forEach((item, index) => { 3 if ( ...