多功能echarts柱状图

数据结构:

data = [{name: '类别1',value: 15,children: [{name: '项目1-1',value: 87,value2: 3.3,},{name: '项目1-2',value: 80,value2: 2.6,},{name: '项目1-3',value: 79,value2: 3.8,},]},{name: '类别2',value: 15,children: [{name: '项目2-1',value: 70,value2: 1.5,},{name: '项目2-2',value: 60,value2: 2.1,},{name: '项目2-3',value: 65,value2: 1.6,},]},{name: '类别3',value: 25,children: [{name: '项目3-1',value: 80,value2: 3.1,},{name: '项目3-2',value: 68,value2: 2.5,},]},{name: '类别4',value: 25,children: [{name: '项目4-1',value: 67,value2: 2.7,},{name: '项目4-2',value: 70,value2: 1.8,},{name: '项目4-3',value: 77,value2: 2.3,},]},{name: '类别5',value: 20,children: [{name: '项目5-1',value: 50,value2: 9.1,},]},
];
options:
initChart() {let myChart = this.$echarts.init(this.$refs.echarts);let corlor = ['#4594F9','#7BFBE9','#7D7446','#5E76DE','#4FE4A2'];let data = [];let nameList = [];let markPointData = [];let imgList = ['image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAAA8CAYAAAAOqdorAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAdNSURBVHhe7dx7bFRVGgDw79zSdoY+p53pu6VQRWh5ldYVfKC4Ky81aFRS467rX2tM1BijERLRGNfdLOuaEAmgxkQ0VSTRdYXQIBgooLxl+lALxdLHtJ12Hh36GKbAnG/Pufe06SiPmQ7ji++XNOfc75xpby7fedw7MwAhhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIeQ3bu1B/lLJWsQ1+/mrKkQipKmSjJOjH66XpdsPWXqARIySMEpBBLMsXX4o0AMkYpSEUTrhgT/KssUL8/UAiRglYRRcnKc0uVi6rDsGmKXNhxa9gUSEkjAKh07CclXV7W3H+1WVRICSMAofNoJ+RzzDhudkubkB/iFLEhlKwnGqd2HFoU5WnJoI8Na9UGmbCNDkZtl7W/jtqgsJEyXhOCCi6YUdcFTWV5TixpwUreGR2fh3eby6lu3hnOt3zITEhEjA+JW7+C75gHrpBzygwrrlH/JuGX98Kz+gQoRcXT4fz/jLp9wjE23mesQmJ5+lmnQ/eLFIxmX7A5t5h+MMz1RNhETvRA+ffecmI8FueRexsQfnqKYQzR5eNrZfXS+fq5oIGR+fDy0bjvB1ozPcx7xTzoiq+aLka8SMWSf7l65DXHuQvy5jqpn8CFMlGUPs+1hjL87/wA4btjWzWcNBI/7AdPxszSIt7GeBr9byte/Z2dOyHiduAZeU4J6/zoHnK/I0/aaGGCgJFXFHm3igHW453gsP726Bx+w9bIJqgoWT8eijM+C5BVO0WhUK26E2Xvl+A7yy8zRbFuRGbJoNB+6aDOvmZsOOW4vhoKZpw0bLtemaSUI5u4mCOX04qe88WFx+yHX0w9yGHlhid8JNzV4WZ/Q0yOd/K0rx3Ucq4OWiJK1ThcetXSzhm7+FlZ9+x54XfzvEFAsOl+dAbVkWfFFkYXU2E7jTktFdmKQ5VJfftZ81Cb1eTHNewGxfANI1BhrXIM5xBqYDF6uVOO4/B7kDAbDhmOeXjBnnKGI/OVeGY9rE688FYaJriJXojYBB1xAUiKU00X8ektx+ZnIOGi0XI5fL6VbsvjEPts3JZjuXTcXPYzFDicGQ8EUzLj7SBYuPO2Hp9242ZWS5v5icZACLGYdSEqBvggYsNwnaxXASA4bFZZiw0xwPZ1TXSxIXSVwivSaGIqI44iLIUxOgJ8UE3eI4KI6D+WnwncYhqIljcyJ4czTotdm0AeO1sXNVk9DNeer3HewPdU5c3O6DUtdZlu3yY7bXD9aeIWZS3X5RFjNARiKiNQk8BSnQfIMNasrz4fO52Vqd6vKzkjO03Yml33Sze0958fY2H5R7z4LVfZbF9Z1VnX5h8t0g60T0imvny02GzsJ0aJxpg63lGXA4LU3zqG7jFlUS9g7y3N2tUGXvhiX1vXBrk5uJ0720dDNesJmhM8MMPWJoyj1XfI5IhAliVIoTiRNLoDs5AXwiHu55qRFu9E+Mg4AtCVrFL9OPbUmsVWR+ICEeA5lm8BRbtNMy/lvS2scnD55jaWKFSA4AmFxDWKyawDMIk8QsarrUajG6UrDR6yQDIu/1641i5UnvH4YMUQ+KWNAxAGXid50X9Qt9Acjr80OWGAyXnTymZmLvnBzYPSML9i/Ig88KrZFvIUJOOlxfOfjN1XXw+q4WNn9ksy3JJa00Ezsq82D79ZlwJCOZ/SBmnZ50E+sqyWBXXDbIr9NJN08VW50spx8K3UMwtdkN88Q++k9iKyG3O6Pkv/+CIjzw6GxYvaBY+1KFryjsJBTDZ2J1PT5VXQ+vnP

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

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

相关文章

【数据结构】红黑树详解

目录 前言: 红黑树的概念: 红黑树的性质: 红黑树节点的定义: 红黑树的插入: 情况1:cur为红,p为红,g为黑,u存在且为红 情况2:cur为红,p为红&#xff0c…

【Java EE】关于Maven

文章目录 🎍什么是Maven🌴为什么要学Maven🌲创建⼀个Maven项目🌳Maven核心功能🌸项目构建🌸依赖管理 🍀Maven Help插件🎄Maven 仓库🌸本地仓库🌸私服 ⭕总结 …

电商平台混战之下,天猫破解品牌增长奥秘

行业共识是追上风,才有好生意,但风很多时候不会只有一个方向。 4月2日,上海,TopTalk 2024天猫超级品牌私享会举行。这个活动已举办数年,每一年天猫都会发布新一年度的品牌经营策略,只是与往年不同的是&…

从零开始学起!全方位解析App压力测试的关键要点!

简介 Monkey 是 Google 提供的一个用于稳定性与压力测试的命令行工具 可以运行在模拟器或者实际设备中 它向系统发送伪随机的用户事件对软件进行稳定性与压力测试 为什么要用 Monkey Monkey 就是像猴子一样上蹿下跳地乱点 为了测试软件的稳定性,健壮性 随机点…

区间概率预测python|QR-CNN-BiLSTM+KDE分位数-卷积-双向长短期记忆神经网络-时间序列区间概率预测+核密度估计

区间预测python|QR-CNN-BiLSTMKDE分位数-卷积-双向长短期记忆神经网络-核密度估计-回归时间序列区间预测 模型输出展示: (图中是只设置了20次迭代的预测结果,宽度较宽,可自行修改迭代参数,获取更窄的预测区间) 注&am…

2012年认证杯SPSSPRO杯数学建模D题(第一阶段)人机游戏中的数学模型全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 D题 人机游戏中的数学模型 原题再现: 计算机游戏在社会和生活中享有特殊地位。游戏设计者主要考虑易学性、趣味性和界面友好性。趣味性是本质吸引力,使玩游戏者百玩不厌。网络游戏一般考虑如何搭建安全可靠、丰富多彩的…

汇编语言:寻址方式在结构化数据访问中的应用——计算人均收入

有一年多没有在CSDN上发博文了。人的工作重心总是有转移的,庆幸一直在做着有意义的事。   今天的内容,是为汇编语言课程更新一个实验项目。      本方案修改自王爽编《汇编语言》第4版P172“实验7寻址方式在结构化数据访问中的应用” …

微软推出GPT-4 Turbo优先使用权:Copilot for Microsoft 365商业用户享受无限制对话及增强图像生成能力

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

【Apache Doris】周FAQ集锦:第 1 期

【Apache Doris】周FAQ集锦:第 1 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目! 在这个栏目中,每周将筛选社区反馈的热门问题和话题,重点回答并进行深入探讨。旨在为广大用户和…

【单】Unity _RPG项目中的问题

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏: ⭐…

【Error】Uncaught TypeError: Cannot read properties of undefined (reading ‘get’)

报错原因: 返回值为undefined 解决: vue3可用?

echarts实现炫酷科技感的流光效果

前言: echarts实现炫酷科技感的流光效果 效果图: 实现步骤: 1、引入echarts,直接安装或者cdn引入 npm i echarts https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 2、封装 option方法,第一个数据是折线数据&a…

面试:HashMap

目录 1、底层数据结构,1.7 与1.8有何不同? 2、为何要用红黑树,为何一上来不树化,树化阈值为何是8,何时会树化,何时会退化为链表? 3、索引如何计算? hashCode都有了,为何还要提供hash()方法?数组容量为…

AJAX —— 学习(三)(完结)

目录 一、jQuery 中的 AJAX (一)get 方法 1.语法介绍 2.结果实现 (二)post 方法 1.语法介绍 2.结果实现 (三)通用型的 AJAX 方法 1.语法介绍 2.结果实现 二、AJAX 工具库 axios &#xff08…

【XCPC笔记】2023 (ICPC) Jiangxi Provincial Contest——ABCHIJKL 做题记录

赛后gym练习及补题,gym链接:2023 (ICPC) Jiangxi Provincial Contest – Official Contest 补题顺序 L [Zhang Fei Threading Needles - Thick with Fine](https://codeforces.com/gym/104385/problem/L)题面解读参考代码 A [Drill Wood to Make Fire](h…

【数据结构与算法】力扣 24. 两两交换链表中的节点

题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入: head [1,2,3,4] 输出&#…

迷茫下是自我提升

长夜漫漫,无心睡眠。心中所想,心中所感,忧愁当前,就执笔而下,写下这篇文章。 回忆过往 回想当初为啥学前端,走前端这条路,学校要求嘛,兴趣爱好嘛,还是为了钱。 时间带着…

使用GPT需要注意的事项

GPT出来之后,基本就告别浏览器搜索问题答案了。将问题原封不动的copy给GPT基本可以得到解答。 但是这个也有弊端,那就是太依赖GPT了。 1,使用GPT需要更强的专业知识:除了能问对问题,还要具备识别GPT&q…

WordPress 6.5 “里贾纳”已经发布

WordPress 6.5 “里贾纳”已经发布,其灵感来自著名爵士小提琴家Regina Carter的多才多艺。雷吉娜是一位屡获殊荣的艺术家和著名的爵士乐教育家,以超越流派而闻名,她在古典音乐方面的技术基础和对爵士乐的深刻理解为她赢得了大胆超越小提琴所能…

华为ICT七力助推文化产业新质生产力发展

创新起主导作用的新质生产力由新劳动者、新劳动对象、新劳动工具、新基础设施等四大要素共同构成,符合新发展理念的先进生产力质态;具有高科技、高能效、高质量等三大突出特征。而通过壮大新产业、打造新模式、激发新动能,新质生产力能够摆脱…