Vue.js组件(6):echarts组件
1 前言
本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网:Apache ECharts
npm install echarts --save
2 图表组件
2.1 折线图组件
组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:
{"xAxis":['项1', '项2', '项3'], "yAxis":[12, 11, 122]
}
- xAxis:横坐标名称
- yAxis:每项对应的数据量
组件代码:
<script setup lang="ts">
import * as echarts from 'echarts'const props = defineProps<{chartId: string
}>()const initChart = (data: any) => {const chartDom = document.getElementById(props.chartId);var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: data.xAxis,},yAxis: {type: 'value'},series: [{data: data.yAxis,type: 'line'}]};option && myChart.setOption(option);
}defineExpose({ initChart })
</script><template><div :id="chartId" style="width: 100%; height: 100%"></div>
</template><style scoped></style>

2.2 柱状图组件
组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:
{"xAxis":['项1', '项2', '项3'], "yAxis":[12, 11, 122]
}
- xAxis:横坐标名称
- yAxis:每项对应的数据量
组件代码:
<script setup lang="ts">
import * as echarts from 'echarts'const props = defineProps<{chartId: string
}>()const initChart = (data: any) => {const chartDom = document.getElementById(props.chartId);var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: data.xAxis,},yAxis: {type: 'value'},series: [{data: data.yAxis,type: 'bar'}]};option && myChart.setOption(option);
}defineExpose({ initChart })
</script><template><div :id="chartId" style="width: 100%; height: 100%"></div>
</template><style scoped></style>

2.3 饼图组件
组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:
[{ value: 1048, name: '数据项1' },{ value: 735, name: '数据项2' },{ value: 580, name: '数据项3' },{ value: 484, name: '数据项4' },{ value: 300, name: '数据项5' }]
组件代码:
<script setup lang="ts">
import * as echarts from 'echarts'const props = defineProps<{chartId: string
}>()const initChart = (data: any) => {type EChartsOption = echarts.EChartsOption;const chartDom = document.getElementById(props.chartId)!const myChart = echarts.init(chartDom)let option: EChartsOptionoption = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: '数据量',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 20,fontWeight: 'bold'}},labelLine: {show: false},data: data}]}option && myChart.setOption(option)
}defineExpose({ initChart })
</script><template><div :id="chartId" style="width: 100%; height: 100%"></div>
</template><style scoped></style>

