echarts二维坐标这样写出立体柱状图

一、方法一，直接使用立体图片来显示，即series里面type：‘pictorialBar’

代码如下：

//imgUrl可以是图片，可以是svg，是做成像立体柱状图的图片

const imgUrl = 'image://data:image/png;base64,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'

let yData = [{value:13, symbol: imgUrl},
{value:53, symbol: imgUrl},
{value:23, symbol: imgUrl},
{value:43, symbol: imgUrl},
{value:66, symbol: imgUrl},
{value:78, symbol: imgUrl},
{value:68, symbol: imgUrl}]

let xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
let nc = document.getElementById("timeRange"); 

let myChart = echarts.init(nc); 

let option = {

          grid: {
            left: '16%',
            bottom: '26%',
            right: '10%',
            top: '16%'
          },
          tooltip: {
            show: true,
            confine: true, // true限制在图表内部
            trigger: 'axis',
            position(point, params, dom, rect, size) {
              // 固定在顶部,并且数据下标小于7的显示在右边，大于7的显示在左边
              return params[0].dataIndex <= 7
                     ? [point[0] + 20, '30%']
                     : {top: '30%', left: point[0] - size.contentSize[0] - 25}
            },
            padding: 6,
            backgroundColor: 'transparent',
            borderWidth: 1,
            borderColor: 'transparent',
            axisPointer: {  //坐标轴指示器，坐标轴触发有效，
              type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
              shadowStyle: {
                color: 'rgba(0,222,255,0.3)'
              }
            }
          },
          xAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              fontSize: 16 * this.scale,
              color: '#30eee9',
              interval: '0',//强制显示所有类目
              rotate: -45,//类目倾斜放
              textStyle: {
                color(value, index) {
                  return index < 10 ? '#FCC059' : '#30EEE9';
                }
              },
            },
            data: xData,
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#2ad1d2'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //背景网格线
              show: true,
              lineStyle: {
                color: '#125770'
              }
            }
          },
          series: [
            {
              type: 'pictorialBar',
              symbol: imgUrl,
              barGap: 0,
              barWidth: 20,//柱图宽度
              symbolSize: ['100%', '100%'],
              data: yData
            }
          ]
        }

myChart..setOption(option)

　　

二、使用三个series数据拼接，并使用相应的颜色阴影组合成类立体图形

代码：直接上关键代码

let yData = [23, 30, 33, 5, 60, 7， 88]
let xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
let nc = document.getElementById("timeRange"); 

let myChart = echarts.init(nc); 
// option设置
let option = {
          grid: {   // 整体位置
            left: 0,  // 距离左侧距离
            bottom: 0, // 距离低侧的距离
            top: 10,   // 距离顶部的距离
            right: 0,  // 距离右侧的距离
            height: 'auto',
             'auto',
            containLabel: true
          },
          tooltip: {
            show: true,
            confine: true, // true限制在图表内部
            trigger: 'axis',
            position(point, params, dom, rect, size) {
              // 固定在顶部
              return params[0].dataIndex <= 17
                     ? [point[0] + 20, '30%']
                     : {top: '30%', left: point[0] - size.contentSize[0] - 25}
            },
            padding: 6,
            backgroundColor: 'transparent',
            borderWidth: 1,
            borderColor: 'transparent',
            axisPointer: {  //坐标轴指示器，坐标轴触发有效，
              type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
              shadowStyle: {
                color: 'rgba(0,222,255,0.3)'
              }
            }
          },
          xAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              fontSize: 16 * this.scale,
              color: '#30eee9',
              interval: '0',//强制显示所有类目
              rotate: -45,//类目倾斜放
              textStyle: {
                color(value, index) {
                  return index < 10 ? '#FCC059' : '#30EEE9';
                }
              },
            },
            data: xData,
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#2ad1d2'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //背景网格线
              show: true,
              lineStyle: {
                color: '#125770'
              }
            }
          },
          series: [  // 数据配置项（柱状图）
            { // 正面
              type: 'bar',  // 图表类型 bar 为柱状图
              barWidth: 20, // 柱体的宽度
              data: yData,  // 柱体数据
              itemStyle: { // 单个柱体的配置项
                color: '#4A90E2'
              },
              barGap: 0  // 柱体间隔
            }, { // 侧面
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: '#3773BA'
              },
              data: yData,
              barGap: 0
            }, {  // 顶部
              name:'b',
              tooltip:{
                show:false
              },
              type: 'pictorialBar',
              itemStyle: {        //顶部
                normal: {
                  color:function(params) {
                    let colorList = ["#FC9F9F","#F7B177","#BBF64A","#4DF4EE","#947FFA","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
                    return colorList[params.dataIndex];
                  },
                  borderColor:'',
                  borderWidth:0.01,
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                      color :'black',
                      fontSize: 16,
                      fontFamily:'微软雅黑',
                    }
                  }
                }
              },
              symbol: 'rect',
              symbolRotate:45,
              symbolSize: ['30','30'],
              symbolOffset:['0','-17'],
              symbolPosition: 'end',
              data: yData,
              z:3
            }
          ]
        }

myChart..setOption(option)