echart5.5.1版本,倒三角柱状图

 

加载方法

initChart1(title, id, tag) {var myChart = echarts5.init(this.$refs[id]);const _this = this;var option = {title:{text: title||"",show: title?true:false,top: 24,left: 24},grid:{left: 54,top: 74,bottom: 44,right: 30,},xAxis: {type: 'category',data: ['用电量 (kWh)', '节电量 (kWh)']},color: ['#3465FA'],yAxis: {type: 'value'},series: [{type: 'pictorialBar',barWidth: 26,label: {show: true,position: 'top',fontSize: 14,fontWeight: 600,color: '#444444'},data: [{value: 50,name: "节电量",symbol: 'path://M525.873548 897.156129l-383.174193-761.723871 763.045161-1.981935-379.870968 763.705806z'},{value: 99,symbol: 'path://M525.873548 897.156129l-383.174193-761.723871 763.045161-1.981935-379.870968 763.705806z',itemStyle: {color: '#2FC587'}},],}]};myChart.setOption(option);if(tag){this.myChart = myChart;}}

宽度自适应

watch:{"$store.state.config.width"(){this.chartAutoWidth = this.$store.state.config.width-20*2-366-492-17-20-248;this.myChart.resize({width: this.chartAutoWidth});}
},

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

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

相关文章

【Spring成神之路】老兄,来一杯Spring AOP源码吗?

文章目录 一、引言二、Spring AOP的使用三、Spring AOP的组件3.1 Pointcut源码3.2 Advice源码3.3 Advisor源码3.4 Aspect源码 四、Spring AOP源码刨析4.1 configureAutoProxyCreator源码解析4.2 parsePointcut源码解析4.3 parseAdvisor源码解析4.4 parseAspect源码解析4.5 小总…

电脑缺少dll文件是怎么回事?教你5种有效的解决方法

当您的计算机显示DLL文件已经遗失时,您应如何应对呢?实际上,针对此类DLL文件的处置过程相对来说较为简易。今日,我们在此为大家详细介绍此领域的相关知识,让大家轻松解决电脑中因丢失DLL文件而产生的问题。 一、关于DL…

案例开发-日程管理-第一期

九 案例开发-日程管理-第一期 共7期 9.1 登录页及校验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼…

MVC 生成验证码

在mvc 出现之前 生成验证码思路 在一个html页面上&#xff0c;生成一个验证码&#xff0c;在把这个页面嵌入到需要验证码的页面中。 JS生成验证码 <script type"text/javascript">jQuery(function ($) {/**生成一个随机数**/function randomNum(min, max) {…

Python占位符汇总

# f-string (重点掌握) 3.6版本之后才有的 name "杰伦" print(大家好&#xff0c;我是杰伦) print(大家好&#xff0c;我是, name, sep) # 可以但不推荐 name "杰伦" age 45 salary 1.4567 print(大家好&#xff0c;我是杰伦&#xff0c;我今年45&a…

《妃梦千年》第三十章:意外的来信

第三十章&#xff1a;意外的来信 林清婉在皇宫中的地位稳固后&#xff0c;生活似乎又回归了平静。然而&#xff0c;这种平静并没有持续多久。一天早晨&#xff0c;她收到了一个意外的来信&#xff0c;信封上没有署名&#xff0c;但她一眼就认出了那熟悉的笔迹——这是她已故父…

RedHat Linux8 修改root管理员账户密码命令

RedHat Linux8 修改root管理员账户密码命令&#xff1a; sudo passwd root RedHat重置root管理员密码&#xff1a; 1. 查看Linux系统版本信息 cat /etc/redhat-release2. 重置密码 2.1 进入内核编辑界面 重启Linux系统并出现引导界面&#xff0c;按下键盘上的e键进入内…

Prometheus+Grafana主机运行数据

目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具&#xff0c;而Node Exporter是Prometheus的一个官方插件&#xff0c;用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…

【AI大模型】ChatGPT-4 对比 ChatGPT-3.5:有哪些优势

引言 ChatGPT4相比于ChatGPT3.5,有着诸多不可比拟的优势&#xff0c;比如图片生成、图片内容解析、GPTS开发、更智能的语言理解能力等&#xff0c;但是在国内使用GPT4存在网络及充值障碍等问题&#xff0c;如果您对ChatGPT4.0感兴趣&#xff0c;可以私信博主为您解决账号和环境…

