echarts的学习(九)前端项目开发,vue项目的搭建,也就是环境的配置

vue+echarts实现数据展示大屏 简单介绍 一个数据展示大屏。适用于中小型项目展示,只做学习交流。 技术栈 前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发IDE:IDEA 项目展示 PS:图表使用数据均为自造数据,与任何应用或者数据均无关。 项目展示效果: 1、图表自动切换,图表不同类目切换效果 2、大屏主题切换 3、单独图表放大缩小效果 开发准备 一、前端项目的准备 1.1. vue-cli 脚手架创建项目 1.1.1 脚手架环境安装 node install 阅读详情

在这里插入图片描述

搭建一个vue的项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除一些无关的文件:

在这里插入图片描述
在这里插入图片描述

静态资源的引入

在这里插入图片描述

项目的基本配置

端口号的配置 或者自动打开浏览器的配置

在这里插入图片描述

全局echarts对象的挂载

就是这个echarts在各个组件里面都会使用,所以,我们要在vue项目里面的全局使用

在这里插入图片描述
这个就是将echarts的js文件全局引入了

在main.js里面进行使用

在这里插入图片描述

安装跨域axios

在这里插入图片描述
安装之后在main.js里面进行配置,之后就可以在各个组件里面进行使用了。

在这里插入图片描述

