echarts横向立体3D柱状图

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

运行效果


代码

javascript 复制代码
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();
相关推荐
Definition2 分钟前
Claude Code 能养宠物了,体验下抽卡的感觉
前端·程序员
Daiyaosei6 分钟前
紧急安全警报:Axios npm 包被投毒事件详解与防护指南
前端·javascript·安全
We་ct12 分钟前
LeetCode 295. 数据流的中位数:双堆解法实战解析
开发语言·前端·数据结构·算法·leetcode·typescript·数据流
青槿吖15 分钟前
第一篇:Redis集群从入门到踩坑:3主3从保姆级搭建+核心原理一次性讲透|面试必看
前端·redis·后端·面试·职场和发展·bootstrap·html
美狐美颜sdk24 分钟前
2026主流直播美颜sdk对比:效果、算法与成本分析
前端·人工智能·计算机视觉·美颜sdk·直播美颜sdk·第三方美颜sdk·视频美颜sdk
王霸天27 分钟前
🚨 还在用 rem) 做大屏适配?用 vfit.js 一键搞定,告别改稿8版的噩梦!
前端·vue.js·数据可视化
文心快码BaiduComate41 分钟前
Comate AI IDE三大能力升级:支持语音输入& AI可操作浏览器 & Figma设计与代码双向转换
前端·后端·程序员
coder_Eight1 小时前
LRU 缓存实现详解:双向链表 + 哈希表
前端·算法
1024小神1 小时前
kotlin安卓项目配置app横屏等方式
前端
Cxiaomu1 小时前
React + Node.js 实战:用豆包端到端实时语音大模型 API 落地web纯语音助手
前端·react.js·node.js