echarts伪3d柱状图绘制（象形柱图）

1. 伪3d柱状图效果主要是通过对柱体顶部、底部放置图形（菱形），对柱体设置渐变色进行绘制，从而产生视觉上的3d效果。
2. 象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。

数据来源

dataSource = [
	{DateTimeString:'一月', GoodRate: xxx},
	......
	{DateTimeString:'十二月', GoodRate: xxx},
];

绘制效果

数据处理

const maxValue = Math.max(...dataSource.map(f => f.GoodRate));
const barBottom = dataSource.map(f => { if (f.GoodRate) { return 1; } else { return 0; } });
const boxDatas = dataSource.map(f => { if (f.GoodRate) { return maxValue; } else { return 0; } });
const goodRates = dataSource.map(f => f.GoodRate);
option = {
	title: {
	    text: '年度良品率',
	    left: 'center'
	},
    legend: {
      right: '20%'
    },
    xAxis: {
      type: 'category',
       axisLine: {
         lineStyle: {
           color: '#dce2e8'
         }
       },
       axisLabel: {
         interval: 0,
         color: '#556677',
         // 默认x轴字体大小
         fontSize: 12,
         // margin:文字到x轴的距离
         margin: 15
       },
       data: dataSource.map(f => f['DateTimeString'])
    },
    yAxis: {
      type: 'value',
       axisLine: {
         show: true,
         lineStyle: {
           color: '#dce2e8'
         }
       },
       axisLabel: {
         color: '#556677',
         formatter: '{value}%'
       }
    },
    series: [
        { // 柱体
          name: '合格率',
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#0b9eff' },
              { offset: 1, color: '#63caff' }
            ]),
          },
          data: goodRates
        },
        { // 柱顶
          name: '合格率',
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: 2,
          itemStyle: { color: '#0b9eff' },
          data: goodRates
        },
        { // 柱底
          name: '合格率',
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [30, 15],
          itemStyle: { color: '#63caff' },
          data: barBottom
        },
        { // 框柱体
          name: '合格率',
          type: 'bar',
          barWidth: 30,
          barGap: '-100%',
          zlevel: -1,
          itemStyle: { color: '#DCE4E6' },
          data: boxDatas
        },
        { // 框柱顶
          name: '合格率',
          type: 'pictorialBar',
          barWidth: 20,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: -1,
          itemStyle: { color: '#DCE4E6' },
          data: boxDatas
        }
     ]
};