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

Vue 封装echarts柱状图(Bar)组件

目的:减少重复代码,便于维护

显示效果

组件代码

<template><div class="ldw-data-content-box"><div class="ldw-chilren-box"><div class="title" v-if="title">{{ title }}</div><div style="width:100%;flex:1;"><div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div></div></div></div>
</template><script>
var echarts = require("echarts");
const total = function(data){return data.reduce((prev,cur)=>{return prev+cur.value},0)
}
export default {props:{title:"",data:{require:true,type:Array,default:()=>[]},w:{type:String,default:"auto"},column:{type:Boolean,default:true}},data(){return{bg:["#0090FF","#31CFB8","#E55240"],number:null,top:0,h:100,myChart:null}},watch: {data: {//深度监听,可监听到对象、数组的变化handler(val, oldVal) {this.initData();},deep: true, //true 深度监听}},created(){this.number = Math.random(1000)+1;},mounted(){this.initData()},methods:{initData(){let that = thislet canvas = document.getElementById(`canvas-box${this.number}`)this.myChart = echarts.init(canvas);this.myChart.on("click", function(params) {that.$emit('eClick',params)});let option = {title: {},grid: {top: "8%",left: "3%",right: "4%",bottom: "8%",containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {show:false},xAxis: [{type: 'category',axisTick: {show: false},axisLine:{show:false},axisLabel: {interval:0,rotate:40  //倾斜的程度},splitLine:{show:false},data:this.data.map((res)=>{return res.type})}],yAxis: [{type: 'value',axisTick: {show: false},axisLine:{show:false},splitLine:{show:false},}],series: [{name: '总计',type: 'bar',barWidth:35,colorBy:"series",label: {// 柱图头部显示值show: true,textStyle:{fontSize:14,fontWeight:600},position: "top",color:"#E55240",fontSize: "14px",},emphasis:{itemStyle:{color:"#F89387"},},itemStyle:{color:{type: 'linear',colorStops: [{offset: 0,color:"#F89387" // 0% 处的颜色}, {offset: 1,color:"#E55240" // 100% 处的颜色}],global: false // 缺省为 false},},data: this.data.map((res)=>{return res.value})},]};this.myChart.setOption(option)},resize(){this.myChart.resize()},colorFormat(arr){arr.forEach((item)=>{if(item.ldwColor){item.itemStyle = {color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: item.ldwColor[0] // 0% 处的颜色}, {offset: 1, color: item.ldwColor[1] // 100% 处的颜色}],global: false // 缺省为 false}}}})return arr}}
}
</script><style scoped>
.ldw-data-content-box{width:100%;height:100%;display: flex;
}.ldw-data-content-box>.ldw-chilren-box{width:100%;height:100%;display: flex;justify-content: center;align-items: center;flex-flow: column;overflow: hidden;
}
.ldw-data-content-box>.ldw-chilren-box>.title{font-size: 18px;color:#000;text-align: center;padding:24px 0;
}.ldw-bg-box{background: rgba(255,255,255,0.5);border: 1px solid #F4FDFE;border-radius: 20px;
}.ldw-text-text{display: inline-block;text-align: justify;line-height: 0;margin-left: 20px;
}.ldw-text-text::after{content:"";display: inline-block;width:100%;overflow:hidden;height:0;
}.ldw-quan-quan{display: flex;align-items: center;
}.ldw-w{margin-top:6px;position: relative;
}.ldw-quan-box{width: 13px;height: 13px;border-radius: 2px;margin-right: 20px;
}.flex-column{width:100%;display: flex;justify-content: space-around;
}.flex-column .ldw-w{width: auto;
}.flex-column .ldw-quan-box{margin-right: 10px;
}
</style>

调用代码

<template><div class="root flex flex-col border-box"><div  style="width: 400px; height: 400px;"  ><Bar  :title="'统计'" :barType="'x'" :data="chartData" ></Bar></div></div>
</template><script>import Bar from '@/components/echarts/barTwoInfo.vue'export default{name:'',created() {},components: {Bar},data() {return {chartData:[{value:100, type:'一季度'},{value:105, type:'二季度'},{value:201, type:'三季度'},{value:167, type:'四季度'},]}},methods:{}}
</script>

相关文章:

Vue 封装echarts柱状图(Bar)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 显示效果 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title" v-if"title">{{ title }}</div>…...

异常(Java)

1.异常的概念 在 Java 中&#xff0c;将程序执行过程中发生的不正常行为称为异常 。 1.算数异常 System.out.println(10 / 0); // 执行结果 Exception in thread "main" java.lang.ArithmeticException: / by zero 2.数组越界异常 int[] arr {1, 2, 3}; System.out.…...

vue的插槽解析

插槽 好处&#xff1a;组件的内容结构可定制 用slot插槽进行占位 语法: 子组件中通过slot进行占位 理解&#xff1a;父组件&#xff0c;在子组件标签嵌套的内容就会被渲染到slot地方 一、默认插槽 //子组件 <slot>slot插槽</slot> //方法一<slot name"…...

Spring(3)Spring从零到入门 - Spring整合技术及AOP事务管理

Spring&#xff08;3&#xff09;Spring从零到入门 - Spring整合技术及AOP事务管理 文章目录 Spring&#xff08;3&#xff09;Spring从零到入门 - Spring整合技术及AOP事务管理4 Spring整合技术示例4.1 Spring整合Mybatis4.1.1 Mybatis开发回顾4.1.2 整合Spring分析4.1.3 Spri…...

适配器模式学习

适配器模式&#xff08;Adapter&#xff09;将一个类的接口转换成客户希望的另外一个接口。Adapter 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 适配器模式分为类适配器模式和对象适配器模式两种&#xff0c;前者类之间的耦合度比后者高&#xff0c;且要…...

NET中使用Identity+CodeFirst+Jwt实现登录、鉴权

目录 前言 一、创建上下文类 1.自定义MyContext上下文类继承IdentityDbContext 2.在Program中添加AddDbContext服务 二、使用Migration数据迁移 1.在控制台中 依次使用add-migration 、updatebase 命令 2.如何修改表名 3.如何自定义字段 三、使用Identity实现登录、修改密码 …...

详解Keras3.0 API: Optimizers

Optimizers 优化器&#xff08;Optimizer&#xff09;是深度学习中用于更新模型参数的一种方法&#xff0c;它的目标是最小化损失函数。在训练神经网络时&#xff0c;我们通常使用梯度下降法来更新参数&#xff0c;而优化器就是实现这一过程的工具。优化器的主要作用是在每次迭…...

【数据结构】字符串匹配|BF算法|KMP算法|next数组的优化

字符串匹配算法是在实际工程中经常遇到的问题&#xff0c;也是各大公司笔试面试的常考题目&#xff0c;本文主要介绍BF算法&#xff08;最好想到的算法&#xff0c;也最好实现&#xff09;和KMP算法&#xff08;最经典的&#xff09; 一、BF算法 BF算法&#xff0c;即暴力(Bru…...

阿里云 ACK One 新特性:多集群网关,帮您快速构建同城容灾系统

云布道师 近日&#xff0c;阿里云分布式云容器平台 ACK One[1]发布“多集群网关”[2]&#xff08;ACK One Multi-cluster Gateways&#xff09;新特性&#xff0c;这是 ACK One 面向多云、多集群场景提供的云原生网关&#xff0c;用于对多集群南北向流量进行统一管理。 基于 …...

vscode自定义代码片段

前言 代码片段&#xff0c;指的是能够帮助输入重复代码模式&#xff0c;比如初始页面的模板。通过 snippet &#xff0c;我们仅仅输入一小段字符串&#xff0c;就可以在代码片引擎的帮助下&#xff0c;生成预定义的模板代码&#xff0c;接着我们还可以通过在预定义的光标位置之…...

【贪心算法】专题练习一

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 前言 1.什么是贪心算法&#xff1f;——贪婪鼠目寸光 贪心策…...

【JMeter】使用nmon进行性能资源监控

一、前言 ​ 在工作中可能会遇到需要在压测的时候对Linux服务器进行性能资源监控的情况。这时可以用nmon来对服务器进行监控。 二、nmon的下载安装 1.查看系统信息 shell cat /etc/os-release 结果为 shell PRETTY_NAME"Debian GNU/Linux 12 (bookworm)" NAME&…...

Unity预设体

目录 预设体是什么&#xff1f; 如何创建预设体&#xff1f; 如何修改预设体&#xff1f; 如何删除预设体&#xff1f; 预设体是什么&#xff1f; Unity中的预设体&#xff08;Prefab&#xff09;是一种可重复使用的游戏对象模板。它允许开发者创建一个或多个游戏对象&…...

Elasticsearch 写入优化探索:是什么影响了refresh 耗时?

1、问题背景&#xff1a; 数据写入后&#xff0c;refresh耗时过长&#xff0c;能达到1s-5s。 想通过测试&#xff0c;探索确认影响refresh的因素&#xff0c;比如&#xff1a;写入操作是新增还是更新&#xff0c;deleted文档占比是否有影响&#xff0c;是否有其他索引配置&…...

Java8新特性——函数式接口

目录 一、介绍 二、示例 &#xff08;一&#xff09;Consumer 源码解析 测试示例 &#xff08;二&#xff09;Comparator &#xff08;三&#xff09;Predicate 三、应用 四、总结 一、介绍 FunctionalInterface是一种信息注解类型&#xff0c;用于指明接口类型声明…...

Epson打印机连接wifi

环境 Epson L3153 打印机联通无线光猫 背景 最近家里的联通宽带不太稳定&#xff0c;经常断网。今天打了联通客服电话&#xff0c;师傅上门来&#xff0c;说可能是光猫用的时间太长了&#xff0c;换了一个新的联通光猫&#xff0c;问题解决。 wifi的名称是 CU_Y3ft 和 CU_Y3…...

Chapter 7 - 6. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理

Dedicated and Converged Ethernet Network专用和融合以太网网络 Just because a network is configured as a converged Ethernet network (lossy and lossless traffic), doesn’t necessarily mean that lossy and lossless traffic runs on it simultaneously. For exampl…...

【论文笔记】NeuRAD: Neural Rendering for Autonomous Driving

原文链接&#xff1a;https://arxiv.org/abs/2311.15260 1. 引言 神经辐射场&#xff08;NeRF&#xff09;应用在自动驾驶中&#xff0c;可以创建可编辑的场景数字克隆&#xff08;可自由编辑视角和场景物体&#xff09;&#xff0c;以进行仿真。但目前的方法或者需要大量的训…...

通信原理 | 分贝dB、功率、功率谱、功率谱密度、信噪比

文章目录 分贝功率和分贝的关系能量谱功率谱功率谱和功率谱密度是不同的功率谱密度随机信号和确知信号信噪比基本定义分贝表示应用分贝 分贝:(用dB表示)是量度两个相同单位之间数量比例的计量单位,主要用于度量声音强度。 1贝尔(B)=10分布(dB),即1B = 10dB 分贝是以美国…...

Go中的Context是什么?

在 Go 编程语言&#xff08;通常称为 Golang&#xff09;中&#xff0c;术语 "上下文 "指的是上下文包及其定义的上下文类型。上下文包用于跨 API 边界和进程间传输截止日期、取消信号和其他请求范围值。 上下文包的主要目的是管理并发或分布式系统中操作的生命周期…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...