对于 Vue CLI 项目如何引入Echarts以及动态获取数据

🚀个人主页:一颗小谷粒

 🚀所属专栏:Web前端开发

很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~

目录

1、数据画卷—Echarts介绍

1.1 什么是Echarts?

1.2 Echarts官网地址

2、Vue CLI 项目集成 Echarts

2.1 通过npm命令下载

2.2 在main.js导入echarts

2.3 入门案例搭建

3、与后端交互 动态获取数据

3.1 前端发送/接收请求 

3.2 后端数据库信息 

3.3 后端业务处理

4、Echarts主题下载及设置

4.1 主题下载

4.2 主题设置 


1、数据画卷—Echarts介绍

1.1 什么是Echarts?

Echarts 是一个基于 Javascript 的 数据可视化 图标库。它提供了丰富的图表类型,具有高度可定制性、且交互性强。广泛应用于数据可视化平台、网页数据分析工具、移动端应用等场景。最初由百度公司开发,于2018年捐献给了apache软件基金会。

1.2 Echarts官网地址

Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。icon-default.png?t=O83Ahttps://echarts.apache.org/zh/index.html

2、Vue CLI 项目集成 Echarts

2.1 通过npm命令下载

npm install echarts --save

2.2 在main.js导入echarts

import * as echarts from 'echarts'; //导入echarts组件
Vue.prototype.echarts = echarts; //将echarts组件绑定到vue对象

2.3 入门案例搭建

(这里我以饼状图为例演示)

