当前位置: 首页 > news >正文

vue通过echarts实现数据可视化

1、安装echarts
cnpm install echarts -S

echart官方图表示例大全:https://echarts.apache.org/examples/zh/index.html#chart-type-line

在这里插入图片描述

2、代码实现
<template><div><div class="box" ref="zhu"></div><div class="box" ref="pie"></div></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {const zhu = this.$refs.zhu;const zhuChart = echarts.init(zhu);zhuChart.setOption(this.getZhuOption());const pie = this.$refs.pie;const pieChart = echarts.init(pie);pieChart.setOption(this.getPieOption());},methods: {//柱状图getZhuOption() {return {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: "bar",},],};},//饼状图getPieOption() {return {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)",},},},],};},},
};
</script><style>
.box {height: 50vh;border: 3px solid blue;
}
</style>

效果:

在这里插入图片描述


主题下载:

官方主题下载:https://echarts.apache.org/zh/download-theme.html

在这里插入图片描述

以第一个主题为例,点击会提示另存为,我们将此文件放到项目assets目录:

在这里插入图片描述

然后代码中引入主题:

在这里插入图片描述

效果:

在这里插入图片描述


补充:

引入主题后发现项目运行报错,且样式不生效,但是图表还是可以正常显示:

在这里插入图片描述

其实这里是引入的主题文件vintage.js里报的:

在这里插入图片描述

因为vintage.js文件没导包,加上导包即可,同时,将root.echarts改为echarts:

在这里插入图片描述

保存vintage.js文件,再次运行,发现主题生效,且报错消失了

相关文章:

vue通过echarts实现数据可视化

1、安装echarts cnpm install echarts -Sechart官方图表示例大全&#xff1a;https://echarts.apache.org/examples/zh/index.html#chart-type-line 2、代码实现 <template><div><div class"box" ref"zhu"></div><div class&…...

react17中使用setState导致了死循环

在使用setState时发生死循环的错误&#xff0c;可能的原因是在这三个地方使用了setState&#xff1a; componentDidUpdate&#xff1b;componentWillUpdate&#xff1b;render。 为什么会这样? 每次渲染页面的时候就会调用render&#xff0c;render里面是setState&#xff0…...

2024年P气瓶充装证模拟考试题库及P气瓶充装理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年P气瓶充装证模拟考试题库及P气瓶充装理论考试试题是由安全生产模拟考试一点通提供&#xff0c;P气瓶充装证模拟考试题库是根据P气瓶充装最新版教材&#xff0c;P气瓶充装大纲整理而成&#xff08;含2024年P气瓶…...

Python学习笔记(一)

一、简述实例属性与类属性的区别以及实例方法与类方法的区别 &#xff08;一&#xff09;实例属性与类属性 1、实例属性是定义在类的内部&#xff0c;是每个类都共有的属性&#xff1b;2、实例属性是属于对象的&#xff0c;每个对象的可以根据自己的需要不一样&#xff0c;生…...

记一次http访问超时服务器端调试

问题&#xff1a;http访问服务器时没有返回&#xff0c;没有超时&#xff0c;一直在阻塞 处理过程&#xff1a;telnet端口能连上&#xff0c;服务端程序也不存在处理时间过长的情况。 说明tcp连接没问题。推测是客户端连接后再发起请求&#xff0c;服务端阻塞了。因为很多客户…...

C/C++内存泄漏及检测

“该死系统存在内存泄漏问题”&#xff0c;项目中由于各方面因素&#xff0c;总是有人抱怨存在内存泄漏&#xff0c;系统长时间运行之后&#xff0c;可用内存越来越少&#xff0c;甚至导致了某些服务失败。内存泄漏是最难发现的常见错误之一&#xff0c;因为除非用完内存或调用…...

跟TED演讲学英文:Why AI will spark exponential economic growth by Cathie Wood

TED英文文稿 文章目录 TED英文文稿Why AI will spark exponential economic growthIntroductionVocabularyTranscriptSummary后记 Why AI will spark exponential economic growth Link: https://www.ted.com/talks/cathie_wood_why_ai_will_spark_exponential_economic_growth…...

常用组合逻辑电路模块(4):数值比较器

