echarts 3D柱状图实现

原创 已于 2025-07-03 14:32:05 修改 · 376 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript #3D柱状图

于 2025-07-03 14:30:17 首次发布

使用echarts实现类似3D效果的柱状图：效果如下：

HTML

1.首先：定义一个div用来展示echarts图表数据

 <div id="centerChart_1" style="width: 100%; height: 508px"></div>

Echarts

分为三个部分（正常正方形柱状图、顶部椭圆形、底部椭圆形）

1.正常柱状图
{
          name: '年度检查量',
          z: 13,
          type: 'bar',
          itemStyle: {
            normal: {
              // barBorderRadius: [0, 0, 36, 30], // 无圆角
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0, [
                { offset: 0, color: '#00357B' },
                { offset: 0.3, color: '#074494' },
                { offset: 0.66, color: '#7FB6FF' },
                { offset: 1, color: '#004CAE' }
              ]
              ), opacity: .9,
            }
          },
          silent: true,
          barWidth: 42,
          barGap: '-100%', // Make series be overlap
          data: [122999, 132523, 152452, 172819, 112214],
        }

其中柱子颜色设通过使用 new echarts.graphic.LinearGradient()设置为线性渐变

2.顶部椭圆
{
          name: '年度检查量',
          type: 'pictorialBar',
          symbolSize: [42, 20],// 生成圆的半径尺寸
          symbolOffset: [0, -10], //位置距离
          z: 14,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: '#9DC7FE' },
                { offset: 1, color: '#074494' }
              ]
            },
            borderColor: '#2760AB', // 模拟边框渐变
            borderWidth: 3,
            barBorderRadius: [0, 0, 0, 0],
          },
          data: [{
            value: 122999,
            symbolPosition: 'end'
          }, {
            value: 132523,
            symbolPosition: 'end'
          }, {
            value: 152452,
            symbolPosition: 'end'
          },
          {
            value: 172819,
            symbolPosition: 'end'
          }, {
            value: 112214,
            symbolPosition: 'end'
          }
          ]
        },

注意：类型type: 'pictorialBar',数据源data中需要设置symbolPosition：'end'这样图形会在柱子的最上方 

3.设置底部椭圆
{
          label: {
            show: false,
            color: "#FFFFFF",
            position: 'top',
            fontSize: 34,
            itemStyle: {
              color: "#FFFFFF"
            },
            offset: [0, -15]
          },
          emphasis: { // 鼠标悬停时的状态
            label: {
              show: true // 鼠标悬停时显示数值
            }
          },
          name: '年度检查量',
          type: 'pictorialBar',
          symbolSize: [42, 20], //生成圆的半径尺寸
          symbolOffset: [0, 10], //位置距离
          z: 12,
          color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0, // 渐变方向：从右到左（90度）
            [
              { offset: 0, color: 'rgba(0,53,123,1)' },   // 开始颜色
              { offset: 0.3, color: 'rgba(7,68,148,1)' }, // 30%位置的颜色
              { offset: 0.66, color: 'rgba(147,194,255,1)' },// 66%位置的颜色
              { offset: 1, color: 'rgba(0,76,174,1)' }    // 结束颜色
            ]
          ),
          opacity: .1,
          data: [122999, 132523, 152452, 172819, 112214]
        },

完整代码 

myEcharts.setOption({
        grid: {
          top: "10%",
          bottom: '15%',
          left: '20%', // 增加图表底部的空白区域
          right: '2%' // 增加图表底部的空白区域
        },
        tooltip: {
          axisPointer: {
            type: 'shadow', // 可以是 'line' 或 'shadow'
            lineStyle: {
              show: false, // 隐藏悬浮线
            },
            shadowStyle: {
              color: 'rgba(0, 0, 0, 0)', // 如果使用阴影模式，可以设置透明色来避免阴影显示
            }
          },
          trigger: 'axis',
          show: true,
          formatter: function (params) {
            return params[2].seriesName + '<br/>'
              + params[2].name + ': ' + params[2].value;
          },
          textStyle: {
            fontSize: 34,
            color: '#FFFFFF'
          },
          backgroundColor: 'rgba(5, 18, 46,0.9)', // 背景颜色
          borderColor: '#ccc', // 边框颜色
          borderWidth: 0, // 边框宽度
        },
        xAxis: [{
          data: [2021, 2022, 2023, 2024, 2025],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 32
            },
            margin: 20, //刻度标签与轴线之间的距离。
          },

          axisLine: {
            show: false //不显示x轴
          },
          axisTick: {
            show: false //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            width: 0.08,
            lineStyle: {
              type: "solid",
              color: "#03202E"
            }
          }
        }],
        yAxis: [{
          //  min: -20,
          splitLine: {
            show: true,
            lineStyle: {
              width: 4,
              color: 'rgba(229,240,255,0.2)',
              type: 'solid'
            }
          },
          axisTick: {
            show: true,
            length: 20,
            margin: 10,
            lineStyle: {
              width: 4,
              color: '#fff',
              type: 'solid'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 40,
            textStyle: {
              color: '#fff',
              fontSize: 32
            },
          }
        }],
        series: [{
          name: '年度检查量',
          type: 'pictorialBar',
          symbolSize: [42, 20],
          symbolOffset: [0, -10],
          z: 14,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: '#9DC7FE' },
                { offset: 1, color: '#074494' }
              ]
            },
            borderColor: '#2760AB', // 模拟边框渐变
            borderWidth: 3,
            barBorderRadius: [0, 0, 0, 0],
          },
          data: [{
            value: 122999,
            symbolPosition: 'end'
          }, {
            value: 132523,
            symbolPosition: 'end'
          }, {
            value: 152452,
            symbolPosition: 'end'
          },
          {
            value: 172819,
            symbolPosition: 'end'
          }, {
            value: 112214,
            symbolPosition: 'end'
          }
          ]
        },
        {
          label: {
            show: false,
            color: "#FFFFFF",
            position: 'top',
            fontSize: 34,
            itemStyle: {
              color: "#FFFFFF"
            },
            offset: [0, -15]
          },
          emphasis: { // 鼠标悬停时的状态
            label: {
              show: true // 鼠标悬停时显示数值
            }
          },
          name: '年度检查量',
          type: 'pictorialBar',
          symbolSize: [42, 20],
          symbolOffset: [0, 10],
          z: 12,
          color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0, // 渐变方向：从右到左（90度）
            [
              { offset: 0, color: 'rgba(0,53,123,1)' },   // 开始颜色
              { offset: 0.3, color: 'rgba(7,68,148,1)' }, // 30%位置的颜色
              { offset: 0.66, color: 'rgba(147,194,255,1)' },// 66%位置的颜色
              { offset: 1, color: 'rgba(0,76,174,1)' }    // 结束颜色
            ]
          ),
          opacity: .1,
          data: [122999, 132523, 152452, 172819, 112214]
        },
        {
          name: '年度检查量',
          z: 13,
          type: 'bar',
          itemStyle: {
            normal: {
              // barBorderRadius: [0, 0, 36, 30], // 无圆角
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0, [
                { offset: 0, color: '#00357B' },
                { offset: 0.3, color: '#074494' },
                { offset: 0.66, color: '#7FB6FF' },
                { offset: 1, color: '#004CAE' }
              ]
              ), opacity: .9,
            }
          },
          silent: true,
          barWidth: 42,
          barGap: '-100%', // Make series be overlap
          data: [122999, 132523, 152452, 172819, 112214],
        }
        ]
      }
      )

