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.hqwc.cn/news/520928.html

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

相关文章

数据开发 - 面经(已OC) - 北京中海通

投递流程&#xff1a; 2023.12.28 Boss 打招呼 2024.1.3 约面 2024.1.4 上午面试 &#xff08;手机端腾讯会议&#xff09; 2024.1.5 上午 通知面试通过 腾讯会议手机端无法和录影机同时运行&#xff0c;录音无效&#xff0c;之后注意使用电脑面试 面试流程&#xff1a;首…

【Tauri】(4):整合Tauri和actix-web做本地大模型应用开发,可以实现session 登陆接口,完成页面展示,进入聊天界面

1&#xff0c;视频地址 https://www.bilibili.com/video/BV1GJ4m1Y7Aj/ 【Tauri】&#xff08;4&#xff09;&#xff1a;整合Tauri和actix-web做本地大模型应用开发&#xff0c;可以实现session 登陆接口&#xff0c;完成页面展示&#xff0c;进入聊天界面 使用国内代理进行加…

基于pytest的证券清算系统功能测试工具开发

需求 1.造测试数据&#xff1a;根据测试需要&#xff0c;自动化构造各业务场景的中登清算数据与清算所需起来数据 2.测试清算系统功能&#xff1a; 自动化测试方案 工具设计 工具框架图 工具流程图 实现技术 python, pytest, allure, 多进程&#xff0c;mysql, 前端 效果 测…

容器+虚拟机双引擎,ZStack Edge云原生超融合打通业务最后一公里

企业数字化转型的焦点正在发生变化&#xff0c;云基础设施由资源到应用&#xff0c;数据中心从核心到边缘。面向云原生趋势&#xff0c;围绕应用升级&#xff0c;新一代超融合产品——云原生超融合应运而生。 云原生与边缘计算趋势催生云原生超融合 当前&#xff0c;企业客户…

微信小程序简单输入框界面(实现选择标签功能)

微信小程序简单输入框界面&#xff0c;实现选择标签功能、输入框字数计数的简单界面功能。 1、js代码&#xff1a; Page({/*** 页面的初始数据*/data: {count: 500,labelList: [{text: 开心,checked: true}, {text: 难受想哭,checked: true},{text: 快乐,checked: false}, {te…

如何确保OKR与公司的整体战略保持一致?

深入理解公司战略 首先&#xff0c;团队或个人需要全面、深入地理解公司的整体战略和目标。这包括了解公司的长期规划、市场定位、竞争优势以及核心竞争力等方面。只有对公司的战略有清晰的认识&#xff0c;才能确保OKR与之保持一致。 如何确保OKR与公司的整体战略保持一致&a…

Visual Studio如何进行类文件的管理(类文件的分离)

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 一、问题背景 实际开发中&#xff0c;类的声明放在头文件中&#xff0c;给程序员看类的成员和方法。比如&#xff1a;Dog.h&#xff08;类的声明文件&#xff09; 类的成员函数的具体…

基于 JavaAgent 代理技术实现 class 字节码插桩(bytebuddy)

先描述一个场景&#xff0c;生产有一个正在运行的java项目&#xff0c;以某 springboot-service.jar 为例&#xff0c;项目发布后发现了某个http接口响应较慢&#xff0c;此时你希望定位这个http接口执行过程中依次调用的几个主要方法的分别执行耗时&#xff0c;用来作为进一步…

开启AI绘画新纪元:让创意在指尖绽放

文章目录 一、了解AI绘画的基本原理二、选择合适的AI绘画工具三、掌握AI绘画的基本技巧四、借鉴与创新&#xff1a;从模仿到创作五、参与社区交流&#xff0c;共同成长《AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通》亮点推荐内容简介作者简介目录 在科技日新…

MySQL--优化(索引--聚簇和非聚簇索引)

MySQL–优化&#xff08;索引–聚簇和非聚簇索引&#xff09; 定位慢查询SQL执行计划索引 存储引擎索引底层数据结构聚簇和非聚簇索引索引创建原则索引失效场景 SQL优化经验 一、聚簇索引 聚簇索引&#xff1a;将数据存储与索引放到了一块&#xff0c;索引结构的叶子节点保存…

测试一下 Anthropic 宣称超过 GPT-4 的 Claude 3 Opus

测试一下 Anthropic 宣称超过 GPT-4 的 Claude 3 Opus 0. 引言1. 测试 Claude 3 Opus 0. 引言 今天测试一下 Anthropic 发布的 Claude 3 Opus。 3月4日&#xff0c;Anthropic 宣布推出 Claude 3 型号系列&#xff0c;该系列在广泛的认知任务中树立了新的行业基准。该系列包括…

NLP_文本数据分析_3(代码示例)

目标 了解文本数据分析的作用.掌握常用的几种文本数据分析方法. 一、 文件数据分析介绍 文本数据分析的作用: 文本数据分析能够有效帮助我们理解数据语料, 快速检查出语料可能存在的问题, 并指导之后模型训练过程中一些超参数的选择. 常用的几种文本数据分析方法: 标签数量分…