echarts横向立体3D柱状图

news2024/11/27 18:44:39

实现原理:series中包含两个普通的柱状图bar,其宽度各占一半且设置间距barGap为0,再添加一个象形柱状图pictorialBar,symbol设为菱形diamond,调整其位置大小层级等数据以达到覆盖在柱状图顶部的立体效果。

运行效果

在这里插入图片描述
代码

function getEcharts3DBar () {
    let yAxisData = ['标题1', '标题2', '标题3', '标题4', '标题5', '标题6'];
    let seriesData = [5, 36, 10, 20, 15, 25];
    var barWidth = 30, constData = [], showData = [];
    seriesData.forEach(item => {
      if (item) {
          constData.push(1);
          showData.push(item);
      } else {
          constData.push(0);
          showData.push(
           {
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: "rgba(0,0,0,0)",
                  borderWidth: 2,
                  color: "rgba(0,0,0,0)",
                },
              },
           }
          );
      }
    });
    return {
        xAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#3AA8E2'
              }
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            axisLine: { show: false },
            axisTick: { show: false }
        },
        series: [
            {
	            name: '数据',
	            type: "bar",
	            barWidth: barWidth / 2,
	            barGap: "0%",
	            data: seriesData,
	            color: '#57F1FF',
	            label: {
	              show: true,
	              position: 'right',
	              offset: [barWidth / 3, barWidth / 3]
	            }
            },
            {
	            name: '数据',
	            type: "bar",
	            barWidth: barWidth / 2,
	            data: seriesData,
	            color: '#0090B4',
            },
            {
	            z: 3,
	            name: '数据',
	            type: "pictorialBar",
	            symbolPosition: "end",
	            data: showData,
	            symbol: "diamond",
	            symbolOffset: ["50%", "0%"],
	            symbolSize: [barWidth / 2, barWidth],
	            color: '#017592'
            },
        ],
    };
}
option = getEcharts3DBar();

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

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

相关文章

找不到d3dcompiler43.dll如何修复,分享5种方法助你解决问题

电脑提示找不到d3dcompiler43.dll,这是一个常见的小问题,主要是由于该dll文件丢失所导致。在日常使用电脑的过程中,我们可能会遇到此类丢失问题。为了解决该问题,我们只需进行相关的文件修复操作即可。以下是几种常见的d3dcompile…

电子元器件基础知识总结

1.0 电阻 电阻的定义:导体对电流的阻碍作用称之为电阻【每一种导体都有内阻的存在】 闭合的电路中电子的移动输出有多快?电子在导体中的移动速度是很慢的 【铜线中电流的移动速度】 电子受到原子核的束缚,移动的速度很慢,在电压足…

平安养老险蚌埠中心支公司开展“78奋力前行”健步走活动

7月4日,平安养老保险股份有限公司(以下简称“平安养老险”)蚌埠中心支公司组织员工在张公山公园开展“78奋力前行”健步走活动,传递保险行业的正能量,展现平安养老险的活力与风采。 平安养老险蚌埠中心支公司员工身着…

2024年7月最佳免费天气API接口推荐

在我们的日常生活中,天气扮演着一个至关重要的角色,它影响着我们的情绪、健康、日常安排和商业决策。无论是计划一次户外活动、安排农作物种植,还是确保旅行安全,天气信息的准确性和及时性至关重要。随着技术的进步,天…

百度出品_文心快码Comate提升程序员效率

1.文心快码 文心快码包含指令、插件 和 知识三种功能, 1)指令包含Base64编码、Base64解码、JSON转TS类型、JSON转YAML、JWT解码喂JSON。 2)插件包含 3)指令包含如下功能: 官网链接

vue前端实现导出页面为word(两种方法)

将vue页面导出为word文档,不用写模板,直接导出即可。 第一种方法(简单版) 第一步:安装所需依赖 npm install html-docx-js -S npm install file-saver -S第二步:创建容器,页面使用方法 注意:在当前页面引…

阿里云centos 取消硬盘挂载并重建数据盘信息再次挂载

一、取消挂载 umount [挂载点或设备] 如果要取消挂载/dev/sdb1分区,可以使用以下命令: umount /dev/sdb1 如果要取消挂载在/mnt/mydisk的挂载点,可以使用以下命令: umount /mnt/mydisk 如果设备正忙,无法立即取消…

ESP32CAM物联网教学09

ESP32CAM物联网教学09 摄像头配上显示屏 小智给摄像头配上了一块液晶显示屏,ESP32Cam变得更加酷炫了,应用也更加广泛了。 TFT彩色显示屏从第一课的CameraWebServer开始,我们一直都是利用浏览器来查看显示摄像头的视频流,都需要借助这个网页提供的服务。 可以让ESP32Cam开…