Vue+elementUI+echarts项目从零开始使用总结 一、创建vue项目(Vue-cli脚手架) 可以看Vue环境搭建(Vue-cli脚手架) 二、安装echarts 在项目目录中打开terminal命令行输入 npm install echarts 安装element-ui npm i element-ui -S 字体颜色渐变 background-image: -webkit-linear-gradient(top, #88b6d8 0%, #d3e4f1 100%); -webkit-background-clip: text; -webkit-text 阅读详情

相关推荐

手把手完成前端Vue3 + Vite项目工程化搭建

文件,把需要用到的图表组件导入到该文件中,在需要使用 Echarts 的地方直接导入该文件,这样就可以按需导入 Echarts 图表库了。在这个配置中,Nginx会在接收到请求时首先查找是否存在对应的.gz预压缩文件,如果存在则直接返回该文件,否则会返回原始未压缩的文件。目录,然后在 router 目录下新建一个 index.js 文件,该文件会作为 Vue Router 的入口文件,该文件内容如下。目录,然后在 store 目录下新建一个 index.js 文件,该文件会作为 Pinia 的入口文件。

m0_74825447的博客 2621

echarts数据可视化项目搭建(一)

使用echarts实现一些基础的数据可视化案例

m0_54510474的博客 1998

从零开始搭建物联网平台(7):使用Vue编写前端页面

摘要: Vue我也是刚开始学的,看了两天的文档就开始着手做这件事了,所以对vue了解不太深入,没有能力说的的太详细万一是错误的不就误导别人了,所以只对几个相对来说比较主要的点说明一下。 搭建开发环境: 老生常谈的话题!首先自然是要安装nodejs,这个直接去官网下载安装即可,再使用命令npm install vue、npm install -g vue-cli去安装vue和脚手架工具,完成之...

FanMLei的博客 7800

00-ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤 步骤1:引入 echarts.js 文件 echarts是一个 js 的库,当然得先引入这个库文件 <script src="js/echarts.min.js"></script> 步骤2:准备一个呈现图表的盒子 这个盒子通常来说就是我们熟悉的 div ,这个 div 决定了图表显示在哪里 <div id="main" style="width: 600px;height:400px;">

qq_40353662的博客 231

VUE之Echarts地图引入及配置项详解

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档,需要的读者可以戳这里获取!前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档,需要的读者可以戳这里获取![外链图片转存中…(img-ZJbHAIxB-1711646258443)][外链图片转存中…(img-ziIl2S0s-1711646258444)]

2401_83916355的博客 894

echarts环境

echart1.html

【可视化大屏开发】5.大屏配置之Echarts入门学习

Echarts入门,ECharts初级,学习入门

pblh123的专栏 3754

echarts一些常见开发程序

echarts一些常见开发程序,前端网页制作

echart 入门小案例

1.创建一个vue项目: 第一步:vueinstall -g @vue/cli 第二步:vuecreate projectName(自定义项目名称) 注意:vue-cli 4.0内置了webpack,所以不需要在安装webpack,可能有一个依赖包报错,启动项目要重新运行npm install(安装依赖)或者cnpm install 2.n...

wwf1225的博客 403

Echarts可视化工具的使用案例(idea)

Echart可视化工具的简单实用,本文章采用idea开发环境进行案例实施,运用到javaEE、ajax、serverlet技术

echarts静态图表demo--2种写法

echarts静态图表demo--2种写法

Visual Studio Code和eclipse新建Echarts简单案例(简单的对比)

1、在Visual Studio Code中的Echarts可视化可以很好的呈现出很多动态效果,而eclipse中的echarts可视化只能显示单一的静态的效果,如果有动态的效果,既不会报错也不会显示为动态效果,只会显示为静态。,功能并不是很多,而Visual Studio Coded的用户界面非常简洁,易于使用,功能强大,而且样式多样,工具齐全,可以通过扩展来增强编辑器的功能。2、然后在当目录下新建 scc和js,image文件夹(点击folder)4、在Echar目录下新建一个一个thml文件。

weixin_68473774的博客 1557

4.7W防削顶单声道D类音频功率放大器HT6872介绍

HT6872是一款低EMI,防削顶失真,单声道免滤波D类音频功率放大器。在6.5V电源,10%THD+N,4Ω负载条件下,输出4.71W功率,在各类音频终端应用中维持高效率并提供AB类放大器的性能。

weichen_78的博客 4704

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分(1)section 主体部分(2)左、中、右布局(3)左、右图表容器整体插槽(4)左、右各图表容器插槽(5)中间图表容器布局四、图表环境搭建1、Echarts 全局引用2、Axios 全局引用 Vue 项目前..

懂得一千零一种,赋予你失败的方法! 1万+

基于 FPGA Vivado 示波器设计(附源工程)

今天给大侠带来基于 FPGA Vivado 示波器设计,开发板实现使用的是Digilent basys 3,如有想要入手basys3开发板的,可以联系牛总:18511371833。话不多说,上货。 本篇掌握基于添加文件和IP的Vivado工程设计流程,掌握基于Tcl的Vivado工程设计流程,学习示波器的基本组成结构。获取本篇相关源工程代码,可在公众号内回复“示波器设计源工程”。 原理介绍 数字存储示波器能够将模拟信号进行采样、存储以及显示。本系统在DIGILENT ...

7390

组态王的日历时间控件脚本

日期时间控件中的脚本中在小于10的月份和天数前必须要加上0,这是由首字符对比机制规定的,首字母相同,就不再不做对比了,比如1和11,是一样的。首字母不同,再比较下一位。 float Ayear1; float Amonth1; float Aday1; string temp1; Ayear1=sd.Year; Amonth1=sd.Month; Aday1=sd.Day; temp1=StrFromInt( Ayear1, 10 ); if(Amonth1<10) temp1=temp1+"-0"+

逍遥子的博客 5718

在Vue 3项目中使用 echarts

记得第一次使用 echarts 还是2019年的时候,那时做的一个物联网项目云平台的前端需要一些数据可视化功能,经过一些对比后就使用了 echarts 。上手非常快,专业性也足够,因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库,主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一,创建 Vue3 项目并安装 echarts npm 创建项目: npm create u

dangfulin的博客 3万+

华为昇腾(Ascend)开发考试原题目解析 (2024) (题库一)——HCIP-AI-Ascend Developer——第一部分

给出一段代码如下,以下哪个选项描述错误?...A.中的语句由 MindSpore 接管,有语法限制B. 算子在中定义,并用来建立网络C.__init__()中的语句由 Python 解析执行D. 网络定义必须继承基类nn.Cell正确答案: B__init__()用于定义算子和网络层。所有需要用到的层(如卷积层、全连接层等)都应该在这里进行实例化。这部分代码由Python解释器执行。用于构建前向计算图。它调用在__init__()中定义好的算子和层来描述数据的流向。

qq_38334677的博客 1055

vue前端项目中实现Echarts

一、vue搭建前端项目 1、新建文件夹,此处打开cmd,安装vue-cli npm install @vue/cli -g 安装时报错。。。 避坑: 1.1安装淘宝境像 npm install -g cnpm --registry=https://registry.npm.taobao.org 1.2切换淘宝镜像 npm config set registry https://registry.npm.taobao.org/ npm config get registry https://registr

qq_37607502的博客 1306

运行 ui5 serve 命令行报错的处理方法

如果大家运行 ui5 serve 命令行,报如下的错误消息: ui5 不是内部或外部命令,也不是可运行的程序: 只需要执行命令行,全局安装 ui5 cli(command line interface)这个命令行工具即可: npm install --global @ui5/cli 这个 ui5 cli 的入口执行文件,实际安装在了我 Node.js 的安装目录下: 更多Jerry的原创文章,尽在:“汪子熙”: ...

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 1343

[QMT量化交易小白入门]-七十一、十年回测ETF动量策略,超额年化收益率为10.6%

本专栏主要是介绍QMT的基础用法,常见函数,写策略的方法,也会分享一些量化交易的思路,大概会写100篇左右。QMT的相关资料较少,在使用过程中不断的摸索,遇到了一些问题,记录下来和大家一起沟通,共同进步。

木头大左的博客 1862

前端炫酷大屏VUE+DataV+Echarts【已完结】

轻松建立前端炫酷大屏【VUE+DataV+Echarts】搭建到一站式大屏

stc_ljc的博客 12万+

Trae的付费之路还挺艰难,茫茫多的人想付付不了(附解决办法)

不得不说,Trae国际版这个付费其实整的挺复杂的,但没办法,毕竟有政策限制,付费成功后,你就是尊贵的Pro用户啦,使用Claude 4不排队还是挺爽的,而且600次其实不算少了,有一个小技巧,简单的问题就把模型切到Gemini-2.5-flag,因为使用这个模型是没有次数限制的。其次付费的时候有个ZIP Code,这东西也是个迷之存在,有的地区节点需要填,有的不需要,如果你选到了不需要填的节点,那很好,付费就行了,如果需要填,可以填一个51800试试。

cpp加油站的专栏 5883

vue3从0到1创建echarts案例示范,保姆级教程【图文+代码】

 本篇文章演示如何快速且简单地在vue3中实现echarts图表。 一些图表的样式,图表的参数等设置,需要大家自行进行查询学习。

科技改变世界,技术驱动未来。 2万+

RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法

RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法

Systemcall名屋 2084

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

前端ECharts与Vue.js的协同开发

在当今的前端开发领域,数据可视化变得越来越重要。ECharts是一款强大的数据可视化库,能够创建各种精美的图表,而Vue.js是一个流行的前端框架,用于构建用户界面。本文章的目的就是探讨如何将这两个工具结合起来,实现高效的协同开发,范围涵盖了从基础概念到实际项目开发的全过程。本文将先介绍ECharts和Vue.js的核心概念以及它们之间的联系,接着讲解核心算法原理和具体操作步骤,包括数学模型和公式。然后通过一个实际项目案例展示如何进行开发,包括开发环境搭建、源代码实现和代码解读。

小白菜的博客 1365

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: echarts的学习(八)项目服务器端的准备
下一篇: echarts的学习(十)vue项目中,单独图表组件的开发,商家销售统计组件
一写代码就开心
博客等级 码龄7年 2万+粉丝 1037原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一写代码就开心

你的打赏将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值