VS Code引入ECharts

Charts是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,提供了丰富的图表类型和交互能力。(摘自菜鸟教程)

下面我们来介绍一下VS Code引入ECharts的相关操作

图片

  1. 检查电脑是否已经安装了Java语言的软件开发工具包

  2. ECharts下载

    在网站首页,点击下载,进入到下载页面中,可以发现提供有多种下载获取方式。

    图片

    这里,我们选择从镜像网站下载源码。点击Source,进入镜像下载网站,点击该链接完成压缩包下载(约20MB)。

    图片

    下载完成后,解压文件,将dist文件夹下名为echarts.min.js的文件复制,并将其保存在自定义文件夹目录下。

    图片

  3. 在VS Code引入ECharts

    ①打开VS Code,在刚才保存echarts.min.js文件的文件夹内新建名为index.html的文件。(注意echarts.min.js和index.html在同一个文件夹中)

    ②在index.html中输入以下代码:

    图片

    ③在</head>之后,</html>之前,创建DOM容器

    图片

    ④用官方示例进行测试:将实例放在<body>和</body>中

    图片

    ⑤右键单击index.html,用浏览器打开index.html,效果如下:

    图片

    注:需要在VS Code中事先安装view in browser插件

    图片

    同样,我们也可以从官方网站下载其他实例代码进行学习

    (这是渐变折线图的实现效果)

    图片

    到此为止,恭喜你:你的ECharts学习之旅正式启航!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-行为型设计模式-命令模式

命令模式&#xff08;Command&#xff09;&#xff0c;将一个请求封装为一个对象&#xff0c;从而使你可用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以及支持可撤销的操作。[DP] // 命令接口 interface Command {void execute(); }// 具体命…

备考银行科技岗刷题笔记(持续更新版)

银行考试计算机部分复习 IEEE 802.11的帧格式 1.1 IEEE 802.11是什么&#xff1f; 802.11是国际电工电子工程学会&#xff08;IEEE&#xff09;为无线局域网络制定的标准。目前在802.11的基础上开发出了802.11a、802.11b、802.11g、802.11n、802.11ac。并且为了保证802.11更…

java SSM售后服务管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

源码特点 java SSM售后服务管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采用B/…

java Lambda表达式如何实现函数递归

java Lambda表达式如何实现函数递归 Lambda表达式本身并不直接支持递归&#xff0c;因为Lambda表达式是匿名的&#xff0c;并且没有名字可以引用自身来实现递归。但是&#xff0c;你可以通过其他方式在Java中使用Lambda表达式来实现递归。 一种常见的做法是使用一个函数式接口…

Scrapy与分布式开发(2.3):lxml+xpath基本指令和提取方法详解

lxmlxpath基本指令和提取方法详解 一、XPath简介 XPath&#xff0c;全称为XML Path Language&#xff0c;是一种在XML文档中查找信息的语言。它允许用户通过简单的路径表达式在XML文档中进行导航。XPath不仅适用于XML&#xff0c;还常用于处理HTML文档。 二、基本指令和提取…

Linux下阻塞IO驱动实验实例一

一. 简介 前面几篇文章学习了 Linux内核提供的 阻塞与非阻塞IO相关的知识。 应用程序以阻塞方式访问设备时,Linux内核提供了等待队列来处理。当应用程序以非阻塞方式访问设备时,Linux内核提供了 poll轮训机制来处理。 前面一篇文章学习了Linux内核提供的非阻塞式访问设备…

Java面试题:Java多线程与并发面试题解析及知识梳理,Java中的线程池(ThreadPool)以及其重要性

随着互联网技术的不断发展&#xff0c;Java作为后端开发的主流语言之一&#xff0c;其并发编程和多线程机制得到了越来越多的关注。面试中&#xff0c;关于Java内存模型、多线程以及并发相关的知识点往往是面试官关注的重点。本文将为大家解析三道综合面试题&#xff0c;涵盖Ja…

自编C++题目——几点了 hard ver.

题目难度 普及- 题目描述 一个老外用一口不流利的中文问你&#xff1a;“Xian zai ji dian le?”你看了一眼表&#xff0c;知道了现在是&#xff0c;你准备用这样的形式写在纸上&#xff1a; Now is m past/to h. 如果你看不懂&#xff0c;举个例子&#xff1a; 当h10&…

Rollup Summer:一览 Rollup 生态全景图

作者&#xff1a;Stanley&#xff0c;Kernel Ventures 编译&#xff1a;JIN&#xff0c;Techub News 短短几天内&#xff0c;ZKFair 的总锁定价值&#xff08;TVL&#xff09;已达到 1.2 亿美元&#xff0c;目前稳定在 8000 万美元&#xff0c;使其成为增长最快的 Rollup 之一…

