柱状图的柱子样式（顶部样式，数值统一显示在最顶部或一侧）

效果图

斜箭头图片

代码

提示：通过象形柱图实现

//站台上下客人数排行
var updown = document.getElementById('updown');
var updowndata = [["马家村", "马家", "张陈家", "港边路口", "杭商院北门"], [10, 13, 15, 18, 23],]
function updownNum(dom, data) {
  var updown = echarts.init(dom)
  // 指定图表的配置项和数据
  var undownoption = {
    grid: {  //图表的上下左右的距离
      left: '10%',
      right: '4%',
      bottom: '10%',
      top: '8%',
      padding: '0 0 0 0',
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      data: data[0],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#00c0d3',
          fontStyle: 'normal',
          fontSize: 16,
        }
      }

    },
    series: [
      {
        name: '人数',
        type: 'pictorialBar',
        z: -1,
        barWidth: 15,
        data: data[1],
        //将一个图片作为数据大小的变化基准  及斜箭头柱体图片
        symbol: 'image://../img/bgimg/zhuzhuangtu.png',
        symbolOffset: [0, '60%'],
        // symbolSize1:['100%', '100%'],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                { offset: 0, color: '#112e4f' },
                { offset: 1, color: '#0380e1' }
              ]
            ),
            label: {
              // show: true, //开启显示
              position: 'right',
              textStyle: { //数值样式
                color: '#00c0d3',
                fontSize: 16
              }

            },
          },

        }
      },
      {
        name: '人数',
        type: 'pictorialBar',
        data: data[1],
        barWidth: 35,
        z: 1,
        symbol: 'react', //你所看到的栅格背景  通过栅格背景控制数据显示
        symbolRepeat: 'fixed',//设置固定可让数据在统一位置显示

        symbolSize: ['6%', '100%'],
        symbolMargin: 1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 122, 204, 0.2)'
                },
              ]
            ),
            label: {
              show: true, //开启显示
              position: 'insideRight',
              textStyle: { //数值样式
                color: '#00ffff',
                fontStyle: 'italic',
                fontSize: 16
              }

            },
          },

        }
      },

    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  updown.setOption(undownoption);
}
updownNum(updown, updowndata)