立体3D渐变的echarts柱状图

一、原理

立体柱图效果是由四部分组成，上下左右，渐变效果可以删除底部

二 、效果

立体3D渐变的echarts效果图

三、代码

option = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '12%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    data: [1,2,3],
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      symbol: ['none'],
      symbolSize: [10, 17],
      lineStyle: {
        color: '#FFF',
        width: 0 //  改变坐标线的颜色
      }
    },
    offset: 8,
    axisLabel: {
      //调整x轴的lable
      textStyle: {
        fontSize: 11, // 让字体变大
        fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
        fontWeight: 'bold',
        color: '#FFFFFF'
      }
    }
  },
  yAxis: {
    // type: "value",
    // name:'时长（小时）',
    splitLine: {
      //刻度线
      show: false
    },
    splitArea: {
      //柱状图后面的背景色
      show: false
      // areaStyle: {
      //   color: ["rgba(221,247,250,0.7)","rgba(245,249,232,0.7)"]
      // }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      //调整y轴的lable
      textStyle: {
        fontSize: 12 // 让字体变大
      },
      show: false
    },
    axisLine: {
      symbol: ['none'],
      symbolSize: [15, 17],
      lineStyle: {
        color: 'rgba(0 0 0 0)',
        width: 0 //  改变坐标线的颜色
      }
    }
  },
  axisPointer: {
    show: false,
    link: { xAxisIndex: 'all' },
    type: 'shadow',
    label: {
      backgroundColor: '#777'
    }
  },
  series: [
    {
      name: '',
      type: 'bar',
      showSymbol: false,
      hoverAnimation: false,
      data: [1,2,3,4],
      barWidth: 10, //柱图宽度
      // barCategoryGap:'60%',
      itemStyle: {
        //左面
        normal: {
          color: function (params) {
            let colorList = ['#7EEEFB'];
            return colorList[0];
          },
          barBorderRadius: [4, 0, 0, 100]
        }
      }
    },
    {
      name: '',
      tooltip: {
        show: true
      },
      type: 'bar',
      barWidth: 10,
      // barCategoryGap:'60%',
      itemStyle: {
        //右面
        normal: {
          color: function (params) {
            let colorList = ['#48D9F5'];
            return colorList[0];
          },
          borderWidth: 0.1,
          barBorderRadius: [0, 5, 100, 0]
        }
      },
      data: [1,2,3,4],
      barGap: 0
    },
    {
      name: '',
      tooltip: {
        show: false
      },
      type: 'pictorialBar',
      itemStyle: {
        //顶部
        normal: {
          color: function (params) {
            let colorList = ['#48D9F5'];
            return colorList[0];
          },
          borderColor: '#000',
          borderWidth: 0.1,
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#FFFFFF',
              fontSize: 14,
              fontFamily: '微软雅黑'
            },
            offset: [0, -2]
          }
        }
      },
      symbol: 'diamond',
      symbolSize: ['20.5', '13'],
      symbolOffset: [0, '-38%'],
      symbolPosition: 'end',
      data: [1,2,3,4],
      z: 3
    },
    {
      name: '',
      tooltip: {
        show: false
      },
      type: 'pictorialBar',
      itemStyle: {
        //底部
        normal: {
          color: function (params) {
            let colorList = ['#48D9F5'];
            return colorList[0];
          },
          borderColor: '#000',
          borderWidth: 0.1,
          label: {
            show: false, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#FFFFFF',
              fontSize: 14,
              fontFamily: '微软雅黑'
            },
            offset: [0, -2]
          }
        }
      },
      symbol: 'diamond',
      symbolSize: ['20.5', '17'],
      symbolOffset: [0, '2.5'],
      symbolPosition: 'start',
      data: [1,2,3,4],
      z: 0
    }
  ]
};