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学习之旅正式启航!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每日一题-环形链表的约瑟夫问题

&#x1f308;个人主页: 会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” /*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param n int整型 * param m int整型 * return int整型*/ typedef struct…

计算机考研|四个月跨考408详细教程(可实操)

4个月准备408时间是相当的紧张.... 数学也是一大头&#xff0c;所以要做的就是最高效汲取分数&#xff0c;不做无用功&#xff01; 在去年备考期间我自己总结了一套408的复习方法&#xff0c;408和数学同时进行&#xff0c;两不耽误&#xff0c;在这里分享给你&#xff01;&a…

喜报|炼石免改造数据安全入选上海网安产业创新大会优秀案例

近日&#xff0c;上海网络安全产业创新大会隆重召开&#xff0c;上海普陀区委副书记、区长肖文高&#xff0c;上海市经济和信息化委员会总工程师葛东波出席并致辞&#xff0c;普陀区副区长肖立出席。大会以“产业赋能、生态打造”为主题&#xff0c;为发掘数据安全领域的优秀产…

【数据结构】二、线性表:4.循环链表的定义及其基本操作(循环单链表,循环双链表的初始化、判空、判断头结点、尾结点、插入、删除)

文章目录 4.循环链表4.1循环单链表4.1.1初始化4.1.2判断单链表是否为空4.1.3判断p结点是否为循环单链表的表尾结点 4.2循环双链表4.2.1初始化4.2.2判断循环链表是否为空4.2.3判断结点p是否为循环双链表的表尾结点4.2.4双链表的插入4.2.5双链表的删除 4.循环链表 4.1循环单链表…

一文教你搞懂Vue生命周期

Vue生命周期 生命周期示意图 Vue3 组件创建阶段 new vue new一个vue的实例对象&#xff1b;此时会进入组件的创建过程&#xff08;该组件在代码中被注册并使用时&#xff0c;就代表着其被new了一个新的实例对象&#xff09;。 Init Events & Lifecycle 初始化组件的事件和…

【python爬虫】免费爬取网易云音乐完整教程(附带源码)

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属专栏:爬虫实战,零基础、进阶教学 景天的主页:景天科技苑 文章目录 网易云逆向网易云逆向 https://music.163.com/ 下载云音乐 胡广生等,可以选择自己喜欢的歌曲 首先,我们可以先根据…

爬虫入门到精通_框架篇15(Scrapy框架安装)

1 Scrapy安装 Scrapy的安装有多种方式&#xff0c;它支持Python2.7版本及以上或Python3.3版本及以上。下面说明Python3环境下的安装。 Scrapy依赖的库比较多&#xff0c;至少需要依赖库有Twisted14.0,lxml 3.4,pyOpenSSL 0.14。而在不同平台环境又各不相同&#xff0c;所以在安…

如何更改照片分辨率?图片分辨率在线修改方法

当我们需要打印照片时&#xff0c;可能需要调整照片的dpi值以适应特定的打印设备和输出质量需求。较高的dpi值可以提供更好的打印质量和细节&#xff0c;而较低的dpi值可以减小打印文件的大小&#xff0c;如何更改照片分辨率呢&#xff1f;想要改图片分辨率的话可以试试本文分享…

LORA: LOW-RANK ADAPTATION OF LARGE LAN-GUAGE MODELS

TOC 1 前言2 方法2.1 LOW-RANK-PARAMETRIZED UPDATE MATRICES 1 前言 1) 提出背景 大模型时代&#xff0c;通常参数都是上亿级别的&#xff0c;若对于每个具体任务都要去对大模型进行全局微调&#xff0c;那么算力和资源的浪费是巨大的。 根据流形学习思想&#xff0c;对于数…

专题一 -双指针 - leetcode 611. 有效三角形的个数 | 中等难度

leetcode 611. 有效三角形的个数 leetcode 611. 有效三角形的个数 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 611. 有效三角形的个数 | 中等难度 1. 题目详情 给定一个包含非负整数的…

