Vscode&ECharts之基础使用

Vscode生成文件

第一步,进入vscode软件首页界面以后,我们点击顶部的按钮【文件】
第二步,点击文件以后,选择点击【新建文件】或者使用【快捷键ctri+n】,就建好一个文件了(这个时候还不是HTML文件)
第三步,如何变成HTML呢?我们点击【文件】然后点击【保存】或者按快捷键【ctrl+s】进入保存界面,我们【输入html文件名称】,选择html的后缀【html】,最后点击保存
第四步,我们在html文件上输入感叹号,然后按键盘的Tab建

ECharts简介

在这里插入图片描述ECharts官方地址:点击此处跳转
优点:
在这里插入图片描述

ECharts基本使用

进去它的官网点击导航栏中文档里使用手册即可了解使用步骤。
步骤一:下载并引入echarts.js文件(图表依赖这个js库)
直接在官网首页点击下载按钮
步骤二:准备一个具备大小的DOM容器(生成的图表会放入这个容器)
准备容器:


在这里插入图片描述

步骤三:初始化echarts实例对象(实例化echarts对象)
步骤四:指定配置和数据option(根据具体需求修改配置选项)

document.querySelector()用来获取盒子内容
在这里插入图片描述花括号的数据是我们在echarts官网选择的图形模板数据

步骤五:将配置项设置给echarts实例对象(让echarts对象根据修改好的配置生效)
将配置对象数据设置给实例化对象(使用setOption()函数)
在这里插入图片描述

修改echarts模板的数据

根据我们的需求修改第四步的配置项数据即可
可参考echarts官网首页文档里的配置项手册里的各种配置进行修改
配置项数据的配置含义
在这里插入图片描述结合例子理解更加清晰!
在这里插入图片描述在这里插入图片描述

  • 4
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在VSCode中编写Echarts图表可以使用pyecharts库来实现。Pyecharts是一个用于生成Echarts图表的Python库,可以方便地在Python中使用数据生成图表。首先,你需要安装pyecharts库,可以使用pip命令进行安装。然后,你可以在VSCode中创建一个Python文件,并导入pyecharts库。接下来,你可以使用pyecharts提供的API来创建和配置图表,例如设置标题、轴标签、数据等。最后,使用pyecharts提供的渲染方法将图表渲染为HTML文件或直接在VSCode中显示。通过这种方式,你可以在VSCode中方便地编写Echarts图表。 #### 引用[.reference_title] - *1* *3* [【Python】Vscode使用pyecharts 3D散点图实现数据可视化](https://blog.csdn.net/litr666/article/details/131190549)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VScode如何在vue 的项目中使用echarts?(教你从安装vue、echarts到demo的实现)](https://blog.csdn.net/Chen__FY/article/details/129768124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值