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

 

 好了，完事兒！