echart-立体柱形图

现在互联网越来越卷了，再也不是随便画画就完事了，对UI还原度越来越高了，最近刚好遇到对echart展示有要求，于是随手记录下， 先看看效果吧

// 定义柱形图颜色值
const optionData = {
  xAxisData: ['a', 'b', 'c', 'd'],
  barData: [200, 100, 500, 200],
  lineData: [20, 10, 50, 20]
}
  const colorRGBA = [    ['rgba(255, 90, 65, 1)', 'RGBA(158, 73, 54, 1)', 'RGBA(180, 64, 51, 1)'],
    ['rgba(45, 215, 110, 1)', 'RGBA(10, 127, 55, 1)', 'RGBA(31, 142, 78, 1)'],
    ['rgba(255, 170, 35, 1)', 'RGBA(167, 93, 8, 1)', 'RGBA(146, 99, 29, 1)'],
    ['RGBA(75, 121, 226, 1)', 'RGBA(39, 74, 171, 1)', 'RGBA(39, 74, 171, 1)']
  ]
  const colorFn = (colorArr: string[]) => {
    return {
      type: 'linear',
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: colorArr[0]
        },
        {
          offset: 0.5,
          color: colorArr[0]
        },
        {
          offset: 0.5,
          color: colorArr[1]
        },
        {
          offset: 1,
          color: colorArr[1]
        }
      ]
    }
  }
  // 生成渐变色
  const colorBgArr = [colorFn(colorRGBA[0]), colorFn(colorRGBA[1]), colorFn(colorRGBA[2]), colorFn(colorRGBA[3])]
  const barWidth = 30
 const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // 图表大小位置限制
    grid: {
      x: '10%',
      x2: '10%',
      y: '20%',
      y2: '15%'
    },
    xAxis: {
      data: optionData.xAxisData,
      // 坐标轴
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#DEDEDE',
          type: 'dashed' // 线的类型 虚线
        },
        textStyle: {
          color: '#fff',
          fontSize: '10'
        }
      },
      type: 'category',
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#fff',
          fontWeight: 500,
          fontSize: '12'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        name: '单位：件',
        nameTextStyle: {
          color: '#A0A0A0'
        },
        min: 0, // 最小
        // max: 3500,//最大
        // interval: 200, // 相差
        boundaryGap: [0.2, 0.2],
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // 线的类型 虚线0
            opacity: 0.2// 透明度
          }
        },
        // axisTick: {
        //     show: false
        // },
        // axisLine: {
        //     show: false,
        // },
        // 坐标值标注
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        }
      },
      {
        type: 'value',
        scale: true,
        // name: '百分比',
        position: 'right',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // 线的类型 虚线0
            opacity: 0.2// 透明度
          }
        },
        // max: 100,
        min: 0,
        // interval: 20, // 相差
        // boundaryGap: [0.2, 0.2],
        axisLabel: {
          formatter: '{value}%',
          textStyle: {
            color: '#fff'
          }
        }
      }
    ],
    series: [
      // 柱形图中
      {
        z: 1,
        name: '总数(件)',
        type: 'bar',
        barWidth: barWidth,
        barGap: '0%',
        data: optionData.barData,
        itemStyle: {
          normal: {
          // 每个柱形图的颜色
            color: function (param: any) {
              return colorBgArr[param.dataIndex] || colorFn(colorRGBA[0])
            }
          }
        }
      },
      // 柱形图下
      {
        z: 2,
        name: '总数',
        type: 'pictorialBar',
        data: optionData.barData.map(item => item + 90),
        symbol: 'diamond',
        symbolOffset: ['-0%', '20%'],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
          // 每个柱形图的颜色
            color: function (param: any) {
              return colorBgArr[param.dataIndex] || colorFn(colorRGBA[0])
            }
          }
        },
        tooltip: {
          show: false
        }
      },
      // 柱形图上
      {
        z: 3,
        name: '总数',
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: optionData.barData,
        symbol: 'diamond',
        symbolOffset: ['-0%', '-60%'],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
          // 每个柱形图的颜色
            color: function (param: any) {
              return colorRGBA[param.dataIndex][2] || colorFn(colorRGBA[0])
            }
          }
        },
        tooltip: {
          show: false
        }
      },
      // 折线渲染
      {
        name: '占比(%)',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: 'rgba(0, 255, 235, 1)'
          }
        },
        data: optionData.lineData
      }
    ]
  }

有不懂的，欢迎在评论区留言