echarts实现立体柱状折现图

效果图

代码

const barWidth = 30; //柱子宽度
const barData = [
  476, 13, 235, 2, 402, 258, 387, 306, 8, 31, 734, 39, 762, 225, 31, 18
]; //柱子数据
const lineData = [
  521469.8, 685, 36778, 680.8, 90847.7, 72425.5, 75929.6, 76918.7, 1282, 1641.2,
  462335.5, 37348.04, 232671, 45807, 6596.2, 1782
]; //线数据
const xText = [
  '摆件',
  '弹簧扣',
  '耳饰',
  '福牌',
  '挂件',
  '手脚链',
  '戒指',
  '链牌',
  '链坠',
  '手串珠',
  '手镯',
  '套装',
  '童镯',
  '项链',
  '银币',
  '银条'
]; //X轴文字
const xData = [];
for (let i = 0; i < xText.length; i++) {
  const data = `${xText[i]}[${barData[i]}]`;
  xData.push(data);
} //X轴数据拼接
const barColor = {
  type: 'linear',
  x: 0,
  x2: 1,
  y: 0,
  y2: 0,
  colorStops: [
    {
      offset: 0,
      color: '#345A8B'
    },
    {
      offset: 0.5,
      color: '#345A8B'
    },
    {
      offset: 0.5,
      color: '#387ABD'
    },
    {
      offset: 1,
      color: '#387ABD'
    }
  ]
}; // 也可以使用单个颜色'#345A8B'，不用渐变
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['件数', '实收金额(元)']
  }, 
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        show: true,
        rotate: 30,
        interval: 0 //使x轴文字显示全
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '件数'
    },
    {
      type: 'value',
      name: '实收金额(元)'
    }
  ],
  series: [
    {
      name: '件数',
      type: 'bar',
      z: 1,
      interval: 0,
      barWidth: barWidth,
      itemStyle: {
        borderRadius: [0, 0, 0, 0], //柱子四周圆角
        color: barColor //柱子左右颜色（深，浅）
      },
      data: barData
    },
    {
      z: 2,
      name: '件数',
      type: 'pictorialBar',
      data: barData, //此数据对应底部组件
      symbol: 'diamond', //底部组件形状，不写默认为椭圆
      symbolOffset: [0, '50%'], //与柱子的偏移角度
      symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
      itemStyle: {
        normal: {
          borderColor: '#51C0DB',
          borderWidth: 2, //加上棱角分明
          color: '#51C0DB'
        }
      },
      tooltip: {
        show: false
      }
    },
    {
      z: 3,
      name: '件数',
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: barData, //此数据对应顶部组件
      symbol: 'diamond',
      symbolOffset: [0, '-50%'],
      symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
      itemStyle: {
        normal: {
          borderColor: '#51C0DB',
          borderWidth: 2, //加上棱角分明
          color: '#51C0DB'
        }
      },
      tooltip: {
        show: false
      }
    },
    {
      name: '实收金额(元)',
      type: 'line',
      smooth: true,
      label: {
        show: true
      },
      color: '#FF9451',
      yAxisIndex: 1,
      data: lineData
    }
  ]
};