echart实现模拟3D柱状图，有什么好的解决方案嘛？

Question

Answer 1

推荐地址：https://madeapie.com/#/

Answer 2

效果图

实现

创建一个div

    <div ref="bar-3d" class="bar-3d" style="width:100%;height:100%"></div>

实例化echarts对象

    import * as echarts from "echarts/lib/echarts"
    let bar = echarts.init(this.$refs['bar-3d'])

基本配置项

 let options = {
   // 直角坐标系内绘图网格,设置组件距离容器的距离
      grid: {
        left: 50,
        top: 50,
        right: 50,
        bottom: 50
      },
    // 设置鼠标移入的提示，默认显示
    tooltip: {},
    // 设置图例
    legend:{
        textStyle:{
        color: '#999'
        }
    },
    // 设置x轴
    xAxis: {
        data: [],
        // 显示x轴
        axisLine: {
           show: true
        },
        // 设置x轴的颜色和偏移量
        axisLabel:{
            color: '#999',
            rotate: 0
        },
        // 不显示x轴刻度
        axisTick:{
           show: false
       }
    },
    // 设置y轴
    yAxis: {
         // 显示y轴
        axisLine: {
           show: true
        },
        // 设置y轴的颜色
        axisLabel:{
            color: '#999',
        },
        // 不显示y轴刻度
        axisTick:{
           show: false
       },
       // 不显示分隔线
       splitLine:{
           show: false
       }
      },
    // 表示不同系列的列表
      series:[]
 }

series配置项目——这是重点
定义一个函数 通过传参的形式设置series和 x轴数据
对series一些参数进行说明

   initDta (xData, yData) {
    // 设置顶部和底部的值
       let symbolData = [], newShadowHight = []
       let heights = 0
       yData.forEach(item => {
           symbolData.push(1)
           heights+=item
       })
      newShadowHight =  yData.map(item => heights)
        options.xAxis.data = xData
        options.series = [
            // 底部
            {
                z: 2,
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolOffset: ['0%', '50%'],
                symbolSize: [30, 12],
                toolltip:{
                    show: false
                },
                itemStyle:{
                 color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
                }
                data: symbolData, // [1,1,1,1,1]
            }
            // 内容区域
            {
               z: 1,
               type: 'bar',
               barWidth: 30,
               data: yData
            }
            // 内容的顶部
             {
                z: 3,
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolPosition: 'end'
                symbolOffset: ['0%', '-50%'],
                symbolSize: [30, 12],
                toolltip:{
                    show: false
                },
                itemStyle:{
                 color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
                }
                data: yData, 
            }
            // 阴影区域
              {
               z: 0,
               type: 'bar',
               barWidth: 30,
               data: newShadowHight,  // [400, 400, 400, 400, 400]
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#9cc1ff'},{offset:1, color: '#ecf5ff'}])
                }
            }
            // 阴影的顶部
             {
                z: 3,
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolPosition: 'end'
                symbolOffset: ['0%', '-50%'],
                symbolSize: [30, 12],
                toolltip:{
                    show: false
                },
                itemStyle:{
                 color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
                }
                data: newShadowHight, 
            }
        ]
        
        // 设置配置项
        bar.setOption(options)
    }

• 应用

  // 当请求回数据后
  this.initData(['周一','周二','周三','周四','周五','周六'],[100, 50, 70, 80, 60, 40]) 

https://juejin.cn/post/7168439572798373919