echarts自定义柱状形状 带有上调下降趋势

1，自定义柱状图形状
处理方式：用echarts里的symbol

series:[
{
            data: this.yData,
            type: 'pictorialBar',
            symbolRepeat: true,
            symbol:    //图片base64位编码 这里省略
            animationEasing: 'elasticOut',
            symbolSize: ['50%', '40%'],
            symbolMargin: '0', //图形垂直间隔
            symbolRepeat: 'fixed',
            symbolClip: true,
          },
]

2，自带上调下降趋势

series：[
...省略
{
...省略
 markPoint: {
              symbolSize: [20, 20],
              symbolOffset: [0, 0],
              data: [
                {
                  symbol:
                    'path://M13.811,11h3.918l-6.855,7L4.021,11H8.036c0-5-1.568-8.5-4.993-11C7.937,1,12.833,4,13.811,11Z',  //svg在线路径
                  coord: [1, 90],  //在坐标轴的位置
                  value: '0.69%', //展示的值
                  label: {
                    position: 'right',
                  },
                  itemStyle: {
                    color: 'green', 当前的symbol颜色
                    fontSize:6,
                  },
                },
                {
                  symbol:
                    'path://M13.811,7h3.918L10.874,0,4.021,7H8.036c0,5-1.568,8.5-4.993,11C7.937,17,12.833,14,13.811,7Z',
                  coord: [2, 90],
                  value: '2.21%',
                  label: {
                    position: 'right',
                  },
                  itemStyle: {
                    color: 'red',
                    fontSize:6,
                  },
                },
              ],
            },
}
...省略
]

冷知识：
一：ECharts 提供的标记类型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’；例：symbol: ‘pin’
二：可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，例：symbol: ‘image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg’
三：可以通过 图片base64位编码设置图片

而一般我们的图片格式都是jpg或者png格式的，所以对于第三种方法，我们需要把jpg/png的图片格式转换为base64编码，转换工具我这里给大家提供一种：https://www.bejson.com/convert/image_to_svg/，