数值比较器概述 在数字系统中&#xff0c;特别是在计算机中&#xff0c;常需要对两个数的大小进行比较。而数值比较器就是对两个二进制数A、B进行比较的逻辑电路。 比较结果有A&#xff1e;B、A&#xff1d;B、A&#xff1c;B三种情况。 简单数值比较器 1位数值比较器&#…...

实时时钟模块RX8901CE具有数字温度补偿功能,助力工业设备实现精准控制

在工业控制领域&#xff0c;电子产品的工作温度范围较广&#xff0c;同样的产品将面对高温、低温等不同工况。对于时钟信号敏感的电路设计而言&#xff0c;温度变化将严重影响产品功能&#xff0c;因此需要高精度时钟来保证电路信号的稳定&#xff0c;这种情况下需要使用带数字…...

Acrobat Pro DC 2023 for mac直装激活版 pdf编辑处理工具

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑器&#xff0c;为用户提供了全面且高效的PDF处理体验。 软件下载&#xff1a;Acrobat Pro DC 2023 for mac直装激活版下载 首先&#xff0c;它支持用户从现有文档创建PDF&#xff0c;或者将其他文件格式如图片、网页等轻松转…...

3D应用模型信创系统实时渲染有什么要求?

实时云渲染技术是数字孪生领域&#xff0c;比较常用的轻量化软件交付方式&#xff0c;该技术是将3D应用等大模型的算力执行放在了服务器端&#xff0c;而服务器目前比较常用的还是Windows系统。但随着国产信创在数字孪生领域应用越来越多&#xff0c;实时云渲染平台的国产信创化…...

Flutter之TabBar篇

总结了一下项目中用到的几种TabBar&#xff0c;针对不同的样式&#xff0c;有采用系统提供的&#xff0c;也有三方插件提供的&#xff0c;也有自定义的&#xff0c;效果如下&#xff08;后续如果遇到新的样式&#xff0c;会不间断地记录更新&#xff0c;避免重复造轮子…&#…...

VRRP(虚拟路由冗余协议)详解

VRRP-------虚拟路由冗余协议 在一个网络中&#xff0c;要做为一个合格的网络首先就要具备几种冗余&#xff0c;增加网络的可靠性。 这几种冗余分别为&#xff1a;线路冗余&#xff0c;设备冗余&#xff0c;网关冗余&#xff0c;UPS冗余 VRRP该协议就是解决网关冗余的。在二层…...

【数据结构】04串

串 1. 定义2. 串的比较3. 串的存储结构4. 具体实现5. 模式匹配5.1 常规思路实现5.2 KMP模式匹配算法5.2.1 next数组计算5.2.1 代码计算next数组5.2.2 KMP算法实现 1. 定义 串(string)是由零个或多个字符组成的有限序列&#xff0c;又叫字符串。 一般记为s a 1 , a 2 , . . . ,…...

LAMMPS如何识别多孔结构的孔隙及其大小

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material...

JavaScript ECMAScript标准的与时俱进:从ES6至ES14的革新之路与关键技术特性剖析

ECMAScript&#xff08;通常缩写为ES&#xff09;是一种标准化的脚本语言规范&#xff0c;由ECMA International&#xff08;前身为European Computer Manufacturers Association&#xff0c;欧洲计算机制造商协会&#xff09;制定。自1997年发布首个版本以来&#xff0c;ECMAS…...

竞赛课第六周(树状数组的应用)

实验内容: HDU 1166 敌兵布阵【线段树】 线段树的应用 敌兵布阵 C国的死对头A国这段时间正在进行军事演习&#xff0c;所以C国间谍头子Derek和他手下Tidy又开始忙乎了。A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况。由于采取…...

SpringCloud Alibaba Sentinel 实现熔断功能

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第十六篇&#xff0c;即使用 Sentinel 实现熔断功能。 二、 Ribbon 系列 首先我们新建两个服务的提供者…...

开源免费AI引擎:智能合同审查技术的应用与优势

随着数字化转型的加速&#xff0c;合同作为商业活动中的重要法律文件&#xff0c;其审查和管理变得越来越重要。传统的合同审查方式耗时且容易出错&#xff0c;而智能AI合同审查技术的引入&#xff0c;为这一领域带来了革命性的变化。本文将探讨智能AI合同审查技术的应用和优势…...

易舟云凭证保存查看的3种方式

