echarts柱状图实现立体圆柱

ui设计图长酱紫：

echarts官网的柱状图长酱紫：

我们通过给柱子加样式来实现（series）：

let yAxisData = [120, 200, 150, 80, 70, 110, 130];
let option = {
      xAxis: {
          type: 'category',
          data: yAxisData 
      },
      yAxis: {
          type: 'value'
      },
      series: [
      {
          data: yAxisData ,
          type: 'bar',
          barWidth: 16,
          itemStyle: {
             borderRadius: [1, 1, 6, 6],
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#709CF5' }
             ]),
          }
      },
      {  // 圆柱上面的白色小盖子
          name: 'a',
          symbolOffset: [0, -6],
          tooltip: {
              show: false
          },
          type: 'pictorialBar',
          itemStyle: {
             normal: {
                color: '#fff'
             }
          },
          symbol: 'circle',
          symbolSize: ['16', '10'],
          symbolPosition: 'end',
          data: yAxisData ,
          z: 3
      },
      {  // 圆柱上面的蓝色（同色）小盖子
          name: 'b',
          symbolOffset: [0, -7],
          tooltip: {
             show: false
          },
          type: 'pictorialBar',
          itemStyle: {
              normal: {
                 color: '#709CF5'
              }
          },
          symbol: 'circle',
          symbolSize: ['16', '10'],
          symbolPosition: 'end',
          data: yAxisData ,
          z: 3
       }
    ]
};

效果如下：