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\' }
              ]
            }
          }
        }

 

 好了，完事儿！