通过营销本地化解锁全球市场

在一个日益互联的世界里,企业必须接触到全球各地的不同受众。营销本地化是打开这些全球市场的关键。它包括调整营销材料,使其与不同地区的文化和语言细微差别产生共鸣。以下是有效的营销本地化如何推动您的全球扩张,并用实际例子来说明每一点…

Windows 安装hadoop 3.4

目录 安装 下载 设置环境变量 配置 修改:hadoop-env.cmd 修改:core-sit.xml 修改:hdfs-site.xml 修改:mapred-site.xml 修改:yarn-site.xml 运行 格式化HDFS文件系统 启动:hadoop 启动&#xf…

kubernetes集群部署:关于CRI(一)

上周接到了一项紧急预研任务:kubernetes各项属性采集。目前我手里已经存在二进制部署的一套kubernetes(v1.23版本CRI:dockershim)集群;为了适配的广泛性,决定使用kuberadm工具部署最新(v1.30版本…

MATLAB-SCSO-CNN-SVM,基于SCSO沙猫群算法优化卷积神经网络CNN结合支持向量机SVM数据分类(多特征输入多分类)

SCSO-CNN-SVM,基于SCSO沙猫群算法优化卷积神经网络CNN结合支持向量机SVM数据分类(多特征输入多分类) 1.数据均为Excel数据,直接替换数据就可以运行程序。 2.所有程序都经过验证,保证程序可以运行。 3.具有良好的编程习惯,程序均…

16_更快的速度与精度:Faster R-CNN

回顾R-CNN:链接 回顾Fast R-CNN:链接 1.1 简介 Faster R-CNN是作者Ross Girshick继Fast R-CNN后的又一力作。同样使用VGG16作推理速度在GPU上达到5fps(包括候选区域的生成),准确率为网络的backbone,也有进一步的提升。在2015年的ILSVRC以及COCO竞赛中…

2024年全国青少信息素养大赛python编程复赛集训第十天编程题分享

整理资料解析答案非常不容易,感谢各位大佬给个点赞和分享吧,谢谢 今天题目较简单:适合小学组 大家如果不想阅读前边的比赛内容介绍,可以直接跳过:拉到底部看集训题目 (一)比赛内容: 【小学组】 1.了解输入与输出的概念,掌握使用基本输入输出和简单运算 为主的标准…

智慧生活新篇章,Vatee万腾平台领航前行

在21世纪的科技浪潮中,智慧生活已不再是一个遥远的梦想,而是正逐步成为我们日常生活的现实。从智能家居的温馨便捷,到智慧城市的高效运转,科技的每一次进步都在为我们的生活增添新的色彩。而在这场智慧生活的变革中,Va…

哪个品牌的加密软件稳定方便使用?

一、什么是企业加密软件? 企业加密软件是一种用于保护企业内部数据安全的工具。在数字化时代,随着数据量的爆炸式增长,信息安全和隐私保护变得愈发重要。企业加密软件作为保障数据安全的关键工具,受到越来越多用户的青睐。 企业…

Citrix替换:不只是功能拉齐,更是性能体验的超越

用户在选择Citrix替换方案时,除了关注架构和功能的全面性,也期待着国产桌面办公方案带来的惊喜。 深信服桌面云不仅在基础能力和功能上做到了全面对标Citrix,还在用户极为重视的安全、可靠性、智能监控与排障、信创生态等方面做到了全面超越…

PHP中的运算符与表达式:深入解析与实战应用

目录 一、基础概念 1.1 运算符的定义 1.2 表达式的定义 二、PHP运算符的分类 2.1 算术运算符 2.2 赋值运算符 2.3 比较运算符 2.4 逻辑运算符 2.5 位运算符 2.6 字符串运算符 2.7 错误控制运算符 三、表达式的优先级与结合性 3.1 优先级 3.2 结合性 四、实战应…

答应我,看完再购买ELISA试剂盒!

酶联免疫吸附测定法 (enzyme-linked immunosorbent assay),简称为ELISA,是用于检测体液中微量物质的固相免疫测定方法。它是一种特殊的试剂分析方法,是在免疫酶技术( immunoenzymatic techniques ) 的基础上发展起来的一种新型的免疫测定技术…

跟《经济学人》学英文:2024年07月06日这期 Amazon turns 30

As Amazon turns 30, three factors will define its next decade It will have to deal with trustbusters, catch up on AI and revive its core business 它将不得不应对反垄断者,追赶人工智能并重振其核心业务 trustbuster: 美 [ˈtrəs(t)ˌbəs…