自定義柱狀圖（水滴圖）的填坑之路

先放一張水滴圖的效果圖。

當然也可以是其它的形狀，參考demo鏈接如下
https://gallery.echartsjs.com/editor.html?c=xV8ro54T3i

我所做的水滴圖就是參考這個demo來的，這個demo中，涉及到兩個問題點：
1、就是如何應用你想要的形狀。
demo中是在img中分別引入兩種不同顏色深淺的圖片。
在series的data中以symbol的形式引入。
這裏引用的鏈接格式應該是如下文代碼所示：

'image://'+你文件所在項目地址。
// 例如我這個是webstorm中運行的項目。

var apiDataServerBaseUrl = 'http://localhost:63342/zz-microservice-base-FE/';// 服務器地址
let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
img1: {
  a: imgPath + "/style/bigScreenImg/drip/o.png",
  b: imgPath + "/style/bigScreenImg/drip/o-t.png"
},

路徑這個地方切記一定要找對。

2、展示的數量，後臺給的數據必須是數字，不能是字符串。
在這個地方我自己寫的json，模擬的假數據。
開始的時候直接寫來一個數組。

datax:["86個", "38個", "67個", "100個", "40個"]

但是這裏出現的問題是，無法綁定數據。
所以還是通過formatter的方式進行字符串格式化。

//雨滴形成的橫向柱狀圖
  let allYearRainDaysCharts = function (data) {
    let waterDropElement = echarts.init(document.getElementById("jyts-charts"));
    let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
    let imgUrl = {
      img1: {
        a: imgPath + "/style/bigScreenImg/drip/o.png",
        b: imgPath + "/style/bigScreenImg/drip/o-t.png"
      },
      img2: {
        a: imgPath + "/style/bigScreenImg/drip/g.png",
        b: imgPath + "/style/bigScreenImg/drip/g-t.png"
      },
      img3: {
        a: imgPath + "/style/bigScreenImg/drip/y.png",
        b: imgPath + "/style/bigScreenImg/drip/y-t.png"
      },
      img4: {
        a: imgPath + "/style/bigScreenImg/drip/b.png",
        b: imgPath + "/style/bigScreenImg/drip/b-t.png"
      },
      img5: {
        a: imgPath + "/style/bigScreenImg/drip/p.png",
        b: imgPath + "/style/bigScreenImg/drip/p-t.png"
      }
    };

    let value = 1; // >0

    let color = ['#e77c16', '#48ffbc', '#03cafc', '#03cafc', '#b531ff'];

    let dataDrop = [];

    for (let i = 0; i < data.dataY.length; i++) {
      let img = "img" + (i + 1);

      let dropItem = {
        value: data.dataY[i],
        symbol: imgUrl[img].a,
        itemStyle: {
          color: color[i]
        }
      };

      dataDrop.push(dropItem);
    }

    let option = {
      title: {
        textStyle: {
          color: "#fff",
          fontSize: 16
        },
        left: '4.5%',
        top: "25%"
      },
      grid: {
        left: "3%",
        top: "5%",
        bottom: "5%",
        right: "10%",
        containLabel: true
      },
      tooltip: {
        trigger: "item",
        formatter: '{b}:{c}天'
      },
      xAxis: {
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      yAxis: [{
        type: "category",
        inverse: false,
        data: data.dataX,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
            color: "#3e86dd"
          }
        },
        axisLabel: {
          margin: 35,
          textStyle: {
            color: "#fff",
            fontSize: fsz20,
          }
        }
      }
      ],
      series: [
        {
          tooltip: {
            show: false
          },
          z: 4,
          type: "pictorialBar",
          symbolSize: ['30', '30'],
          symbolRepeat: "fixed",
          data: [
            {
              value: value,
              symbol: imgUrl.img1.b,
            },
            {
              value: value,
              symbol: imgUrl.img2.b,
            },
            {
              value: value,
              symbol: imgUrl.img3.b,
            },
            {
              value: value,
              symbol: imgUrl.img4.b,
            },
            {
              value: value,
              symbol: imgUrl.img5.b,
            }
          ]
        },
        {
          z: 6,
          type: "pictorialBar",
          symbolSize: ['30', '30'],
          animation: true,
          symbolRepeat: "fixed",
          symbolClip: true,
          symbolPosition: "start",
          symbolOffset: [0, 0],
          data: dataDrop,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: fsz30
              },
              formatter: function (series) {
                return series.value + '天';
              },
              position: "right",
              offset: [35, 0]
            }
          },
        },
        {
          type: "bar"
        }
      ]
    };

另附json

{
  "success": true,
  "code": 0,
  "count": 0,
  "totalNum": 1,
  "nowPage": 1,
  "data": {
    "dataX": ["2015年", "2016年", "2017年", "2018年", "2019年"],
    "dataY": [40, 100, 67, 38, 86]
  }
}