文章目录 1、保存为图片2、导出为Excel3、跨期批量导出 1、保存为图片 点击记账凭证详情&#xff0c;点击“下载-保存为图片”&#xff0c;即可下载图片&#xff01; 2、导出为Excel 导出为Excel可以对单张凭证导出&#xff0c;也可以对指定月份的记账凭证进行批量导出。 1…...

【经验贴】运营岗考过CDA数据分析师一级经验分享

终于把CDA一级拿下了&#xff01;查成绩那一刻真的挺开心的&#xff0c;不是多难&#xff0c;但全程自己一点点学出来&#xff0c;特别有成就感。今天就把我整个备考过程老老实实写出来&#xff0c;给正在准备的小伙伴一个参考。一、备考原因我最开始考CDA&#xff0c;完全是因…...

手把手教你搭建日本亚马逊CVV钓鱼系统(附自动验证功能)

网络安全防护&#xff1a;识别与防范钓鱼攻击的技术实践 在数字化时代&#xff0c;网络安全已成为个人和企业不可忽视的重要议题。随着电子商务的蓬勃发展&#xff0c;各类网络攻击手段也日益猖獗&#xff0c;其中钓鱼攻击因其低成本、高回报的特点&#xff0c;成为黑客常用的攻…...

手把手教你解决Unity视频播放问题:H264编码设置与RawImage的正确用法

Unity视频播放全攻略&#xff1a;H264编码优化与RawImage实战解析 在Unity项目开发中&#xff0c;视频播放功能看似简单&#xff0c;却暗藏诸多技术细节。许多开发者都曾遇到过视频不同步、颜色失真或性能低下的困扰。本文将深入剖析视频播放的核心技术要点&#xff0c;从编码格…...

QuPath生物图像分析终极指南:从零基础到高效病理研究

QuPath生物图像分析终极指南&#xff1a;从零基础到高效病理研究 【免费下载链接】qupath QuPath - Bioimage analysis & digital pathology 项目地址: https://gitcode.com/gh_mirrors/qu/qupath QuPath是一款功能强大的开源生物图像分析软件&#xff0c;专门为数字…...

nli-distilroberta-base环境部署:Docker容器内Python依赖与模型权重加载验证

nli-distilroberta-base环境部署&#xff1a;Docker容器内Python依赖与模型权重加载验证 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务。它能智能分析两个句子之间的关系&#xff0c;判断它们之间的逻辑关联。这项技术在智能客…...

SEO_详解SEO优化的完整工作流程与执行要点

<h2>SEO优化的重要性</h2> <p>在当前数字化时代&#xff0c;网站的可见度和流量直接关系到企业的市场竞争力。搜索引擎优化&#xff08;SEO&#xff09;作为提升网站在搜索引擎中排名的关键手段&#xff0c;其重要性不言而喻。SEO不仅能帮助企业吸引更多的自…...

基于YOLOv11深度学习的管道泄露识别检测系统(YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型)

一、项目介绍 随着工业管道的广泛应用&#xff0c;泄漏事故不仅会造成资源浪费&#xff0c;还可能引发严重的安全事故和环境污染。传统的管道泄漏检测方法主要依靠人工巡检或传感器监测&#xff0c;存在效率低、响应慢、成本高等问题。为解决这一难题&#xff0c;本项目基于YOL…...

UndertaleModTool:解锁游戏修改的无限可能

UndertaleModTool&#xff1a;解锁游戏修改的无限可能 【免费下载链接】UndertaleModTool The most complete tool for modding, decompiling and unpacking Undertale (and other Game Maker: Studio games!) 项目地址: https://gitcode.com/gh_mirrors/un/UndertaleModTool…...

Path of Building完全指南:精准规划角色构筑3步法+高效配置策略

Path of Building完全指南&#xff1a;精准规划角色构筑3步法高效配置策略 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/gh_mirrors/pat/PathOfBuilding Path of Building是一款强大的离线工具&#xff0c…...

实战指南:如何用FAISS和GPT-4o-mini构建高效RAG系统(附开源代码)

实战指南&#xff1a;如何用FAISS和GPT-4o-mini构建高效RAG系统&#xff08;附开源代码&#xff09; 在人工智能领域&#xff0c;检索增强生成&#xff08;RAG&#xff09;技术正迅速成为连接大型语言模型与专业知识的桥梁。不同于传统LLM仅依赖预训练知识&#xff0c;RAG系统通…...