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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