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

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

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