当前位置：网站首页 > 技术分类 > 正文

教你VUE+ECharts实战(附程序)（echarts在vue中的应用）

ztj100 2025-04-02 00:31 4 浏览 0 评论

各位同学，大家好。前面课程教大家使用ECharts来开发可视化图表。从本次课开始，我们介绍在VUE前端框架下，开发可视化图表的方法。

01 什么是VUE？

vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。

vue 的特性：

1.体积小

压缩后33k左右，下载速度很快。

2.运行效率高

基于虚拟dom，有助于减少dom的操作次数，带来性能上的提升。

3. 数据驱动视图。在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

4.双向数据绑定。在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分。

在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

02 VUE开发介绍

当前，vue 共有 3 个大版本，包括，1.x，2.x，3.x，其中3.x 版本的 vue 是未来企业级项目开发的趋势。

vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

基本开发步骤

① 导入 vue.js 的 script 脚本文件。

② 在页面中声明一个将要被 vue 所控制的 DOM 区域。

③ 创建 vm 实例对象（vue 实例对象）。

vue 组件

VUE根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

vue 是一个支持组件化开发的前端框架。vue 中规定：组件的后缀名是.vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

每个 .vue 组件都由 3 部分构成，分别是：

template，组件的模板结构。

script，组件的 JavaScript 行为。

style，组件的样式。

编写组件的步骤是这样的：

步骤1：以标签形式使用刚才注册的组件。

步骤2：使用import语法导入需要的组件。

步骤3：使用 components 节点注册组件。

03 实例讲解

接下来，我们给大家进行实例的讲解。

我们的软件版本是这样的：

我们现在进行实战讲解。

未完待续。

我是源动君，带领大家一起进步，谢谢观看。

vue echart

上一篇：你不知道的PostgreSQL数据库安装及实现跨库查询PG和Oracle
下一篇：在Vue3中使用Echarts的示例两种方法

教你VUE+ECharts实战(附程序)（echarts在vue中的应用）

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

教你VUE+ECharts实战(附程序)（echarts在vue中的应用）

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起