echarts实现3D柱状图

echarts中的 pictorialBar 可以实现3D柱状图

先来一个效果呈现图：

渐变色效果图  ↓↓↓

 背景图效果图↓↓↓

  

---

 实现步骤：

步骤一：正常的引入2D坐标轴（xAxis、yAxis）

步骤二：把3D柱状图分为3部分，头部、中部、尾部，主要参数的不同取决于 series-pictorialBar. symbol 应用不同背景图，与 series-pictorialBar. symbolSize 进行定位

---

 接下来拆分步骤二

头部：给3d柱状图一个菱形的帽子，参数为 symbol: 'diamond'，symbolPosition: 'end'（图形边缘与柱子结束的地方内切）

{
      type: 'pictorialBar',
      name: 'pictorial element',
      z: 10,
      data: [
        {
          value: 60,
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolPosition: 'end',//图形边缘与柱子结束的地方内切
          symbolSize: ['-95%', 90],//根据柱子大小来做调整
          itemStyle: {
            normal: {
              color: '#FEE47B'
            }
          }
        }
      ]
    }

中部：一个普通的柱子，搭配渐变色或者是一张灵魂的背景图

{
      type: 'bar',
      name: 'reference bar',
      barGap: '-100%',
      // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
      symbolOffset: [0, 0],
      z: 2,
      // itemStyle: { // 有图就别用渐变了哈，图片更真实
      //   color: {
      //     x: 1,
      //     y: 0,
      //     x2: 0,
      //     y2: 0,
      //     type: 'linear',
      //     global: false,
      //     colorStops: [
      //       { offset: 0, color: '#bd530a' },
      //       { offset: 0.5, color: '#bd530a' },
      //       { offset: 0.5, color: '#ca7e06' },
      //       { offset: 1, color: '#ca7e06' }
      //     ]
      //   }
      // },
      data: [60]
    }

尾部：一个普通的三角形，给它转体180，搭配渐变色

{
      type: 'pictorialBar',
      name: 'joy',
      barGap: '-100%',
      z: 3,
      data: [
        {
          value: 10,
          symbol: 'triangle',
          symbolOffset: [0, 40],
          symbolSize: ['-100%', 40],
          symbolRotate: 180,
          itemStyle: {
            color: {
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              type: 'linear',
              global: false,
              colorStops: [
                { offset: 0, color: '#bd530a' },
                { offset: 0.5, color: '#bd530a' },
                { offset: 0.5, color: '#ca7e06' },
                { offset: 1, color: '#ca7e06' }
              ]
            }
          }
        }

 

 好了，完事儿！