自定义柱状图（水滴图）的填坑之路

先放一张水滴图的效果图。

当然也可以是其它的形状，参考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]
  }
}