<template><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</template><script>export default {data() {return {}},methods: {initChart() {// 基于准备好的dom,初始化echarts实例var myChart = this.echarts.init(document.getElementById('main'),);var option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{value: 1048,name: 'Search Engine'},{value: 735,name: 'Direct'},{value: 580,name: 'Email'},{value: 484,name: 'Union Ads'},{value: 300,name: 'Video Ads'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}},mounted() {this.initChart();}}
</script><style>
</style>

这里的数据data是写死的,那么如何从后端动态获取数据呢?

3、与后端交互 动态获取数据

技术栈:Spring+Springboot+Mybatis

工具:IDEA+MySql

3.1 前端发送/接收请求 

这里先把前端代码给大家: 

<template><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</template><script>	export default {data() {return {}},methods: {initChart() {this.$http.get("api/echartsCtl/pie").then((resp) => {// 基于准备好的dom,初始化echarts实例var myChart = this.echarts.init(document.getElementById('main'));var option = {legend: {orient: 'vertical',left: 'left'},tooltip: {trigger: 'item'},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},saveAsImage: {show: true}}},calculable: true,series: [{name: 'Access From',type: 'pie',radius: '50%',data: resp.data.result,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})}},mounted() {this.initChart();}}
</script><style>
</style>

这里其实只改变了两处:

  • 通过axios向后端发送请求.
  • data接收来自后端响应的数据.

 

3.2 后端数据库信息 

以该表为例,我们要查询每种类型(type)的总销售额(price),sql如下:

select type,sum(price) from sales group by type

 

那么我们要做的就是将查询到的数据在前端通过饼状图来显示,具体要怎么做呢?

3.3 后端业务处理

3.3.1 创建一个实体类,将数据封装到对象中

注意:这里的属性名必须为 value 和 name 

3.3.2 dao层与数据库交互 

3.3.3 向前端响应结果

 效果展示:

4、Echarts主题下载及设置

 

4.1 主题下载

Echarts提供了许多精美的主题颜色,且具有可定制性,那么如何更换默认的主题颜色呢?

首先,在我们最开始下载 Echarts组件时就已经默认自带下载了一部分主题了,它们下载在了 node_modules / echarts / theme 目录下,如图所示:

除了这些默认自带的主题,我们也可以在Echarts官网下载,如图所示: 

4.2 主题设置 

在程序中设置主题只需导入和定义即可,如图所示:

效果展示:




本次的分享就到此为止了,希望我的分享能给您带来帮助,创作不易也欢迎大家三连支持,你们的点赞就是博主更新最大的动力!如有不同意见,欢迎评论区积极讨论交流,让我们一起学习进步!有相关问题也可以私信博主,评论区和私信都会认真查看的,我们下次再见

 博主wx:g2279605572 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十三周:机器学习笔记

第十三周周报 摘要Abstract一、机器学习——Transformer&#xff08;上&#xff09;1. Sequence to Sequence(Seq 2 Seq&#xff0c;序列到序列模型) 的应用2. Transformer的结构2.1 Transformer encoder&#xff08;Transformer 编码器&#xff09; 二、Pytorch学习1. 网络模型…

将图片资源保存到服务器的盘符中

服务类 系统盘符&#xff1a;file-path.disk&#xff08;可能会变&#xff0c;配置配置文件dev中&#xff09;文件根路径&#xff1a;file-path.root-path&#xff08;可能会变&#xff0c;配置配置文件dev中&#xff09;http协议的Nginx的映射前缀&#xff1a;PrefixConstant.…

go解决引入私有包报错“Repository owner does not exist“的两种方式

当你写好引入的私有包,执行go mod tidy报错: Gogs: Repository owner does not exist fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 目前我的两种解决方案: 一、拉群整个…

freeRDP OPenssl

libusb需要下载 我使用的是VS2019编译 所以需要include 与vs2019 在cmake里面修改路径 C:/Users/JPM/source/repos/freeRDP/FreeRDP-stable-2.0/libusb-1.0.24/include/libusb-1.0 C:/Users/JPM/source/repos/freeRDP/FreeRDP-stable-2.0/libusb-1.0.24/VS2019/MS64/static/l…

模形式与态、势、感、知

模形式是数学中一个重要的研究领域&#xff0c;主要出现在数论、代数几何和表示论等多个学科中。模形式可以视为在某种意义上具有“对称性”的函数&#xff0c;这些函数在特定的条件下满足一定的变换性质。具体来说&#xff0c;模形式是定义在上半平面上的复值函数&#xff0c;…

第九节 Opencv自带颜色表操作

知识点&#xff1a;Look Up lTable&#xff08;LUT&#xff09;查找表 了解LUT查找表的作用与用法&#xff0c;代码实现与API介绍 -applyColorMap&#xff08;src,dst,COLORMAP&#xff09; -src表示输入图像 -dst表示输出图像 匹配到的颜色LUT&#xff0c;Opencv支持13种…

TDOA方法求二维坐标的MATLAB代码演示与讲解

引言 时间差定位(Time Difference of Arrival, TDOA)是一种用于确定信号源位置的技术,广泛应用于无线通信、声学定位等领域。通过测量信号到达多个接收器的时间差,可以计算出信号源的二维坐标。本文将通过MATLAB代码演示如何使用TDOA方法来求解二维坐标。 TDOA原理 TDOA…

第50篇 汇编语言实现中断<六>

Q&#xff1a;怎样设计汇编语言程序使用定时器中断实现实时时钟&#xff1f; A&#xff1a;此前我们曾使用轮询定时器I/O的方式实现实时时钟&#xff0c;而在本实验中将采用定时器中断的方式。新增的interval_timer.s间隔定时器的中断服务程序中增加了TIME变量&#xff0c;还更…

JavaScript的条件语句

if条件语句 if结构先判断一个表达式的布尔值&#xff0c;然后根据布尔值的真伪&#xff0c;执行不同的语句。所谓布尔值&#xff0c;指的是JavaScript 的两个特殊值&#xff0c;true表示真&#xff0c;false表示伪。 if语句语法规范 if(布尔值){语句;}var m3if(m3){console.l…

STM32嵌入式编程学习到提高:【4】UART串口打印

------------------------------------------------------------------------------------------------------------------------- 工程文件&#xff1a;放在百度云盘里&#xff0c;需要的自行下载&#xff01;&#xff01;&#xff01; 链接: https://pan.baidu.com/s/14gRne…

Flowable7.0.1框架严重bug,流程跳转到指定节点导致流程中断

一、Bug描述 使用7.0.1版本的 moveActivityIdsToSingleActivityId 或 moveExecutionsToSingleActivityId实现节点跳转&#xff0c;程序不会报错&#xff0c;但是act_ru_task 没有生成新的任务&#xff0c;导致流程中断&#xff0c;这是相当严重的bug。 经过多次测试&#xff…

【学习笔记】TLS/SSL握手之Records

TLS / SSL会话是由记录&#xff08;Records&#xff09;所组成&#xff0c;有4种records HandshakeAlertChange Cipher SpecApplication DataHandshake和Alert Records被分为子类型&#xff08;Subtypes&#xff09;&#xff1a; Handshake&#xff1a;Client HelloHandshake&a…

使用 Llama-index 实现的 Agentic RAG-Router Query Engine

前言 你是否也厌倦了我在博文中经常提到的老式 RAG(Retrieval Augmented Generation | 检索增强生成) 系统&#xff1f;反正我是对此感到厌倦了。但我们可以做一些有趣的事情&#xff0c;让它更上一层楼。接下来就跟我一起将 agents 概念引入传统的 RAG 工作流&#xff0c;重新…

Apache Iceberg 数据类型参考表

Apache Iceberg 概述-链接 Apache Iceberg 数据类型参考表 数据类型描述实例方法注意事项BOOLEAN布尔类型&#xff0c;表示真或假true, false用于条件判断&#xff0c;例如 WHERE is_active true。确保逻辑条件的正确性。INTEGER32位有符号整数42, -7可用于计算、聚合&#xf…

基于 Redis 实现滑动窗口的限流

⏳ 限流场景&#xff1a;突发流量&#xff0c;恶意流量&#xff0c;业务本身需要 基于 Redis 实现滑动窗口的限流是一种常见且高效的做法。Redis 是一种内存数据库&#xff0c;具有高性能和支持原子操作的特点&#xff0c;非常适合用来实现限流功能。下面是一个使用 Redis 实现…

Ubuntu环境下字体安装

本文介绍Ubuntu环境下字体安装。 软件&#xff08;如Qt应用软件&#xff09;开发过程中经常会涉及到字体的选择&#xff0c;有时候Ubuntu环境下并没有我们想要的字体&#xff0c;本文介绍常用字体及在Ubuntu环境下如何安装。 1.常用开源字体 有些字体商用并不是免费的&#…

Java搭建法律AI助手,快速实现RAG应用

使用AI4J快速接入RAG应用 | 结合Pinecone实现法律AI助手RAG应用 本博文给大家介绍一下如何使用AI4J快速接入OpenAI大模型&#xff0c;并且结合Pinecone向量数据库实现一个刑法AI助手的RAG应用。 介绍 由于SpringAI需要使用JDK17和Spring Boot3&#xff0c;但是目前很多应用依…

idea中.git文件夹存在但是没有git功能列表

1.问题&#xff1a; 该项目中已经将.git文件夹置入了&#xff0c;但是idea中却没有git相关的功能列表&#xff0c;如图&#xff1a; 2.解决办法&#xff1a; 在【文件】-【设置】-【版本控制】-【目录映射】中添加目录映射应用就好了 &#xff08;【File】 -> 【S…

为家增添幸福气息:八卦福·门牌的吉祥寓意

八卦福门牌作为一种独特的家居装饰&#xff0c;不仅美观&#xff0c;还蕴含着丰富的文化内涵和吉祥寓意。它通过融合八卦与“福”字的象征&#xff0c;提升家庭的幸福气息。以下将详细探讨八卦福门牌的吉祥寓意以及如何为家庭增添幸福。 八卦福门牌的吉祥寓意 八卦的象征&…

HTML、CSS

初识web前端 web标准 Web标准也称为网页标准&#xff0c;由一系列的标准组成&#xff0c;大部分由W3C (World Wide Web Consortium&#xff0c;万维网联盟) 负责制定。三个组成部分: HTML: 负责网页的结构(页面元素和内容)。CSS: 负责网页的表现(页面元素的外观、位置等页面样…