SHARE 100M PRO:航测领域的多面手

在无人机航测领域&#xff0c;SHARE 100M PRO单镜头航测相机以其1.02亿像素的中画幅传感器和创新技术&#xff0c;正在重塑倾斜摄影的精度和效率。这款相机不仅在城市规划和土地管理中发挥着重要作用&#xff0c;还在环境监测、基础设施建设、农业管理等多个航测领域展现出其卓…

sheng的学习笔记-AI-多分类学习:ECOC,softmax

目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基本术语&#xff1a; 若我们欲预测的是离散值&#xff0c;例如“好瓜”“坏瓜”&#xff0c;此类学习任务称为“分类”(classification)&#xff1b; 若欲预测的是连续值&#xff0c;例如西瓜成熟度0.95、0.37&#xff0c;…

软考69-上午题-【面向对象技术2-UML】-关系

一、关系 UML中有4种关系&#xff1a; 依赖&#xff1b;关联&#xff1b;泛化&#xff1b;实现。 1-1、依赖 行为&#xff08;参数&#xff09;&#xff0c;参数就是被依赖的事物&#xff0c;即&#xff1a;独立事物。 当独立事物发生变化时&#xff0c;依赖事务行为的语义也…

IDEA中如何:创建Java可执行JAR文件

在IntelliJ IDEA中&#xff0c;你可以通过以下步骤来创建Java可执行JAR文件&#xff1a; 步骤1&#xff1a;编写Java代码 首先&#xff0c;在IntelliJ IDEA中编写你的Java代码。 步骤2&#xff1a;配置项目结构 确保你的项目已经正确配置了项目结构。如果你的项目是一个Mav…

js【详解】原型 vs 原型链

原型 每个 class 都有显示原型 prototype每个实例都有隐式原型_proto_实例的_proto_指向对应 class 的 prototype 如下范例&#xff1a; class Student 创建了 实例 xialuo 获取属性 xialuo.name 或执行方法 xialuo.sayhi()时&#xff0c;先在自身属性和方法寻找&#xff0…

Visual Studio 2022 Version 17.9 新功能

Visual Studio 2022 v17.9 为广大 C 开发者引入了一系列好用的新功能和改进优化。 内存布局 现在&#xff0c;你可以使用【内存布局&#xff0c;Memory Layout】功能以可视化的方式来查看对象&#xff0c;结构体及联合体的内存布局信息&#xff0c;这可比以前需要手动查看内存…

IOS面试题object-c 31-40

31、 Object-C对象如何进行内存布局&#xff1f;1&#xff0c;所有父类的成员变量和自己的成员变量&#xff08;实例变量、私有变量、以及声明为属性生成的变量&#xff09;都会存放在该对象所对应的存储空间中。 2&#xff0c;每个对象内部都有一个 isa 指针&#xff0c;指向他…

变量的生命周期详解

变量的生命周期详解 文章目录 变量的生命周期详解前言一、局部变量&#xff08;Local Variables&#xff09;二、成员变量&#xff08;Member Variables&#xff09;或实例变量&#xff08;Instance Variables&#xff09;三、静态变量&#xff08;Static Variables&#xff09…

CleanMyMac X4.15.0专为macOS设计的清理和优化工具

CleanMyMac X 是一款专为 macOS 设计的清理和优化工具。其基本功能和特点主要包括&#xff1a; 系统清理&#xff1a;CleanMyMac X 可以扫描并清除 macOS 系统中的垃圾文件&#xff0c;如缓存、日志、无用的语言文件等&#xff0c;从而释放硬盘空间并提高系统性能。应用程序管…

linux中操作服务器常用命令

在Linux中操作服务器时&#xff0c;常用的命令包括&#xff1a; ls&#xff1a;列出目录内容。 cd&#xff1a;切换目录。 pwd&#xff1a;显示当前所在的目录路径。 mkdir&#xff1a;创建一个新的目录。 rmdir&#xff1a;删除一个空的目录。 cp&#xff1a;复制文件或目录。…

GPT对话知识库——Systick中断-滴答定时器、PendSV中断-任务切换、SVC中断-系统底层分别是什么?优先级设置,使用场景,之间的联系

提问模型&#xff1a;GPT-4-TURBO-PREVIEW 提问时间&#xff1a;2024.03.06 1&#xff0c;问&#xff1a; 在实时操作系统freertos中&#xff0c;为什么需要把systick中断优先级设置成最低&#xff1f;systick和pendsv哪一个的中断优先级更低&#xff0c;为什么&#xff1f;举…