相关文章:
Vue.js组件(6):echarts组件
1 前言 本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网:Apache ECharts npm install echarts --save 2 图表组件 2.1 折线图组件 组件属性:chartId,指定图表挂载div的id,注意不…...
yolov3算法及其改进
yolov3算法及其改进 1、yolov3简介2、yolov3的改进2.1、backbone的改进2.1.1、darknet19相对于vgg16有更少的参数,同时具有更快的速度和更高的精度2.1.2、resnet101和darknet53,同样具有残差结构,精度也类似,但是darknet具有更高的速度2.2、FPN2.3、anchor-base与grid-cell…...
Python + 深度学习从 0 到 1(02 / 99)
希望对你有帮助呀!!💜💜 如有更好理解的思路,欢迎大家留言补充 ~ 一起加油叭 💦 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持! ⭐ 手写数字分类: Keras MNIST 数据集 手写数字分类…...
HTML+CSS+JS制作在线书城网站(内附源码,含5个页面)
一、作品介绍 HTMLCSSJS制作一个在线书城网站,包含首页、分类页、排行榜页、新书上架页、特惠专区页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部导航栏 包含网站Logo、搜索框、用户登录/注册入口、购物车图…...
【FastAPI】中间件
【FastAPI】中间件 一、概述二、作用2.1 日志记录与监控2.2 身份验证与授权2.3 CORS(跨域资源共享)2.4 Gzip压缩2.5 会话管理2.6 自定义功能2.7 执行顺序 三、 总结四、相关链接 一、概述 FastAPI的中间件提供了一种强大的机制,允许开发者在…...
5个实用的设计相关的AI网站
在这个日新月异的数字时代,我们不断面临着新的挑战和机遇。随着人工智能(AI)技术的飞速发展,越来越多的AI工具开始融入到设计相关的工作流程中,极大地提升了工作效率和创作能力。今天,我非常兴奋地向大家介…...
STL 六大组件
C STL(标准模板库)主要由六大组件构成,它们相互协作,为C程序员提供了功能强大且高效的通用数据结构和算法工具,以下是对这六大组件的详细介绍: 1. 容器(Containers) 概述ÿ…...
Python选择题训练工具:高效学习、答题回顾与音频朗读一站式体验
一、引言 随着人工智能技术的不断进步,传统的教学方式已经逐渐向智能化、互动化转变。在众多英语测试题型中,选择题作为一种高效的方式被广泛应用于各类培训与考试中。为了帮助学生高效学习与自测,本篇文章将采用Python编写一款基于 Python …...
Python实现机器学习驱动的智能医疗预测模型系统的示例代码框架
以下是一个使用Python实现机器学习驱动的智能医疗预测模型系统的示例代码框架。这个框架涵盖了数据收集(爬虫)、数据清洗和预处理、模型构建(决策树和神经网络)以及模型评估的主要步骤。 1. 数据收集(爬虫)…...
AWS Certified AI Practitioner 自学考试心得
学习目标: 考取 AWS Certified AI Practitioner 那什么是 AWS Certified AI Practitioner 认证 是基础级的认证 比较简单 — 学习内容: 1. AWS网站自学网站 极客时间免费课程:http://gk.link/a/12sJL 配合极客时间课程的章节测试检验自…...
JQ中的each()方法与$.each()函数的使用区别
介绍 jquery里的 each() 是一个强大的遍历工具,用于迭代集合中的元素,并为每个元素执行指定的函数。它既可以用于遍历 jQuery对象集合,也可以用于遍历普通的数组或对象。 each()对象遍历 语法: $(selector).each(function(in…...
滚珠丝杆与直线导轨的区别
滚珠丝杆和直线导轨是两种常见的精密机械传动装置,它们的作用是实现直线运动,在工业自动化和精密机械领域中扮演着重要的角色。尽管它们都用于实现直线运动,但它们在结构以及性能特点上还是存在一些区别: 一、工作原理 1、滚珠丝…...
【Ovis】Ovis1.6的本地部署及推理
Ovis简介 Ovis是阿里国际AI团队开源的多模态大模型,看新闻介绍效果不错,在多个场景的测试下都能达到SOTA,其中的Ovis1.6-Gemma2-9B在30B参数以下的模型中取得了综合排名第一,赶超MiniCPM-V-2.6等行业优秀大模型。所以我也部署一个…...
C语言结构体位定义(位段)的实际作用深入分析
1、结构体位段格式 struct struct_name {type [member_name] : width; };一般定义结构体,成员都是int、char等类型,占用的空间大小是固定的在成员名称后用冒号来指定位宽,可以指定每个成员所占用空间,并且也不用受结构体成员起始…...
儿童影楼管理系统:基于SSM的创新设计与功能实现
3.1系统的需求分析 需求分析阶段是设计系统功能模块的总方向,可以这样来说,系统的整个的开发流程以及设计进度,基本上都是以需求分析为基本依据的[10]。需求分析阶段可以确定系统的基本功能设计,以及在最后的系统验收阶段…...
青蛇人工智能学家
青蛇人工智能学家 青蛇,是蓝星上,最出名的人工智能学家。 在蓝星上,大家都知道,青蛇人工智能学家,最大的爱好,是美食。 青蛇人工智能学家,对自己的食物,非常在意,对自己的…...
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
最近项目需求写了个uniappvue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。 思路: 直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行&#…...
【ES6复习笔记】rest参数(7)
什么是 rest 参数? rest 参数是 ES6 引入的一个特性,它允许我们将一个不定数量的参数表示为一个数组。使用 rest 参数可以更方便地处理函数的参数,尤其是在参数数量不确定的情况下。 如何使用 rest 参数? 在函数定义中…...
Hive SQL 窗口函数 `ROW_NUMBER() ` 案例分析
一文彻底搞懂 ROW_NUMBER() 和 PARTITION BY 1. 引言 在处理大规模数据集时,Hive SQL 提供了强大的窗口函数(Window Function),如 ROW_NUMBER(),用于为结果集中的每一行分配唯一的行号。当与 PARTITION BY 和 ORDER …...
前端mock数据 —— 使用Apifox mock页面所需数据
前端mock数据 —— 使用Apifox 一、使用教程二、本地请求Apifox所mock的接口 一、使用教程 在首页进行新建项目: 新建项目名称: 新建接口: 创建json: 请求方法: GET。URL: api/basis。响应类型…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)
引言 在嵌入式系统中,用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例,介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单,执行相应操作,并提供平滑的滚动动画效果。 本文设计了一个…...
深度解析云存储:概念、架构与应用实践
在数据爆炸式增长的时代,传统本地存储因容量限制、管理复杂等问题,已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性,成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理,云存储正重塑数据存储与…...
k8s从入门到放弃之Pod的容器探针检测
k8s从入门到放弃之Pod的容器探针检测 在Kubernetes(简称K8s)中,容器探测是指kubelet对容器执行定期诊断的过程,以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...
