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.rhkb.cn/news/273105.html

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

相关文章

WebMagic框架

1.webmagic框架 webmagic框架是一个Java实现的爬虫框架&#xff0c;底层依然是HttpClient和jsoup 组件&#xff1a; downloader&#xff1a;下载器组件PageProcessor&#xff1a;页面解析组件&#xff08;必须自定义&#xff09;scheculer&#xff1a;访问队列组件pipeline&am…

kafka查看消息两种方式(命令行和软件)+另附发送消息方式

1、命令行方式 ①找到kafka安装文件夹 ②执行命令 #指定offset为指定时间作为消息起始位置 kafka-consumer-groups.sh \ --bootstrap-server 20.2.246.116:9092 \ --group group_1 \ --topic lanxin_qiao \ --reset-offsets \ --to-datetime 2023-07-19T01:00:00.000 \ -exe…

Linux--基础命令

一.pwd&#xff08;Print Working Directory&#xff09; (1)pwd:显示当前位置的绝对路径; 二.cd (Change Directory) (2)cd:切换目录,cd的参数表示要切换的位置,可以使用绝对路径或者相对路径; 三.ls (3)ls:显示目录中的文件 (l a i) ls补充: 理解使用: -A 显现除 “.”和“…

20-Java备忘录模式 ( Memento Pattern )

Java备忘录模式 摘要实现范例 备忘录模式&#xff08;Memento Pattern&#xff09;保存一个对象的某个状态&#xff0c;以便在适当的时候恢复对象 备忘录模式属于行为型模式 摘要 1. 意图 在不破坏封装性的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在该对…

mockjs学习

1.前言 最近面试发现之前团队协同合作的项目没有mock数据难以向面试官直接展示&#xff0c;所以迟到得来速学一下mockjs。 参考视频&#xff1a;mockJs 妈妈再也不用担心我没有后端接口啦_哔哩哔哩_bilibili 一开始查阅了一些资料&#xff0c;先是看了下EasyMock&#xff0c…

利用websocket +定时器简易的实现一个网络聊天室

其实原理非常简单,就是客户端用户通过websoket来连接websocket服务端。然后服务端,收集每个用户发出的消息, 进而将每条用户的消息通过广播的形式推送到每个连接到服务端的客户端。从而实现用户的实时聊天。 // TODO : 我主要是讲一下实现思路。并未完善其功能。 1.后端 依赖 …

Spring MVC 全局异常处理器

如果不加以异常处理&#xff0c;错误信息肯定会抛在浏览器页面上&#xff0c;这样很不友好&#xff0c;所以必须进行异常处理。 1.异常处理思路 系统的dao、service、controller出现都通过throws Exception向上抛出&#xff0c;最后由springmvc前端控制器交由异常处理器进行异…

Tensorflow2.0+部署(tensorflow/serving)过程备忘记录Windows+Linux

Tensorflow2.0部署&#xff08;tensorflow/serving&#xff09;过程备忘记录 部署思路&#xff1a;采用Tensorflow自带的serving进模型部署&#xff0c;采用容器docker 1.首先安装docker 下载地址&#xff08;下载windows版本&#xff09;&#xff1a;https://desktop.docke…

Jmeter之Ramp-up Period(in seconds)

1、Ramp-up Period概念 &#xff08;in seconds&#xff09;–并发用户启动周期&#xff0c;告知JMeter 要在多长时间内启动全部Vuser用户。 2、为什么需要有“ramp-up period”&#xff0c;立即启动所有的并发用户数不是更好&#xff1f; 对于绝大多数的网址或应用&#xf…

【Prometheus】DataModel

数据模型 DataModel 指标 Metric metric 包含 metric name 和 metric label 格式&#xff1a; <metric name>{<label name><label value>, ...}例如&#xff1a;服务器 HTTP 接口 /messages 的总请求数 api_http_requests_total{method"POST",…

Jmeter(三) - 从入门到精通 - 测试计划(Test Plan)的元件(详解教程)

1.简介 上一篇中已经教你如何通过JMeter来创建一个测试计划&#xff08;Test Plan&#xff09;&#xff0c;那么这一篇我们就将JMeter启动起来&#xff0c;创建一个测试计划&#xff08;Test plan&#xff09;&#xff0c;然后给大家介绍一下测试计划&#xff08;Test Plan&am…

二,几何相交---4,BO算法---(1)接近性和可分离性

提了三个观点 1&#xff0c;如果一条直线&#xff08;比如竖直&#xff09;可以分开两个线段&#xff0c;则这两个线段不相交 2&#xff0c;只需要观察与隔离线相交的几个线段 3&#xff0c;从左向右扫描线只需要观察每个线段的两个端点和一些可能的相交点。

力扣18:三数之和

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 题意&#xff1a;给你一个包含 n 个整数的数组 nums&#xff0c;判断 nums 中是否存在三个元素 a&#xff0c;b&#xff0c;c &#xff0c;使得 a b c 0 &#xff1f;请你找出所有满足条件且不重复的三元组。 注意&a…

目标检测5:采用yolov8, RK3568上推理实时视频流

上一个效果图&#xff0c;海康球机对着电脑屏幕拍&#xff0c;清晰度不好。 RK3568接取RTSP视频流&#xff0c;通过解码&#xff0c;推理&#xff0c;编码&#xff0c;最终并把结果推出RTSP视频流。 RK3568 推理 数据集采用coco的80个种类集&#xff0c;通过从yovo8.pt&#x…

2024年AI辅助研发趋势:探索未来研发工作的AI应用

引言&#xff1a; 随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;技术已经深入到了各个行业&#xff0c;其中包括研发领域。在2024年&#xff0c;AI辅助研发将继续成为关注的焦点&#xff0c;因为它为研发工作带来了许多新的机遇和挑战。本文将探讨2024年…

【HTML】HTML基础7.3(自定义列表)

目录 标签 效果 代码 注意 标签 <dl> <dt>自定义标题</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd> 。。。。。。 </dl> 效果 代码 <dl><dt>蜘蛛侠系列</dt><dd>蜘蛛侠1</dd…

搭建nacos集群,并通过nginx实现负载均衡

nacos、eureka、consul、zookeeper等都是常用的微服务注册中心&#xff0c;这篇文章详细介绍一下在Ubuntu操作系统上搭建一个nacos的集群&#xff0c;以及通过nginx的反向代理功能实现nacos的负载均衡。 目录 一、安装nacos 1、安装nacos 2、修改nacos配置文件 3、创建naco…

css3中nth-child属性作用及用法剖析

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 标题&#xff1a;CSS3中nth-child属性作用及用法剖析 摘要&#xff1a;CSS3中的nth-child选择器允许我们根据元素位置来定位特定的元素…

android开发环境搭建

android开发环境搭建 Android 开发环境搭建1.JDK安装与配置1.1 Jdk官方下载1.2 JDK安装1.3 环境变量配置1.4 新建JAVA_HOME1.5 修改Path变量1.6 新建classpath1.7 验证环境是否配置完成 2.开发工具二选一1.如何创建一个工程2.工程的目录结构的了解3.与开发的相关的常规视图4.我…

【QA-SYSTEMS】CANTATA-解决Jenkins中build Cantata报错

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 解决Jenkins中build Cantata测试项目报找不到license server的错误。 2、 问题场景 在Jenkins中build Cantata测试项目&#xff0c;报错“Failed to figure out the license server correctly”。 3、软硬件环…