基于SSM技术的分布式销售平台设计与实现

目 录 摘 要 I Abstract II 1 绪论 1 1.1 课题研究背景与意义 1 1.2 国内外研究现状 1 1.2.1 国外研究现状 1 1.2.2 国内研究现状 2 1.3 本章小结 2 2 工程开发技术介绍 3 2.1 Web前端技术栈 3 2.1.1 HTML&CSS 3 2.1.2 jQuery 3 2.1.3 JSP 3 2.2 服务端开发技术栈 3 2.2.1…

ChatGPT 升级出现「我们未能验证您的支付方式/we are unable to authenticate」怎么办?

ChatGPT 升级出现「我们未能验证您的支付方式/we are unable to authenticate」怎么办&#xff1f; 在订阅 ChatGPT Plus 时&#xff0c;有时候会出现以下报错 &#xff1a; We are unable to authenticate your payment method. 我们未能验证您的支付方式。 出现 unable to a…

基于apicloud+vue的汽车服务系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 课题背景 3 1.1 课题的研究背景与意义 3 1.2研究现状 3 1.3本章小结 4 2 系统开发相关技术 5 2.1 ApiCloud开发工具 5 2.2 MVC架构模型 5 2.3 MySQL数据库 5 2.4 Hibernate、Spring框架 6 2.5 本章小结 6 3 系统分析 7 3.1 系统需求分析 …

Uber/Google Golang编码标准深度分析

良好的代码风格对于开发优秀的产品至关重要&#xff0c;本文通过分析比较三部流传甚广的Golang代码风格指南&#xff0c;介绍了Go代码风格要点&#xff0c;并介绍了通过工具实现代码检查的方式。原文: Mastering Go: In-Depth Analysis of Uber and Google’s Coding Standards…

启动vue项目执行npm run serve报错 : error in ./src/element-variables.scss

error in ./src/element-variables.scss 问题原因 node-sass的版本问题 解决方式 我直接更新了一下node-sass&#xff0c;就好了 npm install node-sass 再次执行就可以执行成功了

双色球选号 python

题目描述 编写一个能实现双色球选号的小程序。双色球选号由7个数字组成&#xff0c;其中有6个红球&#xff0c;其号码的取值范围为[1,33];一个蓝球的取值范围为[1,16],要求6个红球从小到大排列&#xff0c;蓝球在最后输出。其输出格式为09 12 16 20 30 33 | 03。&#xff08;注…

SpringMVC03、HelloSpring

3、HelloSpring 3.1、配置版 新建一个Moudle &#xff0c; springmvc-02-hello &#xff0c; 添加web的支持&#xff01; 确定导入了SpringMVC 的依赖&#xff01; 配置web.xml &#xff0c; 注册DispatcherServlet <?xml version"1.0" encoding"UTF-8…

软件工程顶会——ICSE '24 论文清单、摘要

1、A Comprehensive Study of Learning-based Android Malware Detectors under Challenging Environments 近年来&#xff0c;学习型Android恶意软件检测器不断增多。这些检测器可以分为三种类型&#xff1a;基于字符串、基于图像和基于图形。它们大多在理想情况下取得了良好的…

Vue时间轴

之前有这样子的需求没有用第三方插件于是自己写一个简单的时间轴 时间轴滚动条并左右切换滚动条位置相对应移动 <div class"time-scrollbar"><div v-if"timeLineData.length>0" class"scrollbar-content"><div class"ar…

基于FastAPI构造一个AI模型部署应用

前言 fastapi是目前一个比较流行的python web框架&#xff0c;在大模型日益流行的今天&#xff0c;其云端部署和应用大多数都是基于fastapi框架。所以掌握和理解fastapi框架基本代码和用法尤显重要。 需要注意的是&#xff0c;fastapi主要是通过app对象提供了web服务端的实现代…