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官网首页文档里的配置项手册里的各种配置进行修改
配置项数据的配置含义
在这里插入图片描述结合例子理解更加清晰!
在这里插入图片描述在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值