Echarts立体柱状图

最新推荐文章于 2025-07-11 09:14:17 发布

原创

最新推荐文章于 2025-07-11 09:14:17 发布 · 1.1w 阅读

68 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #echarts

这篇博客详细介绍了如何用Echarts实现立体柱状图的步骤，通过HTML和JS的基础配置，展示了一种美观的柱状图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts绘制漂亮的立体柱状图（超详细）

为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码：
HTML：

<div class="content bgBox">
	<div class="firstTitle">
		<p class="titleName">购买力最强</p>
	</div>
	<div id="buyTop" style="width: 100%;height:90%;"></div>
</div>

JS：

// 购买力最强
var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
function fetchBuytop() {
   
     //定一个方法
    $.ajax({
   
     //发送ajax请求数据
        type: "POST",
        url: url,
        success: function (e) {
   
   
            var areaData = e.data.area;  //横坐标值
            var payPersonNum = e.data.payPersonNum;  //柱状图的值
            const VALUE1 = [{
   
       //每个柱子的颜色（可自行改变颜色）
                value: payPersonNum[0],
                itemStyle: {
   
   
                    color: 'rgba(0,137,255,1.0)'
                }
            },
            {
   
   
                value: payPersonNum[1],
                itemStyle: {
   
   
                    color: 'rgba(0,25,255,1.0)'
                }
            },
            {
   
   
                value: payPersonNum[2],
                itemStyle: {
   
   
                    color: 'rgba(115,5,255,1.0)'
                }
            },
            {
   
   
                value: payPersonNum[3],
                itemStyle: {
   
   
                    color: 'rgba(215,1,255,1.0)'
                }
            },
            {
   
   
                value: payPersonNum[4],
                itemStyle: {
   
   
                    color: 'rgba(182,105,86,1.0)'
                }
            }
            ]
            const VALUE2 = [{
   
     //最高值的柱子颜色  就是你所看到的透明那部分
                value: Math.max.apply(null, payPersonNum),    //这个value是柱状图的值里的最大值
                itemStyle: {
   
   
                    color: 'rgba(0,137,255,.1)'
                }
            },
            {
   
   
                value:  Math.max.apply(null, payPersonNum),
                itemStyle: {
   
   
                    color: 'rgba(0,25,255,.1)'
                }
            },
            {
   
   
                value:  Math.max.apply(null, payPersonNum),
                itemStyle: {
   
   
                    color: 'rgba(115,5,255,.1)'
                }
            },
            {
   
   
                value:  Math.max.apply(null, payPersonNum),
                itemStyle: {
   
   
                    color: 'rgba(215,1,255,.1)'
                }
            },
            {
   
   
                value:  Math.max.apply(null, payPersonNum),
                itemStyle: {
   
   
                    color: 'rgba(182,105,86,.1)'
                }
            }
            ]
            // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
   
   
                shape: {
   
   
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
   
   
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint
                    const c0 = [shape.x, shape.y]
                    const c1 = [shape.x - 13, shape.y - 13]
                    const c2 = [xAxisPoint[0] - 13, xAxisPoint