FLinkCDC引起的生产事故(二)

背景&#xff1a; 最近在做实时数据的抽取工作&#xff0c;利用FLinkCDC实时抽取目标库Oracle的数据到Doris中&#xff0c;但是在抽取的过程中&#xff0c;会导致目标库的生产库数据库非常卡顿&#xff0c;为了避免对生产环境的数据库造成影响&#xff0c;对生产环境的数据库利…

谷歌优化的坑与甜:方法策略决定成败,并非难易程度

对于谷歌优化&#xff0c;本人颇为恼火。众所周知&#xff0c;我们开设网站旨在吸引众多访客&#xff0c;然谷歌这位傲慢的“高岭之花”&#xff0c;却令我们煞费苦心。有位友人为提升其网站排名&#xff0c;不惜耗尽心血&#xff0c;然而成效甚微&#xff0c;犹如坐过山车般起…

P3110 [USACO14DEC] Piggy Back S

题意 有一张 n n n 点 m m m 边的无向图&#xff0c;Alice 要从 1 1 1 走到 n n n&#xff0c;Bob 要从 2 2 2 走到 n n n。Alice 走一条边需要花费 B B B&#xff0c;Bob 走一条边需要花费 E E E&#xff0c;当他们一起走时&#xff0c;走一条边需要花费 P P P。求他…

OpenJudge 奇数求和

目录 描述思路样例输入样例输出CodeCC 总时间限制: 1000ms 内存限制: 65536kB 描述 计算非负整数 m 到 n&#xff08;包括m 和 n &#xff09;之间的所有奇数的和&#xff0c;其中&#xff0c;m 不大于 n&#xff0c;且n 不大于300。例如 m3, n12, 其和则为&#xff1a;357911…

qcom 平台efuse机器抓取dump log的方法

引言&#xff1a; qcom 平台机器&#xff0c;一旦efuse后机器将无法抓取dump log qcom 原文&#xff1a; efuse机器抓取dump log的方法如下&#xff1a; 一、修改配置文件&#xff1a; 把kamorta_debugpolicy.xml 在配置了debugpolicy&#xff08;加入串号和打开开关&#x…

怎么检查SSL证书是否有效?

SSL证书的有效性对于保护网站数据安全和用户隐私至关重要。然而&#xff0c;有时可能会出现证书过期、无效或被吊销的情况。为了确保网站的安全性&#xff0c;对SSL证书的有效性进行检查至关重要。本文将介绍几种常用的方法来检查SSL证书的有效性&#xff0c;帮助大家有效评估和…

Android Studio Download Gradle 时慢问题解决

1.腾讯gradle 下载&#xff1a;后面拼接版本&#xff08;gradle-8.0-bin.zip&#xff09; https://mirrors.cloud.tencent.com/gradle/gradle-8.0-bin.zip 2.Android Studio 配置&#xff1a;setting-->gradle-->Use Gradle from 选择本地文件夹&#xff08;解压后的bi…

前端开发常用的框架有以下几种?

React&#xff1a;由Facebook开发&#xff0c;用于构建用户界面的JavaScript库。它可以用于构建单页面应用和移动应用。 Vue&#xff1a;一套用于构建用户界面的渐进式框架&#xff0c;也是一个基于JavaScript的前端开发框架。Vue易于学习和使用&#xff0c;适用于构建小型到大…

基于Make的c工程No compilation commands found报错

由于安装gcc时只安装了build-essential&#xff0c;没有将其添加到环境变量中&#xff0c;因此打开Make工程时&#xff0c;CLion会产生如下错误&#xff1a; 要解决这个问题&#xff0c;一个方法是将GCC添加到环境变量中&#xff0c;但是这个方法需要修改至少两个配置文件&…

数据结构——约瑟夫环C语言链表实现

约瑟夫环问题由古罗马史学家约瑟夫&#xff08;Josephus&#xff09;提出&#xff0c;他参加并记录了公元66—70年犹太人反抗罗马的起义。在城市沦陷之后&#xff0c;他和40名死硬的将士在附近的一个洞穴中避难。起义者表示“宁为玉碎不为瓦全”&#xff0c;约瑟夫则想“留得青…

dledger原理源码分析(四)-日志

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的日志&#xff0c;包括写入&#xff0c;复制…