隔壁无邪
关注
echarts柱状图（3D）
weixin_61211370的博客
01-10 1088
【代码】echarts柱状图（3D）
vue2+echarts实现3d柱状图
qq_39500287的博客
10-12 844
【代码】vue2+echarts实现3d柱状图。
echarts3d柱状图
qq_51389137的博客
08-10 1452
【代码】echarts3d柱状图。
echarts 3D柱状图
nbclasszj的博客
10-12 2223
echarts 3D柱状图
echarts 3D 柱状图
热门推荐
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts-3D柱状图
xu_xu_0924的博客
05-13 1557
第一种 <div id="pie" style=“height:200px”></div> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('pie')); var xData = ["UPS", "主机", "存储","网络设备"]; var yData = [13,10,9,5]; var option = { "grid": {
echarts3D柱状图
qq_40295815的博客
09-26 1778
i < 5;++i) {}option = {},},},},},},},},},},},},},{},{
echarts 3d柱状图
徐___L
02-16 3986
echarts 3d柱状图
极致呈现系列之：ECharts3D柱状图的维度穿梭
九仞山的专栏
06-30 1719
ECharts3D柱状图的使用
echarts柱状图
11-11
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts3d柱状图贴图带箭头带阴影
铁血猪刚鬣的博客
05-19 982
实现效果 父组件 <echartsColumnar :carVioDistribution="carVioDistribution" echartsType="carVio" ></echartsColumnar> 子组件 <template> <div class="app_rank"> <div :id="'ech
Echarts实现3D柱状图
qq_45787691的博客
04-22 2098
echarts实现3D柱状图。
echarts 实现 3d 柱状图
weixin_38992765的博客
07-28 5890
echart+vue3 实现 3d 柱状图
echarts的3D柱状图
zhuxiaolong1234的博客
02-27 673
【代码】echarts的3D柱状图。
echarts 3d柱状图 锥体
最新发布
03-01
### ECharts 3D 柱状图实现锥体效果 ECharts 支持多种类型的图表，其中包括复杂的三维图形。对于创建具有特殊形状如锥体的3D柱状图，可以通过自定义`itemStyle`属性以及调整系列配置项来达成目标[^1]。 下面是一个简单的例子展示如何利用ECharts构建带有锥形特征的3D柱状图： ```javascript option = { grid3D: {}, xAxis3D: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'value' }, series: [{ type: 'bar3D', data: [ [0, 20], [1, 36], [2, 48], [3, 70], [4, 54], [5, 92], [6, 60] ].map(function (item) { return { value: item }; }), shading: 'lambert', boxWidth: 20, label: { show: true, formatter: function (params) { return params.name + '\n' + params.value[1]; } }, emphasis: { label: { fontSize: 20, color: '#900' } }, // 自定义几何形态参数 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#c23531' }, { offset: 1, color: '#fb9a99' }]), opacity: 0.8 }, // 设置顶部和底部半径以形成圆锥 topRadius: 0, // 圆锥顶点半径设为零 bottomRadius: 10 // 底面半径设置适当大小 }] }; ``` 此代码片段通过修改`topRadius`和`bottomRadius`两个属性实现了从圆形底座逐渐缩小到尖端的效果，即形成了所谓的“锥体”。同时应用了颜色渐变使视觉呈现更加立体生动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值